@blaze-cms/plugin-media-ui 0.146.0-node18-core-styles.2 → 0.146.0-node18-core-styles-tooltips.3

package/src/components/FileUploadModal/FileUploadModal.js

@@ -6,7 +6,13 @@ import { useToasts } from '@blaze-react/toaster';
 import { useApolloClient, useQuery } from '@apollo/client';
 import useFileList from '../FileList/useFileList';
 
-const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, simpleLayout }) => {
+const FileUploadModal = ({
+  onClose,
+  getSelectedFiles,
+  closeModalAndSetValue,
+  simpleLayout,
+  fileId
+}) => {
   const [files, setFiles] = useState([]);
   const { addToast } = useToasts();
   const client = useApolloClient();
@@ -24,19 +30,27 @@ const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, sim
 
   const uploadFiles = async () => {
     const response = await Promise.all(
-      files.map(({ file, name, data: fileData, storeKey }) =>
-        client.mutate({
+      files.map(({ file, name, data, storeKey }) => {
+        const payload = {
+          name,
+          storeKey,
+          data
+        };
+        if (fileId) {
+          payload.id = fileId;
+        } else if (!name) {
+          payload.name = file.filename;
+        }
+        return client.mutate({
           mutation: getMutation('UPLOAD_FILE'),
           variables: {
             input: {
               file,
-              name: name || file.filename,
-              storeKey,
-              data: fileData
+              ...payload
             }
           }
-        })
-      )
+        });
+      })
     ).catch(error => {
       addToast(error.message, {
         appearance: 'error',
@@ -47,7 +61,7 @@ const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, sim
     const parsedResponse = response.map(({ data: { file } }) => file.result);
 
     const fileNames = files.map(({ file }) => file.name);
-    addNewFile(parsedResponse);
+    addNewFile && addNewFile(parsedResponse);
     const toastMessage = `Uploaded: ${fileNames.join(', ')}`;
 
     if (simpleLayout) {
@@ -71,30 +85,29 @@ const FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, sim
   const storeOptions = storeType.map(type => [type.key, type.name]);
 
   return (
-    <>
-      <Modal
-        onClose={onClose}
-        title="Add media"
-        actions={[
-          {
-            textButton: 'Cancel',
-            callback: onClose,
-            modifiers: ['cancel']
-          },
-          {
-            textButton: 'Save',
-            callback: handleOnSave,
-            modifiers: []
-          }
-        ]}
-        upload>
-        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />
-      </Modal>
-    </>
+    <Modal
+      onClose={onClose}
+      title="Add media"
+      actions={[
+        {
+          textButton: 'Cancel',
+          callback: onClose,
+          modifiers: ['cancel']
+        },
+        {
+          textButton: 'Save',
+          callback: handleOnSave,
+          modifiers: []
+        }
+      ]}
+      upload>
+      <FileUpload onChange={handleFiles} selectOptions={storeOptions} />
+    </Modal>
   );
 };
 
 FileUploadModal.propTypes = {
+  fileId: PropTypes.string,
   getSelectedFiles: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   simpleLayout: PropTypes.bool,
@@ -104,7 +117,8 @@ FileUploadModal.propTypes = {
 FileUploadModal.defaultProps = {
   onClose: () => {},
   closeModalAndSetValue: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  fileId: null
 };
 
 export default FileUploadModal;