fix(file-uploader-web): offline suport

packages/pluggableWidgets/file-uploader-web/src/components/FileEntry.tsx

@@ -34,6 +34,7 @@ export const FileEntryContainer = observer(({ store, actions }: FileEntryContain
             title={store.title}
             size={store.size}
             thumbnail={store.imagePreviewUrl}
+            onThumbnailError={store.onPreviewError}
             mimeType={store.mimeType}
             fileStatus={store.fileStatus}
             errorMessage={store.errorDescription}
@@ -47,6 +48,7 @@ interface FileEntryProps {
     title: string;
     size: number;
     thumbnail?: string;
+    onThumbnailError?: () => void;
     mimeType: string;
 
     fileStatus: FileStatus;
@@ -98,7 +100,12 @@ function FileEntry(props: FileEntryProps): ReactElement {
                     })}
                 >
                     {props.thumbnail ? (
-                        <img className={"image-preview"} src={props.thumbnail} alt="" />
+                        <img
+                            className={"image-preview"}
+                            src={props.thumbnail}
+                            alt=""
+                            onError={props.onThumbnailError}
+                        />
                     ) : (
                         <FileIcon mimeType={props.mimeType} />
                     )}

packages/pluggableWidgets/file-uploader-web/src/stores/FileStore.ts

@@ -38,6 +38,7 @@ export class FileStore {
     private _objectItem?: ObjectItem = undefined;
     private _mxObject?: MxObject = undefined;
     private _thumbnailUrl?: string = undefined;
+    private _previewFellBack = false;
     private _rootStore: FileUploaderStore;
 
     key: number;
@@ -136,7 +137,7 @@ export class FileStore {
 
         // upload content to object
         try {
-            await saveFile(this._objectItem, this._file!);
+            await saveFile(this._objectItem, this._file!, this._file!.name);
             await this.fetchMxObject();
 
             runInAction(() => {
@@ -218,6 +219,7 @@ export class FileStore {
         }
 
         this._thumbnailUrl = undefined;
+        this._previewFellBack = false;
         if (this._mxObject) {
             const url = await fetchImageThumbnail(this._mxObject);
             runInAction(() => {
@@ -226,6 +228,20 @@ export class FileStore {
         }
     }
 
+    onPreviewError = (): void => {
+        // thumbnails are generated server-side and don't exist in OPFS for files
+        // uploaded while offline — fall back to the document itself
+        if (this._previewFellBack || !this._mxObject) {
+            return;
+        }
+        this._previewFellBack = true;
+        fetchDocumentUrl(this._mxObject).then(url => {
+            runInAction(() => {
+                this._thumbnailUrl = url;
+            });
+        });
+    };
+
     async getDownloadUrl(): Promise<string | undefined> {
         if (this._mxObject) {
             return fetchDocumentUrl(this._mxObject);

packages/pluggableWidgets/file-uploader-web/src/utils/mx-data.ts

@@ -8,9 +8,9 @@ export type MxObject = {
     get2(name: string): string | Big | boolean;
 };
 
-export function saveFile(item: ObjectItem, fileToUpload: Blob): Promise<void> {
+export function saveFile(item: ObjectItem, fileToUpload: Blob, fileName: string | null = null): Promise<void> {
     return new Promise<void>((resolve, reject) => {
-        (window as any).mx.data.saveDocument(item.id, null, {}, fileToUpload, resolve, reject);
+        (window as any).mx.data.saveDocument(item.id, fileName, {}, fileToUpload, resolve, reject);
     });
 }
 
@@ -40,11 +40,21 @@ export function fetchMxObject(objectItem: ObjectItem): Promise<MxObject> {
 }
 
 export async function fetchDocumentUrl(mxObject: MxObject): Promise<string> {
-    return (window as any).mx.data.getDocumentUrl(mxObject.getGuid(), mxObject.get("changedDate"), false);
+    return (window as any).mx.data.getDocumentUrl(
+        mxObject.getGuid(),
+        mxObject.get("changedDate"),
+        false,
+        mxObject.get2("Name")?.toString()
+    );
 }
 
 export async function fetchImageThumbnail(mxObject: MxObject): Promise<string> {
-    const docUrl = await (window as any).mx.data.getDocumentUrl(mxObject.getGuid(), mxObject.get("changedDate"), true);
+    const docUrl = await (window as any).mx.data.getDocumentUrl(
+        mxObject.getGuid(),
+        mxObject.get("changedDate"),
+        true,
+        mxObject.get2("Name")?.toString()
+    );
     return new Promise<string>((resolve, reject) => {
         (window as any).mx.data.getImageUrl(docUrl, resolve, reject);
     });