Merge pull request #3983 from runningonsideprojects/upload-files-bug-and-refactor

fix: file uploader styling refactor

Author: raclim

client/modules/IDE/actions/uploader.js

@@ -82,6 +82,23 @@ export function dropzoneCompleteCallback(file) {
         content: file.content
       };
       dispatch(handleCreateFile(formParams, false));
+    } else if (file.status === 'error' || file.xhr.status >= 400) {
+      let uploadFileErrorMessage = 'Uploading file to AWS failed.';
+      if (file.xhr?.response) {
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(file.xhr.response, 'text/xml');
+        const message = xmlDoc.getElementsByTagName('Message')[0]?.textContent;
+        const code = xmlDoc.getElementsByTagName('Code')[0]?.textContent;
+        uploadFileErrorMessage = `${code}: ${message}`;
+      }
+      file.previewElement.classList.add('dz-error');
+      file.previewElement.classList.remove('dz-success');
+      const dzErrorMessageElement = file.previewElement?.querySelector(
+        '[data-dz-errormessage]'
+      );
+      if (dzErrorMessageElement) {
+        dzErrorMessageElement.textContent = uploadFileErrorMessage;
+      }
     }
   };
 }

client/modules/IDE/components/FileUploader.jsx

@@ -23,13 +23,36 @@ const StyledUploader = styled.div`
   .dz-preview.dz-image-preview {
     background-color: transparent;
   }
+  .dz-image img {
+    width: 100%;
+    height: auto;
+  }
+  .dz-details .dz-filename:hover {
+    overflow: hidden;
+  }
+  .dz-error-message span {
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+    display: block;
+  }
+  .dz-error-mark:hover {
+    cursor: pointer !important;
+  }
 `;
 
 function FileUploader() {
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const userId = useSelector((state) => state.user.id);
-
+  const deleteUploadErrorFiles = (uploader, file) => {
+    if (file.status === 'error') {
+      file.previewElement.addEventListener('click', (e) => {
+        e.stopPropagation();
+        uploader.removeFile(file);
+      });
+    }
+  };
   useEffect(() => {
     const uploader = new Dropzone('div#uploader', {
       url: s3BucketHttps,
@@ -52,6 +75,7 @@ function FileUploader() {
     });
     uploader.on('complete', (file) => {
       dispatch(dropzoneCompleteCallback(file));
+      deleteUploadErrorFiles(uploader, file);
     });
     return () => {
       uploader.destroy();