From 9c7e055a2cf7ca5bc517edd3a9f44e128ec40ff3 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 2 Dec 2023 15:53:28 -0500
Subject: fixed jimp upload to not hang when error occurs.  fied imagebox to
 show original image if resized images fail.

---
 src/client/views/nodes/ImageBox.tsx     |  6 ++++--
 src/client/views/nodes/LoadingBox.tsx   |  3 ++-
 src/server/ApiManagers/UploadManager.ts |  1 +
 src/server/DashUploadUtils.ts           | 29 ++++++++++++++++++-----------
 4 files changed, 25 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 7e85c33b8..d28d71fe3 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -319,7 +319,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         if (!/\.(png|jpg|jpeg|gif|webp)$/.test(lower)) return `/assets/unknown-file-icon-hi.png`;
 
         const ext = extname(url.href);
-        return url.href.replace(ext, this._curSuffix + ext);
+        return url.href.replace(ext, (this._error ? '_o' : this._curSuffix) + ext);
     }
 
     considerGooglePhotosLink = () => {
@@ -430,6 +430,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return paths.length ? paths : [Utils.CorsProxy('https://cs.brown.edu/~bcz/noImage.png')];
     }
 
+    @observable _error = '';
+
     @observable _isHovering = false; // flag to switch between primary and alternate images on hover
     @computed get content() {
         TraceMobx();
@@ -457,7 +459,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         return (
             <div className="imageBox-cont" onPointerEnter={action(() => (this._isHovering = true))} onPointerLeave={action(() => (this._isHovering = false))} key={this.layoutDoc[Id]} ref={this.createDropTarget} onPointerDown={this.marqueeDown}>
                 <div className="imageBox-fader" style={{ opacity: backAlpha }}>
-                    <img key="paths" src={srcpath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
+                    <img key="paths" src={srcpath} style={{ transform, transformOrigin }} onError={action(e => (this._error = e.toString()))} draggable={false} width={nativeWidth} />
                     {fadepath === srcpath ? null : (
                         <div className={`imageBox-fadeBlocker${(this._isHovering && usePath === 'alternate:hover') || usePath === 'alternate' ? '-hover' : ''}`} style={{ transition: StrCast(this.layoutDoc.viewTransition, 'opacity 1000ms') }}>
                             <img className="imageBox-fadeaway" key="fadeaway" src={fadepath} style={{ transform, transformOrigin }} draggable={false} width={nativeWidth} />
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index 01dd830f8..e554cb8ad 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -63,13 +63,14 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             const updateFunc = async () => {
                 const result = await Networking.QueryYoutubeProgress(StrCast(this.Document[Id])); // We use the guid of the overwriteDoc to track file uploads.
                 runInAction(() => (this.progress = result.progress));
-                !this.Document.loadingError && (this._timer = setTimeout(updateFunc, 1000));
+                !this.Document.loadingError && this._timer && (this._timer = setTimeout(updateFunc, 1000));
             };
             this._timer = setTimeout(updateFunc, 1000);
         }
     }
     componentWillUnmount() {
         clearTimeout(this._timer);
+        this._timer = undefined;
     }
 
     render() {
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index 83644e564..09ba2a57e 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -79,6 +79,7 @@ export default class UploadManager extends ApiManager {
                 form.uploadDir = pathToDirectory(Directory.parsed_files);
                 return new Promise<void>(resolve => {
                     form.parse(req, async (_err, _fields, files) => {
+                        fileguids.split(';').map(guid => DashUploadUtils.uploadProgress.set(guid, `resampling images`));
                         const results: Upload.FileResponse[] = [];
                         if (_err?.message) {
                             results.push({
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 6cad49033..eb6c080ef 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -594,18 +594,25 @@ export namespace DashUploadUtils {
      * @param outputDirectory the directory to output to, usually Directory.Images
      * @returns a map with suffixes as keys and resized filenames as values.
      */
-    export function outputResizedImages(sourcePath: string, outputFileName: string, outputDirectory: string) {
+    export async function outputResizedImages(sourcePath: string, outputFileName: string, outputDirectory: string) {
         const writtenFiles: { [suffix: string]: string } = {};
-        return Jimp.read(sourcePath).then(async img => {
-            await Promise.all(
-                imageResampleSizes(path.extname(outputFileName)).map(({ width, suffix }) => {
-                    const outputPath = path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix)));
-                    if (!width) return new Promise<void>(res => createReadStream(sourcePath).pipe(createWriteStream(outputPath)).on('close', res));
-                    else img = img.resize(width, Jimp.AUTO).write(outputPath);
-                }) // prettier-ignore
-            );
-            return writtenFiles;
-        });
+        const sizes = imageResampleSizes(path.extname(outputFileName));
+        const outputPath = (suffix: SizeSuffix) => path.resolve(outputDirectory, (writtenFiles[suffix] = InjectSize(outputFileName, suffix)));
+        await Promise.all(
+            sizes.filter(({ width }) => !width).map(({ suffix }) => 
+                new Promise<void>(res => createReadStream(sourcePath).pipe(createWriteStream(outputPath(suffix))).on('close', res))
+        )); // prettier-ignore
+        return Jimp.read(sourcePath)
+            .then(async img => {
+                await Promise.all( sizes.filter(({ width }) => width)  .map(({ width, suffix }) => 
+                    img = img.resize(width, Jimp.AUTO).write(outputPath(suffix))
+                )); // prettier-ignore
+                return writtenFiles;
+            })
+            .catch(e => {
+                console.log('ERROR' + e);
+                return writtenFiles;
+            });
     }
 
     /**
-- 
cgit v1.2.3-70-g09d2