Fix console error when uploading file in media index view

outl1ne · Aug 30, 2021 · fb1902f · fb1902f
1 parent b1367eb
commit fb1902f
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 65 deletions.
diff --git a/resources/js/components/FormField.vue b/resources/js/components/FormField.vue
@@ -10,7 +10,8 @@
             :isModalOpen.sync="isModalOpen"
             :chosenCollection.sync="chosenCollection"
             :activeFile.sync="activeFile"
-            :updateMedia="updateMedia"
+            @updateMedia="updateMedia"
+            @updateFiles="updateFiles"
             :showUploadArea.sync="showUploadArea"
             :loadingMediaFiles.sync="loadingMediaFiles"
             :selectedFiles.sync="selectedFiles"
@@ -198,16 +199,14 @@ export default {
       this.files = [...window.mediaLibrary.files];
     },
 
-    updateMedia() {
-      return debounce(() => {
-        if (window.mediaLibrary.onload.length) {
-          for (const cb of window.mediaLibrary.onload) {
-            if (this.updateFiles !== cb) cb();
-          }
+    updateMedia: debounce(function() {
+      if (window.mediaLibrary.onload.length) {
+        for (const cb of window.mediaLibrary.onload) {
+          if (this.updateFiles !== cb) cb();
         }
-        this.updateFiles();
-      }, 200)();
-    },
+      }
+      this.updateFiles();
+    }, 500),
 
     openMediaBrowsingModal() {
       this.isModalOpen = true;
@@ -253,62 +252,59 @@ export default {
     },
 
     async fetchFiles(searchValue = null) {
-      return debounce(async () => {
-        const changedFromSearchToOverall = window.mediaLibrary.previousSearchValue !== searchValue;
-        window.mediaLibrary.previousSearchValue = searchValue;
-
-        if (!changedFromSearchToOverall && window.mediaLibrary.currentPage + 1 > window.mediaLibrary.totalPages) return;
-        if (changedFromSearchToOverall) window.mediaLibrary.currentPage = 0;
-
-        window.mediaLibrary.fetching = true;
-        const response = await axios.get('/api/media', {
-          params: {
-            search: searchValue,
-            collection: this.currentCollection,
-            page: window.mediaLibrary.currentPage + 1,
-          },
-        });
-
-        const { data } = response.data;
-        let newFiles = data.map(file => {
-          return {
-            uploading: false,
-            processed: true,
-            data: file,
-          };
-        });
-
-        if (changedFromSearchToOverall) {
-          window.mediaLibrary.currentPage++;
-        } else {
-          window.mediaLibrary.currentPage++;
-        }
+      const changedFromSearchToOverall = window.mediaLibrary.previousSearchValue !== searchValue;
+      window.mediaLibrary.previousSearchValue = searchValue;
+
+      if (!changedFromSearchToOverall && window.mediaLibrary.currentPage + 1 > window.mediaLibrary.totalPages) return;
+      if (changedFromSearchToOverall) window.mediaLibrary.currentPage = 0;
+
+      window.mediaLibrary.fetching = true;
+      const response = await axios.get('/api/media', {
+        params: {
+          search: searchValue,
+          collection: this.currentCollection,
+          page: window.mediaLibrary.currentPage + 1,
+        },
+      });
 
-        if (searchValue) {
-          if (!window.mediaLibrary.loadedFiles) {
-            window.mediaLibrary.loadedFiles = [...window.mediaLibrary.files];
-          }
+      const { data } = response.data;
+      let newFiles = data.map(file => {
+        return {
+          uploading: false,
+          processed: true,
+          data: file,
+        };
+      });
 
-          window.mediaLibrary.files = [...newFiles];
-        } else {
-          if (window.mediaLibrary.loadedFiles && window.mediaLibrary.loadedFiles.length) {
-            window.mediaLibrary.files = [...window.mediaLibrary.loadedFiles];
-            window.mediaLibrary.loadedFiles = null;
-          }
+      if (changedFromSearchToOverall) {
+        window.mediaLibrary.currentPage++;
+      } else {
+        window.mediaLibrary.currentPage++;
+      }
 
-          window.mediaLibrary.files = [
-            ...window.mediaLibrary.files,
-            ...newFiles.filter(item => !window.mediaLibrary.files.find(file => file.data.id === item.data.id)),
-          ];
+      if (searchValue) {
+        if (!window.mediaLibrary.loadedFiles) {
+          window.mediaLibrary.loadedFiles = [...window.mediaLibrary.files];
         }
 
-        window.mediaLibrary.totalPages = Math.ceil(response.data.total / response.data.per_page);
-        window.mediaLibrary.fetching = false;
+        window.mediaLibrary.files = [...newFiles];
+      } else {
+        if (window.mediaLibrary.loadedFiles && window.mediaLibrary.loadedFiles.length) {
+          window.mediaLibrary.files = [...window.mediaLibrary.loadedFiles];
+          window.mediaLibrary.loadedFiles = null;
+        }
 
-        this.updateFiles();
-        this.updateMedia();
-      }, 200)();
-    },
+        window.mediaLibrary.files = [
+          ...window.mediaLibrary.files,
+          ...newFiles.filter(item => !window.mediaLibrary.files.find(file => file.data.id === item.data.id)),
+        ];
+      }
+
+      window.mediaLibrary.totalPages = Math.ceil(response.data.total / response.data.per_page);
+      window.mediaLibrary.fetching = false;
+
+      this.updateFiles();
+    }
   },
 };
 </script>
diff --git a/resources/js/components/IndexButton.vue b/resources/js/components/IndexButton.vue
@@ -78,11 +78,11 @@ export default {
       this.updateMedia();
     },
 
-    updateMedia: debounce(function () {
+    updateMedia: debounce(function() {
       this.onUploadFinished();
       this.isModalOpen = false;
       this.$toasted.show('Files have been successfully uploaded!', { type: 'success' });
-    }, 1000),
+    }, 500),
 
     openMediaBrowsingModal() {
       this.isModalOpen = true;

diff --git a/resources/js/components/MediaBrowsingModal.vue b/resources/js/components/MediaBrowsingModal.vue
@@ -142,6 +142,7 @@ export default {
     'activeFile',
     'selectedFiles',
     'updateMedia',
+    'updateFiles',
     'files',
     'multipleSelect',
     'loadingMediaFiles',
@@ -443,13 +444,13 @@ export default {
             }
 
             this.$nextTick(() => {
-              this.updateMedia();
+              this.$emit('updateMedia');
             });
           })
           .catch(error => {
             if (!error.response) {
               Nova.$emit('error', 'Failed to upload image.');
-              this.updateMedia();
+              this.$emit('updateMedia');
               return;
             }
 
@@ -467,7 +468,7 @@ export default {
               window.mediaLibrary.files.splice(0, 1);
             }
 
-            this.updateMedia();
+            this.$emit('updateMedia');
           });
       }
     },