@blaze-cms/plugin-media-ui 0.146.0-node18-core-styles-tooltips.39 → 0.146.0-node18-tooltips.33

package/src/components/FilePreview/previewDefault/PreviewDefault.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 import { DefaultIcon } from './icons';
 
-const PreviewDefault = ({ url, name, children }) => (
-  <div className="preview">
+const PreviewDefault = ({ url, name, children, handleChangeFile, showChangeButton }) => (
+  <div className="preview" key={`default-${url}`}>
     <div className="preview__file preview__file--default">
       <div className="preview__file--icon">
         <DefaultIcon />
@@ -16,6 +17,11 @@ const PreviewDefault = ({ url, name, children }) => (
             Original
           </a>
         </p>
+        {showChangeButton && (
+          <div className="preview__change-button">
+            <Button onClick={handleChangeFile}>Change file</Button>
+          </div>
+        )}
       </div>
     </div>
     {children}
@@ -25,7 +31,14 @@ const PreviewDefault = ({ url, name, children }) => (
 PreviewDefault.propTypes = {
   url: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  handleChangeFile: PropTypes.func,
+  showChangeButton: PropTypes.bool
+};
+
+PreviewDefault.defaultProps = {
+  handleChangeFile: () => {},
+  showChangeButton: false
 };
 
 export { PreviewDefault };

package/src/components/FileUploadModal/FileUploadModal.js

@@ -21,21 +21,26 @@ const FileUploadModal = ({
   const { addNewFile } = useFileList();
 
   const fileStoresType = getQuery('GET_FILE_STORES');
-
   const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {
     variables: { visibleInAdmin: true }
   });
 
   const handleFiles = filesToUpload => {
+    if (fileId && filesToUpload && filesToUpload.length) {
+      setFiles([filesToUpload[0]]);
+      return;
+    }
     setFiles(filesToUpload);
   };
 
   const uploadFiles = async () => {
+    const filesToProcess = fileId && files.length ? [files[0]] : files;
+
     const response = await Promise.all(
-      files.map(({ file, name, data, storeKey: fileStoreKey }) => {
+      filesToProcess.map(({ file, name, data, storeKey: fileStoreKey }) => {
         const payload = {
           name,
-          storeKey: fileStoreKey,
+          storeKey: fileStoreKey || selectedStoreKey || storeKey,
           data
         };
         if (fileId) {
@@ -45,12 +50,7 @@ const FileUploadModal = ({
         }
         return client.mutate({
           mutation: getMutation('UPLOAD_FILE'),
-          variables: {
-            input: {
-              file,
-              ...payload
-            }
-          }
+          variables: { input: { file, ...payload } }
         });
       })
     ).catch(error => {
@@ -58,21 +58,42 @@ const FileUploadModal = ({
         appearance: 'error',
         autoDismiss: true
       });
+      return [];
     });
 
-    const parsedResponse = response.map(({ data: { file } }) => file.result);
+    const parsedResponse = response.map(({ data: { file } }) => {
+      const { message, ...rest } = file.result || {};
+      return rest;
+    });
 
     const fileNames = files.map(({ file }) => file.name);
-    addNewFile && addNewFile(parsedResponse);
-    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;
 
     if (simpleLayout) {
-      const filesToSelect = parsedResponse.map(file => file.id);
+      if (fileId && parsedResponse && parsedResponse.length) {
+        const { message, ...updatedFile } = parsedResponse[0];
+        try {
+          client.writeQuery({
+            query: getQuery('GET_FILE_BY_ID'),
+            variables: { id: fileId },
+            data: { file: updatedFile }
+          });
+        } catch (e) {
+          console.error(e); //eslint-disable-line
+        }
+        const updateMessage = `Updated: ${updatedFile.filename || fileNames[0]}`;
+        closeModalAndSetValue(simpleLayout, updatedFile, updateMessage);
+        return;
+      }
+      const filesToSelect = parsedResponse.map(({ id }) => id);
+      const uploadMessage = `Uploaded: ${fileNames.join(', ')}`;
       getSelectedFiles(null, filesToSelect);
-      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);
+      closeModalAndSetValue(simpleLayout, filesToSelect, uploadMessage);
       return;
     }
 
+    addNewFile && addNewFile(parsedResponse);
+    const toastMessage = fileId ? `Updated: ${fileNames[0]}` : `Uploaded: ${fileNames.join(', ')}`;
+
     addToast(toastMessage, {
       appearance: 'success',
       autoDismiss: true

package/src/components/ListingContainer/Listing/MediaListing/MediaFileList/MediaFileList.js

@@ -109,7 +109,7 @@ const MediaFileList = ({
             scrollToIndex={currentListIndex}
             onItemsRendered={handleRenderedItems}
             renderItem={({ index, style }) => {
-              const { name, url, mimetype, id } = data.files[index];
+              const { name, url, mimetype, id, data: fileData, updated } = data.files[index];
               const isSelected = existPrevious(selectedFiles, id);
               return (
                 <div key={index} style={style} className="list__item--resultWrapper">
@@ -129,6 +129,8 @@ const MediaFileList = ({
                     index={index}
                     removeFile={removeFile}
                     openEditInModal={openEditInModal}
+                    data={fileData}
+                    updated={updated}
                   />
                 </div>
               );

package/src/utils/bustUrl.js

@@ -0,0 +1,6 @@
+export default function bustUrl(url, updated) {
+  if (!url) return url;
+  const separator = url.includes('?') ? '&' : '?';
+  const version = updated || Date.now();
+  return `${url}${separator}v=${version}`;
+}