Fix #783 duplicate uploading same asset name (#853)

src/actions/mediaLibrary.js

@@ -78,6 +78,22 @@ export function persistMedia(file, opts = {}) {
     const state = getState();
     const backend = currentBackend(state.config);
     const integration = selectIntegration(state, null, 'assetStore');
+    const files = state.mediaLibrary.get('files');
+    const existingFile = files.find(existingFile => existingFile.name.toLowerCase() === file.name.toLowerCase());
+
+    /**
+     * Check for existing files of the same name before persisting. If no asset
+     * store integration is used, files are being stored in Git, so we can
+     * expect file names to be unique. If an asset store is in use, file names
+     * may not be unique, so we forego this check.
+     */
+    if (!integration && existingFile) {
+      if (!window.confirm(`${existingFile.name} already exists. Do you want to replace it?`)) {
+        return;
+      } else {
+        await dispatch(deleteMedia(existingFile, { privateUpload }));
+      }
+    }
 
     dispatch(mediaPersisting());
 

src/components/MediaLibrary/MediaLibrary.js

@@ -112,21 +112,21 @@ class MediaLibrary extends React.Component {
   handlePersist = async event => {
     /**
      * Stop the browser from automatically handling the file input click, and
-     * get the file for upload.
+     * get the file for upload, and retain the synthetic event for access after
+     * the asynchronous persist operation.
      */
     event.stopPropagation();
     event.preventDefault();
+    event.persist();
     const { persistMedia, privateUpload } = this.props;
     const { files: fileList } = event.dataTransfer || event.target;
     const files = [...fileList];
     const file = files[0];
 
-    /**
-     * Upload the selected file, then refresh the media library. This should be
-     * improved in the future, but isn't currently resulting in noticeable
-     * performance/load time issues.
-     */
     await persistMedia(file, { privateUpload });
+
+    event.target.value = null;
+
     this.scrollToTop();
   };