From 698907ecd2f3b428349827d59482eb50f4aa70da Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Wed, 29 Nov 2017 15:42:16 +0100 Subject: [PATCH 1/6] Replace existing media --- src/components/MediaLibrary/MediaLibrary.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/MediaLibrary/MediaLibrary.js b/src/components/MediaLibrary/MediaLibrary.js index 38aae813c06f..8070e13d23ce 100644 --- a/src/components/MediaLibrary/MediaLibrary.js +++ b/src/components/MediaLibrary/MediaLibrary.js @@ -116,10 +116,19 @@ class MediaLibrary extends React.Component { */ event.stopPropagation(); event.preventDefault(); - const { persistMedia, privateUpload } = this.props; + const { persistMedia, deleteMedia, privateUpload } = this.props; const { files: fileList } = event.dataTransfer || event.target; const files = [...fileList]; const file = files[0]; + const existingFile = this.props.files.find((existingFile) => existingFile.name === file.name); + + if (existingFile) { + if (!window.confirm('This media already exist, do you want to replace it?')) { + return; + } + + deleteMedia(existingFile, { privateUpload }); + } /** * Upload the selected file, then refresh the media library. This should be @@ -127,6 +136,10 @@ class MediaLibrary extends React.Component { * performance/load time issues. */ await persistMedia(file, { privateUpload }); + + // Reset input value + event.target.value = ''; + this.scrollToTop(); }; From 3ed1faa589643f19da674ce310ed64a68c7afb21 Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Wed, 29 Nov 2017 19:33:01 +0100 Subject: [PATCH 2/6] Check integration and move logic to redux action --- src/actions/mediaLibrary.js | 11 ++++++++++- src/components/MediaLibrary/MediaLibrary.js | 12 ++---------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/actions/mediaLibrary.js b/src/actions/mediaLibrary.js index a58616644b69..a1b44a67f2ce 100644 --- a/src/actions/mediaLibrary.js +++ b/src/actions/mediaLibrary.js @@ -73,7 +73,7 @@ export function loadMedia(opts = {}) { } export function persistMedia(file, opts = {}) { - const { privateUpload } = opts; + const { privateUpload, existingFile } = opts; return async (dispatch, getState) => { const state = getState(); const backend = currentBackend(state.config); @@ -85,6 +85,15 @@ export function persistMedia(file, opts = {}) { const assetProxy = await createAssetProxy(file.name.toLowerCase(), file, false, privateUpload); dispatch(addAsset(assetProxy)); if (!integration) { + if (existingFile) { + if (!window.confirm('This media already exist, do you want to replace it?')) { + return dispatch(mediaPersistFailed({ privateUpload })); + } + + const deletedFile = await deleteMedia(existingFile, { privateUpload }); + dispatch(deletedFile); + } + const asset = await backend.persistMedia(assetProxy); return dispatch(mediaPersisted(asset)); } diff --git a/src/components/MediaLibrary/MediaLibrary.js b/src/components/MediaLibrary/MediaLibrary.js index 8070e13d23ce..a63a635b2d25 100644 --- a/src/components/MediaLibrary/MediaLibrary.js +++ b/src/components/MediaLibrary/MediaLibrary.js @@ -116,26 +116,18 @@ class MediaLibrary extends React.Component { */ event.stopPropagation(); event.preventDefault(); - const { persistMedia, deleteMedia, privateUpload } = this.props; + const { persistMedia, privateUpload } = this.props; const { files: fileList } = event.dataTransfer || event.target; const files = [...fileList]; const file = files[0]; const existingFile = this.props.files.find((existingFile) => existingFile.name === file.name); - if (existingFile) { - if (!window.confirm('This media already exist, do you want to replace it?')) { - return; - } - - deleteMedia(existingFile, { privateUpload }); - } - /** * 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 }); + await persistMedia(file, { privateUpload, existingFile }); // Reset input value event.target.value = ''; From 9469c26834ccb13268330b121a6f3ac804c81331 Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Wed, 29 Nov 2017 19:59:09 +0100 Subject: [PATCH 3/6] Directly dispatch deleteMedia action --- src/actions/mediaLibrary.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/actions/mediaLibrary.js b/src/actions/mediaLibrary.js index a1b44a67f2ce..164dba571f36 100644 --- a/src/actions/mediaLibrary.js +++ b/src/actions/mediaLibrary.js @@ -90,8 +90,7 @@ export function persistMedia(file, opts = {}) { return dispatch(mediaPersistFailed({ privateUpload })); } - const deletedFile = await deleteMedia(existingFile, { privateUpload }); - dispatch(deletedFile); + dispatch(deleteMedia(existingFile, { privateUpload })); } const asset = await backend.persistMedia(assetProxy); From 59d9b4cd24a83f28abca89763009b7ca4a379ef1 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Wed, 6 Dec 2017 11:31:02 -0500 Subject: [PATCH 4/6] move all existing media check logic to action --- src/actions/mediaLibrary.js | 26 ++++++++++++++------- src/components/MediaLibrary/MediaLibrary.js | 11 +-------- 2 files changed, 18 insertions(+), 19 deletions(-) diff --git a/src/actions/mediaLibrary.js b/src/actions/mediaLibrary.js index 164dba571f36..1d75885f9563 100644 --- a/src/actions/mediaLibrary.js +++ b/src/actions/mediaLibrary.js @@ -73,11 +73,27 @@ export function loadMedia(opts = {}) { } export function persistMedia(file, opts = {}) { - const { privateUpload, existingFile } = opts; + const { privateUpload } = opts; return async (dispatch, getState) => { 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 === file.name); + + /** + * 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(`${file.name} already exists. Do you want to replace it?`)) { + return; + } else { + await dispatch(deleteMedia(existingFile, { privateUpload })); + } + } dispatch(mediaPersisting()); @@ -85,14 +101,6 @@ export function persistMedia(file, opts = {}) { const assetProxy = await createAssetProxy(file.name.toLowerCase(), file, false, privateUpload); dispatch(addAsset(assetProxy)); if (!integration) { - if (existingFile) { - if (!window.confirm('This media already exist, do you want to replace it?')) { - return dispatch(mediaPersistFailed({ privateUpload })); - } - - dispatch(deleteMedia(existingFile, { privateUpload })); - } - const asset = await backend.persistMedia(assetProxy); return dispatch(mediaPersisted(asset)); } diff --git a/src/components/MediaLibrary/MediaLibrary.js b/src/components/MediaLibrary/MediaLibrary.js index a63a635b2d25..cf3192d102a7 100644 --- a/src/components/MediaLibrary/MediaLibrary.js +++ b/src/components/MediaLibrary/MediaLibrary.js @@ -120,17 +120,8 @@ class MediaLibrary extends React.Component { const { files: fileList } = event.dataTransfer || event.target; const files = [...fileList]; const file = files[0]; - const existingFile = this.props.files.find((existingFile) => existingFile.name === file.name); - /** - * 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, existingFile }); - - // Reset input value - event.target.value = ''; + await persistMedia(file, { privateUpload }); this.scrollToTop(); }; From 370d1246a37a00e66ad9871c20efa1a98bb72379 Mon Sep 17 00:00:00 2001 From: Damien Duhamel Date: Sat, 9 Dec 2017 18:35:25 +0100 Subject: [PATCH 5/6] Make the check case-insensitive --- src/actions/mediaLibrary.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/actions/mediaLibrary.js b/src/actions/mediaLibrary.js index 1d75885f9563..4ba512a53e3f 100644 --- a/src/actions/mediaLibrary.js +++ b/src/actions/mediaLibrary.js @@ -79,7 +79,7 @@ export function persistMedia(file, opts = {}) { const backend = currentBackend(state.config); const integration = selectIntegration(state, null, 'assetStore'); const files = state.mediaLibrary.get('files'); - const existingFile = files.find(existingFile => existingFile.name === file.name); + const existingFile = files.find(existingFile => existingFile.name.toLowerCase() === file.name.toLowerCase()); /** * Check for existing files of the same name before persisting. If no asset @@ -88,7 +88,7 @@ export function persistMedia(file, opts = {}) { * may not be unique, so we forego this check. */ if (!integration && existingFile) { - if (!window.confirm(`${file.name} already exists. Do you want to replace it?`)) { + if (!window.confirm(`${existingFile.name} already exists. Do you want to replace it?`)) { return; } else { await dispatch(deleteMedia(existingFile, { privateUpload })); From 8711fa21aeb071fd8e12b097d4276d7c9b298331 Mon Sep 17 00:00:00 2001 From: Shawn Erquhart Date: Thu, 14 Dec 2017 09:42:40 -0800 Subject: [PATCH 6/6] clear file input value after upload --- src/components/MediaLibrary/MediaLibrary.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/MediaLibrary/MediaLibrary.js b/src/components/MediaLibrary/MediaLibrary.js index cf3192d102a7..b20611cc52fb 100644 --- a/src/components/MediaLibrary/MediaLibrary.js +++ b/src/components/MediaLibrary/MediaLibrary.js @@ -112,10 +112,12 @@ 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]; @@ -123,6 +125,8 @@ class MediaLibrary extends React.Component { await persistMedia(file, { privateUpload }); + event.target.value = null; + this.scrollToTop(); };