@social-mail/social-mail-client 1.2.26 → 1.2.28

package/node_modules/@web-atoms/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-atoms/core",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "description": "Web Atoms Core",
   "main": "index.js",
   "scripts": {

package/node_modules/@web-atoms/core/src/services/FetchBuilder.ts

@@ -57,6 +57,9 @@ export default class FetchBuilder {
     public form(name: string, value: string): FetchBuilder;
     public form(name: string, value: Blob, fileName: string): FetchBuilder;
     public form(name: string, value: string | Blob, fileName?: string ): FetchBuilder {
+        if (value === void 0) {
+            return this;
+        }
         const body = this.request.body as FormData ?? new FormData();
         if (fileName) {
             if (typeof value === "string") {
@@ -94,6 +97,9 @@ export default class FetchBuilder {
     }
 
     public query(name: string, value: any, encode = true) {
+        if (value === void 0) {
+            return this;
+        }
         let url = this.request.url;
         if (encode) {
             value = encodeURIComponent(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.26",
+  "version": "1.2.28",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,7 +11,7 @@
   "license": "ISC",
   "bundledDependencies": true,
   "dependencies": {
-    "@web-atoms/core": "^2.4.1",
+    "@web-atoms/core": "^2.4.3",
     "@web-atoms/data-styles": "^1.0.115",
     "@web-atoms/date-time": "^1.1.0",
     "@web-atoms/email-dom": "^1.0.30",

package/src/common/FileUploader.ts

@@ -0,0 +1,140 @@
+/* eslint-disable no-console */
+import { CancelToken } from "@web-atoms/core/dist/core/types";
+import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
+
+export interface IUploadResult {
+    appFileID?: number;
+    url?: string;
+    downloadUrl?: string;
+    key?: string;
+    contentType?: string;
+    fileContentID?: number;
+};
+
+export interface IUploadRequest {
+    file: File;
+    done: number;
+    promise: Promise<IUploadResult>;
+}
+
+export interface IUploadRequestParams {
+    file: File,
+    url: string,
+    sha256?: string,
+    extra?: any,
+    folder?: string,
+    cancelToken?: CancelToken,
+    progress?: (n) => void
+}
+
+export default class FileUploader extends TaskManager {
+
+    rateLimit = 4;
+
+    upload(req: IUploadRequestParams) {
+        const { file, progress } = req;
+        const result = {
+            file,
+            done: 0,
+            promise: null
+        };
+        req.progress = (n) => {
+            result.done = n;
+            progress?.(n);
+        };
+        result.promise = this.run(() => this.tryUpload3(req));
+        return result as IUploadRequest;
+    }
+
+    private async sha256(blob: Blob) {
+        const msgBuffer = await blob.arrayBuffer();
+        const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
+
+        // convert ArrayBuffer to Array
+        const hashArray = Array.from(new Uint8Array(hashBuffer));
+        // convert bytes to hex string
+        const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+        return hashHex;
+    }
+
+
+    private async tryUpload3(req: IUploadRequestParams) {
+        let lastError;
+        if(!req.sha256) {
+            req.sha256 = await this.sha256(req.file);
+        }
+        for (let index = 0; index < 3; index++) {
+            try {
+                return await this.tryUpload(req);
+            } catch (error) {
+                lastError = error;
+            }
+        }
+        throw lastError;
+    }
+
+    private tryUpload({ file, url, sha256, extra, folder, cancelToken, progress }: IUploadRequestParams) {
+        return new Promise<IUploadResult>((resolve, reject) => {
+
+            const body = new FormData();
+            body.append(file.name, file, file.name);
+            body.append("sha256", sha256);
+            const xhr = new XMLHttpRequest();
+                const onError = () => {
+                reject(new Error(xhr.responseText || "Error"));
+            };
+            cancelToken?.registerForCancel(() => xhr.abort());
+            xhr.upload.addEventListener("progress", (event) => {
+                if (event.lengthComputable) {
+                    try {
+                        progress?.(event.loaded / event.total);
+                    } catch (error) {
+                        console.error(error);
+                    }
+                }
+            });
+            xhr.upload.addEventListener("timeout", onError);
+            xhr.upload.addEventListener("error", onError);
+            xhr.upload.addEventListener("abort", onError);
+            xhr.addEventListener("timeout", onError);
+            xhr.addEventListener("abort", onError);
+            xhr.addEventListener("error", onError);
+            xhr.upload.addEventListener("progress", (event) => {
+                if (event.lengthComputable) {
+                    try {
+                        progress?.(event.loaded / event.total);
+                    } catch (error) {
+                        console.error(error);
+                    }
+                }
+            });
+            xhr.addEventListener("load", () => {
+                if(xhr.status <= 300) {
+                    const r = { ... JSON.parse(xhr.responseText), file};
+                    resolve(r);
+                }
+            });
+
+            const s = new URLSearchParams();
+
+            if (extra) {
+                for (const key in extra) {
+                    if (Object.prototype.hasOwnProperty.call(extra, key)) {
+                        const element = extra[key];
+                        if (element) {
+                            s.append(key, element);
+                        }
+                    }
+                }
+            }
+
+            if (folder) {
+                s.append("folder", folder);
+            }
+
+            xhr.open("POST", url + "?" + s.toString(), true);
+            xhr.send(body);
+        });
+    }
+
+}

package/src/model/model.ts

@@ -29,6 +29,7 @@ export interface IAppFile extends IClrEntity {
 	versions?: number | null;
 	url?: string;
 	downloadUrl?: string;
+	tempKeys?: string[];
 	fileContent?: IFileContent;
 	creator?: IUser;
 	parent?: IAppFile;

package/src/services/files/LocalFileService.tsx

@@ -13,6 +13,8 @@ import PopupService from "@web-atoms/core/dist/web/services/PopupService";
 import { AppFile, IAppFile } from "../../model/model";
 import TaskManager from "@web-atoms/entity/dist/models/TaskManager";
 import EntityService from "../EntityService";
+import FetchBuilder from "@web-atoms/core/dist/services/FetchBuilder";
+import FileUploader, { IUploadRequest, IUploadResult } from "../../common/FileUploader";
 
 export const acceptDocumentAndMedia = ".doc, .docx, application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, video/*, application/pdf, .pdf, .txt, audio/*, image/*, .csv, text/csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, text/plain, text/html";
 
@@ -65,6 +67,8 @@ export interface IFileUpload {
 @DISingleton()
 export default class LocalFileService extends TaskManager {
 
+    rateLimit = 4;
+
     @Inject
     private app: App;
 
@@ -101,16 +105,74 @@ export default class LocalFileService extends TaskManager {
         return hashHex;
     }
 
+    async uploadFileParts(file: File, extra, cancelToken?: CancelToken, progress?: (n) => void): Promise<IUploadedFile> {
+
+        let size = file.size;
+        const parts = [] as IUploadRequest[];
+        const tasks = [] as Promise<IUploadResult>[];
+        const maxSize = 4 * 1024 * 1024;
+        let start = 0;
+        const fud = new FileUploader();
+        while(size > 0) {
+            const blobSize = Math.min(maxSize, file.size - start);
+            const part = new File([file.slice( start, start + blobSize)], "file.dat");
+            size -= blobSize;
+            start += blobSize;
+            const uploadRequest = fud.upload({
+                url: "/api/tmp/upload",
+                file:part,
+                cancelToken,
+                progress: () => {
+                    const done = (parts.reduce((pv, cv) => pv + cv.done, 0) || 0);
+                    progress?.( done/ parts.length);
+                }
+            });
+            parts.push(uploadRequest);
+            tasks.push(uploadRequest.promise);
+        }
+        const tempUrls = await Promise.all(tasks);
+        const tempKeys = tempUrls.map((x) => x.key);
+        const name = file.name;
+        const { parentID, appFileID, folder } = extra;
+        const appFile = await FetchBuilder.post("/api/upload")
+            .form("name", name)
+            .form("tempKeys", JSON.stringify(tempKeys))
+            .form("contentType", file.type)
+            .query("parentID", parentID)
+            .query("appFileID", appFileID)
+            .query("folder", folder)
+            .responseAsJson<any>();
+        return {
+            url: appFile.url,
+            downloadUrl: appFile.url,
+            file,
+            contentType: appFile.contentType,
+            fileContentID: appFile.fileContentID,
+            appFileID: appFile.appFileID
+        };
+    }
+
     async uploadFile(file: File, extra: any, ct?: CancelToken, progress?: (n) => void): Promise<IUploadedFile> {
-        const sha256 = await this.sha256(file);
+
+        let folder = void 0;
+
+        if (file.webkitRelativePath) {
+            const folders = file.webkitRelativePath.split("/");
+            folders.pop();
+            if (folders.length) {
+                folder = folders.join("/");
+            }
+        }
 
         // check if file exists???
         if (typeof extra === "string") {
             extra = JSON.parse(extra);
         }
 
+        const sha256 = await this.sha256(file);
+
         if (extra.parentID) {
-            const existing = await this.entityService.query(AppFile, "children", extra.parentID, file.name, sha256)
+            const existing = await this.entityService.query(AppFile, "children", extra.parentID, folder ? folder + "/" + file.name : file.name, sha256)
                 .firstOrDefault();
             if (existing) {
                 const { appFileID, url } = existing;
@@ -122,6 +184,10 @@ export default class LocalFileService extends TaskManager {
             }
         }
 
+        if (file.size > 4 * 1024 * 1024) {
+            return await this.uploadFileParts(file, extra, ct, progress);
+        }
+
         return new Promise<IUploadedFile>((resolve, reject) => {
             const body = new FormData();
             body.append(file.name, file, file.name);
@@ -168,13 +234,8 @@ export default class LocalFileService extends TaskManager {
                 }
             }
 
-            if (file.webkitRelativePath) {
-                const folders = file.webkitRelativePath.split("/");
-                folders.pop();
-                if (folders.length) {
-                    const folder = folders.join("/");
-                    s.append("folder", folder);
-                }
+            if (folder) {
+                s.append("folder", folder);
             }
 
             postUrl += "?" + s.toString();

package/src/style/GlobalStyle.ts

@@ -32,6 +32,7 @@ function addLinkTag(href, integrity?, rel = "stylesheet") {
 addLinkTag("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");
 addLinkTag("https://npm-git.azureedge.net/npm/package/@c8private/fa-icons@6.5.1/css/all.min.css");
 addLinkTag("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
+addLinkTag("https://cdn.jsdelivr.net/npm/file-icon-vectors@1.0.0/dist/file-icon-vivid.min.css");
 
     styled.css `
 

package/src/web/page/files/FolderPage.tsx

@@ -2,7 +2,7 @@ import { ContentPage } from "@web-atoms/web-controls/dist/mobile-app/MobileApp";
 import { AppFile, IAppFile } from "../../../model/model";
 import XNode from "@web-atoms/core/dist/core/XNode";
 import UploadEvent from "@web-atoms/web-controls/dist/basic/UploadEvent";
-import AtomRepeater, { SelectorCheckBox } from "@web-atoms/web-controls/dist/basic/AtomRepeater";
+import AtomRepeater, { SelectAll, SelectorCheckBox } from "@web-atoms/web-controls/dist/basic/AtomRepeater";
 import TreeView from "../../../common/controls/tree/TreeView";
 import Bind from "@web-atoms/core/dist/core/Bind";
 import Action from "@web-atoms/core/dist/view-model/Action";
@@ -33,6 +33,13 @@ const css = styled.css `
             width: 100%;
         }
 
+        & a {
+            text-decoration: none;
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+
         & .file-link {
             cursor: pointer;
             &:hover {
@@ -67,6 +74,8 @@ export default class FolderPage extends ContentPage {
 
     private selectedFiles: IAppFile[] = [];
 
+    private files: IAppFile[] = [];
+
     @InjectProperty
     private cloudFileService: CloudFileService;
 
@@ -126,7 +135,17 @@ export default class FolderPage extends ContentPage {
             </div>}
         </div>;
 
-        this.renderer = <div class={css}>
+        this.renderer = <div
+            class={css}
+            files={Bind.oneWayAsync((c, e, cancelToken) =>
+                this.cloudFileService.files({
+                    search: this.search,
+                    folder: this.selectedFolder,
+                    version: this.version,
+                    cancelToken
+                })
+            )}
+            >
             <TreeView
                 class="folder-tree"
                 presenter={Bind.presenter((c) => this.folderTree = c)}
@@ -144,15 +163,14 @@ export default class FolderPage extends ContentPage {
                     data-layout="data-grid"
                     allowMultipleSelection={true}
                     selectedItems={this.selectedFiles}
-                    items={Bind.oneWayAsync((c, e, cancelToken) =>
-                            this.cloudFileService.files({
-                                search: this.search,
-                                folder: this.selectedFolder,
-                                version: this.version,
-                                cancelToken
-                            })
-                        )}
+                    header={true}
+                    headerRenderer={() => <header>
+                        <SelectAll
+                            items={Bind.oneWay(() => this.files)}
+                            selectedItems={this.selectedFiles}/>
+                    </header>}
                     itemRenderer={(file: IAppFile) => this.renderFile(file)}
+                    items={Bind.oneWay(() => this.files)}
                     />
             </div>
         </div>;
@@ -251,10 +269,17 @@ export default class FolderPage extends ContentPage {
         await this.cloudFileService.expand(item);
     }
 
-    @Action({ onEvent: "delete-files"})
+    @Action({ onEvent: "delete-files", confirm: "Are you sure you want to delete selected files?"})
     async deleteFiles() {
-        await this.cloudFileService.delete(this.selectedFiles);
-        this.selectedFiles.clear();
+        const copy = [].concat(this.selectedFiles);
+        while(copy.length) {
+            const slice = copy.splice(0, 10);
+            await this.cloudFileService.delete(slice);
+            for (const iterator of slice) {
+                this.selectedFiles.remove(iterator);
+                this.files.remove(iterator);
+            }
+        }
         this.version++;
     }