fix: architectural issue with code flow on image downloads

devvaannsh · abose · commit 043e96283145 · 2025-11-20T13:52:42.000+05:30
diff --git a/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js b/src/LiveDevelopment/BrowserScripts/RemoteFunctions.js
@@ -3162,18 +3162,9 @@ function RemoteFunctions(config = {}) {
                     const extnName = ".jpg";
 
                     const downloadUrl = image.url || image.thumb_url;
+                    const downloadLocation = image.download_location;
 
-                    // we need to make a req to the download endpoint
-                    // its required by the Unsplash API guidelines to track downloads for photographers
-                    // this is just a tracking call, we don't need to wait for the response
-                    if (image.download_location) {
-                        fetch(`https://images.phcode.dev/api/images/download?download_location=${encodeURIComponent(image.download_location)}`)
-                            .catch(error => {
-                                console.error('download tracking failed:', error);
-                            });
-                    }
-
-                    this._useImage(downloadUrl, filename, extnName, false, thumbDiv);
+                    this._useImage(downloadUrl, filename, extnName, false, thumbDiv, downloadLocation);
                 });
 
                 thumbDiv.appendChild(img);
@@ -3213,9 +3204,9 @@ function RemoteFunctions(config = {}) {
             return `${cleanSearchTerm}-by-${cleanPhotographerName}`;
         },
 
-        _useImage: function(imageUrl, filename, extnName, isLocalFile, thumbDiv) {
-            // send the message to the editor instance to save the image and update the source code
+        _useImage: function(imageUrl, filename, extnName, isLocalFile, thumbDiv, downloadLocation) {
             const tagId = this.element.getAttribute("data-brackets-id");
+            const downloadId = Date.now() + Math.random();
 
             const messageData = {
                 livePreviewEditEnabled: true,
@@ -3224,7 +3215,9 @@ function RemoteFunctions(config = {}) {
                 filename: filename,
                 extnName: extnName,
                 element: this.element,
-                tagId: Number(tagId)
+                tagId: Number(tagId),
+                downloadLocation: downloadLocation,
+                downloadId: downloadId
             };
 
             // if this is a local file we need some more data before sending it to the editor
@@ -3239,15 +3232,12 @@ function RemoteFunctions(config = {}) {
                 messageData.imageData = byteNumbers;
             }
 
-            window._Brackets_MessageBroker.send(messageData);
+            _activeDownloads.set(downloadId, {
+                thumbDiv: thumbDiv,
+                timestamp: Date.now()
+            });
 
-            // if thumbDiv is provided, hide the download indicator after a reasonable timeout
-            // this is to make sure that the indicator is always removed even if there's no explicit success callback
-            if (thumbDiv) {
-                setTimeout(() => {
-                    this._hideDownloadIndicator(thumbDiv);
-                }, 3000);
-            }
+            window._Brackets_MessageBroker.send(messageData);
         },
 
         _handleLocalImageSelection: function(file) {
@@ -3640,6 +3630,41 @@ function RemoteFunctions(config = {}) {
     var _setup = false;
     var _hoverLockTimer = null;
 
+    const DOWNLOAD_EVENTS = {
+        STARTED: 'downloadStarted',
+        COMPLETED: 'downloadCompleted',
+        CANCELLED: 'downloadCancelled',
+        ERROR: 'downloadError'
+    };
+
+    let _activeDownloads = new Map();
+
+    function handleDownloadEvent(eventType, data) {
+        const downloadId = data && data.downloadId;
+        if (!downloadId) {
+            return;
+        }
+
+        const download = _activeDownloads.get(downloadId);
+        if (!download) {
+            return;
+        }
+
+        switch (eventType) {
+        case DOWNLOAD_EVENTS.STARTED:
+            break;
+
+        case DOWNLOAD_EVENTS.COMPLETED:
+        case DOWNLOAD_EVENTS.CANCELLED:
+        case DOWNLOAD_EVENTS.ERROR:
+            if (_imageRibbonGallery && download.thumbDiv) {
+                _imageRibbonGallery._hideDownloadIndicator(download.thumbDiv);
+            }
+            _activeDownloads.delete(downloadId);
+            break;
+        }
+    }
+
     function onMouseOver(event) {
         if (_validEvent(event)) {
             const element = event.target;
@@ -4660,6 +4685,7 @@ function RemoteFunctions(config = {}) {
         "hasVisibleLivePreviewBoxes" : hasVisibleLivePreviewBoxes,
         "dismissUIAndCleanupState" : dismissUIAndCleanupState,
         "enableHoverListeners" : enableHoverListeners,
-        "registerHandlers" : registerHandlers
+        "registerHandlers" : registerHandlers,
+        "handleDownloadEvent" : handleDownloadEvent
     };
 }
diff --git a/src/LiveDevelopment/LivePreviewEdit.js b/src/LiveDevelopment/LivePreviewEdit.js
@@ -43,6 +43,13 @@ define(function (require, exports, module) {
     // state manager key, to save the download location of the image
     const IMAGE_DOWNLOAD_FOLDER_KEY = "imageGallery.downloadFolder";
 
+    const DOWNLOAD_EVENTS = {
+        STARTED: 'downloadStarted',
+        COMPLETED: 'downloadCompleted',
+        CANCELLED: 'downloadCancelled',
+        ERROR: 'downloadError'
+    };
+
     const KernalModeTrust = window.KernalModeTrust;
     if(!KernalModeTrust){
         // integrated extensions will have access to kernal mode, but not external extensions
@@ -686,6 +693,32 @@ define(function (require, exports, module) {
         }
     }
 
+    function _sendDownloadStatusToBrowser(eventType, data) {
+        const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
+        if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
+            const dataJson = JSON.stringify(data || {});
+            const evalString = `_LD.handleDownloadEvent('${eventType}', ${dataJson})`;
+            currLiveDoc.protocol.evaluate(evalString);
+        }
+    }
+
+    function _handleDownloadError(error, downloadId) {
+        console.error('something went wrong while download the image. error:', error);
+        if (downloadId) {
+            _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.ERROR, { downloadId: downloadId });
+        }
+    }
+
+    function _trackDownload(downloadLocation) {
+        if (!downloadLocation) {
+            return;
+        }
+        fetch(`https://images.phcode.dev/api/images/download?download_location=${encodeURIComponent(downloadLocation)}`)
+            .catch(error => {
+                console.error('download tracking failed:', error);
+            });
+    }
+
     /**
      * Helper function to update image src attribute and dismiss ribbon gallery
      *
@@ -717,16 +750,18 @@ define(function (require, exports, module) {
      * @param {Directory} projectRoot - the project root in which the image is to be saved
      */
     function _handleUseThisImageLocalFiles(message, filename, projectRoot) {
-        const { tagId, imageData } = message;
+        const { tagId, imageData, downloadLocation, downloadId } = message;
 
         const uint8Array = new Uint8Array(imageData);
         const targetPath = projectRoot.fullPath + filename;
 
         window.fs.writeFile(targetPath, window.Filer.Buffer.from(uint8Array),
             { encoding: window.fs.BYTE_ARRAY_ENCODING }, (err) => {
                 if (err) {
-                    console.error('Failed to save image:', err);
+                    _handleDownloadError(err, downloadId);
                 } else {
+                    _trackDownload(downloadLocation);
+                    _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.COMPLETED, { downloadId });
                     _updateImageAndDismissRibbon(tagId, targetPath, filename);
                 }
             });
@@ -739,7 +774,7 @@ define(function (require, exports, module) {
      * @param {Directory} projectRoot - the project root in which the image is to be saved
      */
     function _handleUseThisImageRemote(message, filename, projectRoot) {
-        const { imageUrl, tagId } = message;
+        const { imageUrl, tagId, downloadLocation, downloadId } = message;
 
         fetch(imageUrl)
             .then(response => {
@@ -755,14 +790,16 @@ define(function (require, exports, module) {
                 window.fs.writeFile(targetPath, window.Filer.Buffer.from(uint8Array),
                     { encoding: window.fs.BYTE_ARRAY_ENCODING }, (err) => {
                         if (err) {
-                            console.error('Failed to save image:', err);
+                            _handleDownloadError(err, downloadId);
                         } else {
+                            _trackDownload(downloadLocation);
+                            _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.COMPLETED, { downloadId });
                             _updateImageAndDismissRibbon(tagId, targetPath, filename);
                         }
                     });
             })
             .catch(error => {
-                console.error('Failed to fetch image:', error);
+                _handleDownloadError(error, downloadId);
             });
     }
 
@@ -779,6 +816,10 @@ define(function (require, exports, module) {
             return;
         }
 
+        if (message.downloadId) {
+            _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.STARTED, { downloadId: message.downloadId });
+        }
+
         const filename = message.filename;
         const extnName = message.extnName || "jpg";
 
@@ -793,11 +834,17 @@ define(function (require, exports, module) {
         // the directory name that user wrote, first check if it exists or not
         // if it doesn't exist we create it and then download the image inside it
         targetDir.exists((err, exists) => {
-            if (err) { return; }
+            if (err) {
+                _handleDownloadError(err, message.downloadId);
+                return;
+            }
 
             if (!exists) {
                 targetDir.create((err) => {
-                    if (err) { return; }
+                    if (err) {
+                        _handleDownloadError(err, message.downloadId);
+                        return;
+                    }
                     _downloadImageToDirectory(message, filename, extnName, targetDir);
                 });
             } else {
@@ -1143,6 +1190,10 @@ define(function (require, exports, module) {
                 if (message) {
                     _downloadToFolder(message, folderPath);
                 }
+            } else {
+                if (message && message.downloadId) {
+                    _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.CANCELLED, { downloadId: message.downloadId });
+                }
             }
             dialog.close();
         });
@@ -1188,7 +1239,7 @@ define(function (require, exports, module) {
                 _handleUseThisImageRemote(message, uniqueFilename, targetDir);
             }
         }).catch(error => {
-            console.error('Something went wrong when trying to use this image', error);
+            _handleDownloadError(error, message.downloadId);
         });
     }
 
