able to save zip file to qdn

qortal-ui-plugins/package.json

@@ -21,15 +21,17 @@
 		"@material/mwc-list": "0.27.0",
 		"@material/mwc-select": "0.27.0",
 		"@tiptap/core": "2.0.0-beta.209",
+		"@tiptap/extension-highlight": "2.0.0-beta.209",
 		"@tiptap/extension-image": "2.0.0-beta.209",
 		"@tiptap/extension-placeholder": "2.0.0-beta.209",
 		"@tiptap/extension-underline": "2.0.0-beta.209",
-		"@tiptap/extension-highlight": "2.0.0-beta.209",
 		"@tiptap/html": "2.0.0-beta.209",
 		"@tiptap/starter-kit": "2.0.0-beta.209",
+		"@zip.js/zip.js": "2.6.62",
 		"asmcrypto.js": "2.3.2",
 		"compressorjs": "1.1.1",
 		"emoji-picker-js": "https://github.com/Qortal/emoji-picker-js",
+		"localforage": "1.10.0",
 		"prosemirror-commands": "1.5.0",
 		"prosemirror-dropcursor": "1.6.1",
 		"prosemirror-gapcursor": "1.3.1",
@@ -40,7 +42,6 @@
 		"prosemirror-state": "1.4.2",
 		"prosemirror-transform": "1.7.0",
 		"prosemirror-view": "1.29.1",
-		"localforage": "1.10.0",
 		"short-unique-id": "4.4.4"
 	},
 	"devDependencies": {
@@ -88,4 +89,4 @@
 	"engines": {
 		"node": ">=16.17.1"
 	}
-}
+}

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -9,6 +9,8 @@ import Placeholder from '@tiptap/extension-placeholder'
 import Highlight from '@tiptap/extension-highlight'
 import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import { Editor, Extension } from '@tiptap/core'
+import * as zip from "@zip.js/zip.js";
+import { saveAs } from 'file-saver';
 
 // import localForage from "localforage";
 registerTranslateConfig({
@@ -103,7 +105,8 @@ class ChatPage extends LitElement {
             openUserInfo: { type: Boolean },
             selectedHead: { type: Object },
             userName: { type: String },
-            goToRepliedMessage: {attribute: false}
+            goToRepliedMessage: {attribute: false},
+            gifsToBeAdded: { type: Array}
         }
     }
 
@@ -891,6 +894,7 @@ class ChatPage extends LitElement {
         this.currentEditor = '_chatEditorDOM'
         this.initialChat = this.initialChat.bind(this)
         this.isEnabledChatEnter = true
+        this.gifsToBeAdded = []
     }
 
     _toggle(value) {
@@ -923,6 +927,66 @@ class ChatPage extends LitElement {
         localStorage.setItem('isEnabledChatEnter', !this.isEnabledChatEnter ) 
         this.isEnabledChatEnter = !this.isEnabledChatEnter
     }
+
+    addGifs(gifs){
+        console.log('gifs', gifs)
+        this.gifsToBeAdded = [...this.gifsToBeAdded, ...gifs]
+        console.log('this.gifsToBeAdded', this.gifsToBeAdded)
+    }
+
+    async uploadGifCollection(){
+        try {
+            function blobToBase64(blob) {
+                return new Promise((resolve, _) => {
+                  const reader = new FileReader();
+                  reader.onloadend = () => resolve(reader.result);
+                  reader.readAsDataURL(blob);
+                });
+              }
+            const zipFileWriter = new zip.BlobWriter("application/zip");
+// Creates a TextReader object storing the text of the entry to add in the zip
+// (i.e. "Hello world!").
+const helloWorldReader = new zip.TextReader("Hello world!");
+
+// Creates a ZipWriter object writing data via `zipFileWriter`, adds the entry
+// "hello.txt" containing the text "Hello world!" via `helloWorldReader`, and
+// closes the writer.
+const file = this.gifsToBeAdded[0]
+const file2 = this.gifsToBeAdded[1]
+const zipWriter = new zip.ZipWriter(zipFileWriter, { bufferedWrite: true });
+await zipWriter.add(file.name, new zip.BlobReader(file));
+await zipWriter.add(file2.name, new zip.BlobReader(file2));
+
+await zipWriter.close();
+const zipFileBlob = await zipFileWriter.getData()
+const blobTobase = await blobToBase64(zipFileBlob)
+console.log({blobTobase})
+const userName = await this.getName(this.selectedAddress.address);
+            if (!userName) {
+                parentEpml.request('showSnackBar', get("chatpage.cchange27"));
+                this.isLoading = false;
+                return;
+            }
+            const id = this.uid();
+            const identifier = `gif_${id}`;
+await publishData({
+    registeredName: userName,
+    file : blobTobase.split(',')[1],
+    service: 'GIF_REPOSITORY',
+    identifier: identifier,
+    parentEpml,
+    metaData: undefined,
+    uploadType: 'zip',
+    selectedAddress: this.selectedAddress,
+    worker: this.webWorkerImage,
+    isBase64: true
+   })
+saveAs(zipFileBlob, 'zipfile');
+console.log({zipFileBlob})
+        } catch (error) {
+            console.log(error)
+        }
+    }
     
     render() {
         return html`
@@ -1110,6 +1174,34 @@ class ChatPage extends LitElement {
                         </div>
                 </div>    	
             </wrapper-modal>
+            <!-- gif modal -->
+            <wrapper-modal 
+                .onClickFunc=${() => {
+                    // this.removeImage();
+                }} 
+                style=${true ? "visibility:visible;z-index:50" : "visibility: hidden;z-index:-100"}>
+                    <div>
+                        <div class="dialog-container">
+                            
+                        <input 
+                            @change="${e => {
+                                this.addGifs(e.target.files);
+                                const filePickerInput = this.shadowRoot.getElementById('file-picker-gif') 
+                                if(filePickerInput){
+                                    filePickerInput.value = ""
+                                }
+                                    }
+                                }"
+                            id="file-picker-gif"
+                            ?multiple=${true}
+                            class="file-picker-input-gif" type="file" name="myGif" accept="image/gif" />
+
+                                <button @click=${()=> {
+                                    this.uploadGifCollection()
+                                }}>Upload Collection</button>
+                        </div>
+                </div>    	
+            </wrapper-modal>
             <paper-dialog class="warning" id="confirmDialog" modal>
                 <h2 style="color: var(--black);">${translate("chatpage.cchange41")}</h2>
                 <hr>

qortal-ui-plugins/plugins/utils/publish-image.js

@@ -16,7 +16,8 @@ export const publishData = async ({
 	parentEpml,
 	uploadType,
 	selectedAddress,
-	worker
+	worker,
+	isBase64
 }) => {
 	const validateName = async (receiverName) => {
 		let nameRes = await parentEpml.request("apiCall", {
@@ -115,11 +116,17 @@ export const publishData = async ({
 				}
 
 				// Base64 encode the file to work around compatibility issues between javascript and java byte arrays
+				if(isBase64){
+					postBody = file
+				}
+				if(!isBase64){
 				let fileBuffer = new Uint8Array(await file.arrayBuffer())
 				postBody = Buffer.from(fileBuffer).toString("base64")
+				}
+				
 			}
 
-		
+			console.log({postBody})
 		
 			let uploadDataUrl = `/arbitrary/${service}/${registeredName}${urlSuffix}?apiKey=${getApiKey()}`
 			if (identifier != null && identifier.trim().length > 0) {