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

package/lib-es/components/FileUploadModal/FileUploadModal.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState } from 'react';
 import { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';
 import FileUpload from '@blaze-react/file-upload';
@@ -9,7 +12,8 @@ const FileUploadModal = ({
   onClose,
   getSelectedFiles,
   closeModalAndSetValue,
-  simpleLayout
+  simpleLayout,
+  fileId
 }) => {
   const [files, setFiles] = useState([]);
   const {
@@ -36,19 +40,28 @@ const FileUploadModal = ({
     const response = await Promise.all(files.map(({
       file,
       name,
-      data: fileData,
+      data,
       storeKey
-    }) => client.mutate({
-      mutation: getMutation('UPLOAD_FILE'),
-      variables: {
-        input: {
-          file,
-          name: name || file.filename,
-          storeKey,
-          data: fileData
-        }
+    }) => {
+      const payload = {
+        name,
+        storeKey,
+        data
+      };
+      if (fileId) {
+        payload.id = fileId;
+      } else if (!name) {
+        payload.name = file.filename;
       }
-    }))).catch(error => {
+      return client.mutate({
+        mutation: getMutation('UPLOAD_FILE'),
+        variables: {
+          input: _objectSpread({
+            file
+          }, payload)
+        }
+      });
+    })).catch(error => {
       addToast(error.message, {
         appearance: 'error',
         autoDismiss: true
@@ -62,7 +75,7 @@ const FileUploadModal = ({
     const fileNames = files.map(({
       file
     }) => file.name);
-    addNewFile(parsedResponse);
+    addNewFile && addNewFile(parsedResponse);
     const toastMessage = `Uploaded: ${fileNames.join(', ')}`;
     if (simpleLayout) {
       const filesToSelect = parsedResponse.map(file => file.id);
@@ -80,7 +93,7 @@ const FileUploadModal = ({
     onClose();
   };
   const storeOptions = storeType.map(type => [type.key, type.name]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Modal, {
+  return /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose,
     title: "Add media",
     actions: [{
@@ -96,9 +109,10 @@ const FileUploadModal = ({
   }, /*#__PURE__*/React.createElement(FileUpload, {
     onChange: handleFiles,
     selectOptions: storeOptions
-  })));
+  }));
 };
 FileUploadModal.propTypes = {
+  fileId: PropTypes.string,
   getSelectedFiles: PropTypes.func.isRequired,
   onClose: PropTypes.func,
   simpleLayout: PropTypes.bool,
@@ -107,7 +121,8 @@ FileUploadModal.propTypes = {
 FileUploadModal.defaultProps = {
   onClose: () => {},
   closeModalAndSetValue: () => {},
-  simpleLayout: false
+  simpleLayout: false,
+  fileId: null
 };
 export default FileUploadModal;
 //# sourceMappingURL=FileUploadModal.js.map

package/lib-es/components/FileUploadModal/FileUploadModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadModal.js","names":["React","useState","ModalAdapter","Modal","getMutation","getQuery","FileUpload","PropTypes","useToasts","useApolloClient","useQuery","useFileList","FileUploadModal","onClose","getSelectedFiles","closeModalAndSetValue","simpleLayout","files","setFiles","addToast","client","addNewFile","fileStoresType","data","getFileStores","storeType","variables","visibleInAdmin","handleFiles","filesToUpload","uploadFiles","response","Promise","all","map","file","name","fileData","storeKey","mutate","mutation","input","filename","catch","error","message","appearance","autoDismiss","parsedResponse","result","fileNames","toastMessage","join","filesToSelect","id","handleOnSave","length","storeOptions","type","key","createElement","Fragment","title","actions","textButton","callback","modifiers","upload","onChange","selectOptions","propTypes","func","isRequired","bool","defaultProps"],"sources":["../../../src/components/FileUploadModal/FileUploadModal.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';\nimport FileUpload from '@blaze-react/file-upload';\nimport PropTypes from 'prop-types';\nimport { useToasts } from '@blaze-react/toaster';\nimport { useApolloClient, useQuery } from '@apollo/client';\nimport useFileList from '../FileList/useFileList';\n\nconst FileUploadModal = ({ onClose, getSelectedFiles, closeModalAndSetValue, simpleLayout }) => {\n  const [files, setFiles] = useState([]);\n  const { addToast } = useToasts();\n  const client = useApolloClient();\n  const { addNewFile } = useFileList();\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n\n  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n\n  const handleFiles = filesToUpload => {\n    setFiles(filesToUpload);\n  };\n\n  const uploadFiles = async () => {\n    const response = await Promise.all(\n      files.map(({ file, name, data: fileData, storeKey }) =>\n        client.mutate({\n          mutation: getMutation('UPLOAD_FILE'),\n          variables: {\n            input: {\n              file,\n              name: name || file.filename,\n              storeKey,\n              data: fileData\n            }\n          }\n        })\n      )\n    ).catch(error => {\n      addToast(error.message, {\n        appearance: 'error',\n        autoDismiss: true\n      });\n    });\n\n    const parsedResponse = response.map(({ data: { file } }) => file.result);\n\n    const fileNames = files.map(({ file }) => file.name);\n    addNewFile(parsedResponse);\n    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;\n\n    if (simpleLayout) {\n      const filesToSelect = parsedResponse.map(file => file.id);\n      getSelectedFiles(null, filesToSelect);\n      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);\n      return;\n    }\n\n    addToast(toastMessage, {\n      appearance: 'success',\n      autoDismiss: true\n    });\n  };\n\n  const handleOnSave = async () => {\n    if (files.length) await uploadFiles();\n    onClose();\n  };\n\n  const storeOptions = storeType.map(type => [type.key, type.name]);\n\n  return (\n    <>\n      <Modal\n        onClose={onClose}\n        title=\"Add media\"\n        actions={[\n          {\n            textButton: 'Cancel',\n            callback: onClose,\n            modifiers: ['cancel']\n          },\n          {\n            textButton: 'Save',\n            callback: handleOnSave,\n            modifiers: []\n          }\n        ]}\n        upload>\n        <FileUpload onChange={handleFiles} selectOptions={storeOptions} />\n      </Modal>\n    </>\n  );\n};\n\nFileUploadModal.propTypes = {\n  getSelectedFiles: PropTypes.func.isRequired,\n  onClose: PropTypes.func,\n  simpleLayout: PropTypes.bool,\n  closeModalAndSetValue: PropTypes.func\n};\n\nFileUploadModal.defaultProps = {\n  onClose: () => {},\n  closeModalAndSetValue: () => {},\n  simpleLayout: false\n};\n\nexport default FileUploadModal;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"FileUploadModal.js","names":["React","useState","ModalAdapter","Modal","getMutation","getQuery","FileUpload","PropTypes","useToasts","useApolloClient","useQuery","useFileList","FileUploadModal","onClose","getSelectedFiles","closeModalAndSetValue","simpleLayout","fileId","files","setFiles","addToast","client","addNewFile","fileStoresType","data","getFileStores","storeType","variables","visibleInAdmin","handleFiles","filesToUpload","uploadFiles","response","Promise","all","map","file","name","storeKey","payload","id","filename","mutate","mutation","input","_objectSpread","catch","error","message","appearance","autoDismiss","parsedResponse","result","fileNames","toastMessage","join","filesToSelect","handleOnSave","length","storeOptions","type","key","createElement","title","actions","textButton","callback","modifiers","upload","onChange","selectOptions","propTypes","string","func","isRequired","bool","defaultProps"],"sources":["../../../src/components/FileUploadModal/FileUploadModal.js"],"sourcesContent":["import React, { useState } from 'react';\nimport { ModalAdapter as Modal, getMutation, getQuery } from '@blaze-cms/admin-ui-utils';\nimport FileUpload from '@blaze-react/file-upload';\nimport PropTypes from 'prop-types';\nimport { useToasts } from '@blaze-react/toaster';\nimport { useApolloClient, useQuery } from '@apollo/client';\nimport useFileList from '../FileList/useFileList';\n\nconst FileUploadModal = ({\n  onClose,\n  getSelectedFiles,\n  closeModalAndSetValue,\n  simpleLayout,\n  fileId\n}) => {\n  const [files, setFiles] = useState([]);\n  const { addToast } = useToasts();\n  const client = useApolloClient();\n  const { addNewFile } = useFileList();\n\n  const fileStoresType = getQuery('GET_FILE_STORES');\n\n  const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {\n    variables: { visibleInAdmin: true }\n  });\n\n  const handleFiles = filesToUpload => {\n    setFiles(filesToUpload);\n  };\n\n  const uploadFiles = async () => {\n    const response = await Promise.all(\n      files.map(({ file, name, data, storeKey }) => {\n        const payload = {\n          name,\n          storeKey,\n          data\n        };\n        if (fileId) {\n          payload.id = fileId;\n        } else if (!name) {\n          payload.name = file.filename;\n        }\n        return client.mutate({\n          mutation: getMutation('UPLOAD_FILE'),\n          variables: {\n            input: {\n              file,\n              ...payload\n            }\n          }\n        });\n      })\n    ).catch(error => {\n      addToast(error.message, {\n        appearance: 'error',\n        autoDismiss: true\n      });\n    });\n\n    const parsedResponse = response.map(({ data: { file } }) => file.result);\n\n    const fileNames = files.map(({ file }) => file.name);\n    addNewFile && addNewFile(parsedResponse);\n    const toastMessage = `Uploaded: ${fileNames.join(', ')}`;\n\n    if (simpleLayout) {\n      const filesToSelect = parsedResponse.map(file => file.id);\n      getSelectedFiles(null, filesToSelect);\n      closeModalAndSetValue(simpleLayout, filesToSelect, toastMessage);\n      return;\n    }\n\n    addToast(toastMessage, {\n      appearance: 'success',\n      autoDismiss: true\n    });\n  };\n\n  const handleOnSave = async () => {\n    if (files.length) await uploadFiles();\n    onClose();\n  };\n\n  const storeOptions = storeType.map(type => [type.key, type.name]);\n\n  return (\n    <Modal\n      onClose={onClose}\n      title=\"Add media\"\n      actions={[\n        {\n          textButton: 'Cancel',\n          callback: onClose,\n          modifiers: ['cancel']\n        },\n        {\n          textButton: 'Save',\n          callback: handleOnSave,\n          modifiers: []\n        }\n      ]}\n      upload>\n      <FileUpload onChange={handleFiles} selectOptions={storeOptions} />\n    </Modal>\n  );\n};\n\nFileUploadModal.propTypes = {\n  fileId: PropTypes.string,\n  getSelectedFiles: PropTypes.func.isRequired,\n  onClose: PropTypes.func,\n  simpleLayout: PropTypes.bool,\n  closeModalAndSetValue: PropTypes.func\n};\n\nFileUploadModal.defaultProps = {\n  onClose: () => {},\n  closeModalAndSetValue: () => {},\n  simpleLayout: false,\n  fileId: null\n};\n\nexport default FileUploadModal;\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/plugin-media-ui",
-  "version": "0.146.0-node18-core-styles.2",
+  "version": "0.146.0-node18-core-styles-tooltips.3",
   "description": "Blaze plugin media ui",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,26 +27,27 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/admin-ui-utils": "0.146.0-node18-core-styles.2",
-    "@blaze-cms/core-errors": "0.146.0-node18-core-styles.2",
-    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles.2",
-    "@blaze-cms/react-form-builder": "0.146.0-node18-core-styles.2",
-    "@blaze-cms/setup-ui": "0.146.0-node18-core-styles.0",
+    "@blaze-cms/admin-ui-utils": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/core-errors": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/react-form-builder": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/setup-ui": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/dnd": "^0.7.0",
     "@blaze-react/drafteditor": "0.7.0",
     "@blaze-react/file-upload": "0.8.0-alpha.78",
     "@blaze-react/modal": "0.5.19",
     "@blaze-react/more": "0.5.19",
-    "@blaze-react/select": "^0.7.0",
+    "@blaze-react/select": "0.8.0-alpha.100",
     "@blaze-react/toaster": "^0.7.0",
+    "@blaze-react/tooltip": "0.8.0-alpha.100",
     "classnames": "^2.2.6",
     "lodash.differencewith": "^4.5.0",
     "lodash.isequal": "^4.5.0",
     "react-tiny-virtual-list": "2.2.0"
   },
   "devDependencies": {
-    "@blaze-cms/core-ui": "0.146.0-node18-core-styles.2"
+    "@blaze-cms/core-ui": "0.146.0-node18-core-styles-tooltips.3"
   },
   "peerDependencies": {
     "@apollo/client": "3.x",
@@ -59,5 +60,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "c124596c6b8d92f08f58c4dc004a4ea7d1703f23"
+  "gitHead": "92ba8597805e2d7b354f553467072fbcec37b1d8"
 }

package/src/components/EditMediaFile/EditMediaFile.js

@@ -2,16 +2,25 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { getQuery } from '@blaze-cms/admin-ui-utils';
 import { useQuery } from '@apollo/client';
+import { useToasts } from '@blaze-react/toaster';
 import FilePreview from '../FilePreview';
+import FileUploadModal from '../FileUploadModal';
 import { STORE_KEY, NAME } from '../../constants';
 
 const EditMediaFile = ({ onChange, handleSaveButtonStatus, enableSaveButton, fileId }) => {
   const [formValues, setFormValues] = useState(null);
-  const query = getQuery('GET_FILE_BY_ID');
-  const { loading, data: { file } = {} } = useQuery(query, {
-    variables: { id: fileId }
-  });
+  const [displayFileUploadModal, setDisplayFileUploadModal] = useState(false);
+  const { addToast } = useToasts();
 
+  const fileQuery = getQuery('GET_FILE_BY_ID');
+  const {
+    loading,
+    data: { file } = {},
+    refetch: refetchFile
+  } = useQuery(fileQuery, {
+    variables: { id: fileId },
+    fetchPolicy: 'network-only'
+  });
   const fileStoresType = getQuery('GET_FILE_STORES');
   const { data: { getFileStores: storeType = [] } = {} } = useQuery(fileStoresType, {
     variables: { visibleInAdmin: true }
@@ -24,25 +33,20 @@ const EditMediaFile = ({ onChange, handleSaveButtonStatus, enableSaveButton, fil
   }, [file, formValues, storeType]);
 
   const handleFormChange = ({ isValid, isNewValueSet, valuesChecked }) => {
-    const valuesCheckedWithoutName = valuesChecked.filter(({ id }) => {
-      if (id === NAME || id === STORE_KEY) return false;
-      return true;
-    });
-
+    const valuesCheckedWithoutName = valuesChecked.filter(
+      ({ id }) => id !== NAME && id !== STORE_KEY
+    );
     const dataValues = valuesCheckedWithoutName.reduce((acc, { id, value }) => {
       acc[id] = value;
       return acc;
     }, {});
     const { value: newFileName } = valuesChecked.find(({ id }) => id === NAME) || {};
     const { value: storeKey } = valuesChecked.find(({ id }) => id === STORE_KEY) || {};
-
     const shouldEnableSaveButton = isNewValueSet && isValid;
     handleSaveButtonStatus(false);
-
     if (shouldEnableSaveButton && shouldEnableSaveButton !== enableSaveButton) {
       handleSaveButtonStatus(shouldEnableSaveButton);
     }
-
     const updatedFile = {
       id: file.id,
       name: newFileName,
@@ -52,43 +56,67 @@ const EditMediaFile = ({ onChange, handleSaveButtonStatus, enableSaveButton, fil
     setFormValues(updatedFile);
     onChange(updatedFile);
   };
-
   const getFileWithStoreType = () => {
-    if (storeType) {
+    if (storeType && file) {
       const storeOptions = storeType.map(type => [type.key, type.name]);
       const defaultStore = storeType.find(type => type.isDefault) || null;
       return { ...file, store: { defaultStore, storeOptions } };
     }
-
     return file;
   };
-
+  const closeModalAndSetValue = async (isSaving, values, toastMessage) => {
+    if (toastMessage) {
+      addToast(toastMessage, {
+        appearance: 'success',
+        autoDismiss: true
+      });
+    }
+    await refetchFile({
+      id: fileId,
+      timestamp: Date.now()
+    });
+    setDisplayFileUploadModal(false);
+  };
+  const handleChangeFile = () => {
+    setDisplayFileUploadModal(true);
+  };
   const fileWithStoreType = getFileWithStoreType();
 
-  return (
+  return !loading ? (
     <>
-      {!loading ? (
-        <>
-          {file ? (
-            <FilePreview file={fileWithStoreType} handleFormChange={handleFormChange} displayForm />
-          ) : null}
-        </>
-      ) : (
-        <div>loading...</div>
+      {file ? (
+        <FilePreview
+          file={fileWithStoreType}
+          handleFormChange={handleFormChange}
+          handleChangeFile={handleChangeFile}
+          displayForm
+        />
+      ) : null}
+      {displayFileUploadModal && (
+        <div className="file-upload-modal-wrapper">
+          <FileUploadModal
+            onClose={() => {
+              setDisplayFileUploadModal(false);
+            }}
+            closeModalAndSetValue={closeModalAndSetValue}
+            simpleLayout
+            fileId={fileId}
+            getSelectedFiles={() => {}}
+          />
+        </div>
       )}
     </>
+  ) : (
+    <div>loading...</div>
   );
 };
-
 EditMediaFile.propTypes = {
   fileId: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   handleSaveButtonStatus: PropTypes.func.isRequired,
   enableSaveButton: PropTypes.bool
 };
-
 EditMediaFile.defaultProps = {
   enableSaveButton: false
 };
-
 export default EditMediaFile;

package/src/components/EditorAdapter/EditorAdapter.js

@@ -1,16 +1,29 @@
 import React from 'react';
 import DraftEditor from '@blaze-react/drafteditor';
 import PropTypes from 'prop-types';
+import Tooltip from '@blaze-react/tooltip';
 
-const DraftEditorAdapter = ({ id, value, onChange, error, validationMessage, label, ...props }) => (
+const DraftEditorAdapter = ({
+  id,
+  value,
+  onChange,
+  error,
+  validationMessage,
+  label,
+  tooltip,
+  ...props
+}) => (
   <div className="form-field form-field--full-width">
-    <label>{label}</label>
+    <label>
+      <Tooltip tooltipContent={tooltip} />
+    </label>
     <DraftEditor
       name={id}
       value={value}
       onChange={onChange}
       error={error}
       validationMessage={validationMessage}
+      tooltip={{ tooltipContent: tooltip }}
     />
   </div>
 );
@@ -21,12 +34,14 @@ DraftEditorAdapter.propTypes = {
   onChange: PropTypes.func.isRequired,
   error: PropTypes.bool,
   validationMessage: PropTypes.string,
-  label: PropTypes.string.isRequired
+  label: PropTypes.string.isRequired,
+  tooltip: PropTypes.string
 };
 
 DraftEditorAdapter.defaultProps = {
   error: false,
-  validationMessage: undefined
+  validationMessage: undefined,
+  tooltip: ''
 };
 
 export default DraftEditorAdapter;

package/src/components/FilePreview/Actions/index.js

@@ -7,34 +7,32 @@ const Actions = ({ file }) => {
   const [, extension] = file.mimetype.split('/');
 
   return (
-    <>
-      <div className="FilePreviewItem__info__actions">
-        <div className="FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type">
-          <i className="FilePreviewItem__info__actionsIcon material-icons">insert_photo</i>{' '}
-          <span>{extension}</span>
-        </div>
-        <div>
-          {handleEditModal && (
-            <div
-              data-testid={`open-media-library-${file.id}`}
-              className="FilePreviewItem__info__actionsIcon material-icons edit"
-              aria-hidden="true"
-              onClick={() => handleEditModal(file)}>
-              <i className="fas fa-pen fa-xs" />
-            </div>
-          )}
-          {onUnselectFile && (
-            <div
-              data-testid={`unselect-${file.id}`}
-              className="FilePreviewItem__info__actionsIcon material-icons delete"
-              aria-hidden="true"
-              onClick={() => onUnselectFile([file.id])}>
-              <i className="fas fa-trash fa-xs" />
-            </div>
-          )}
-        </div>
+    <div className="FilePreviewItem__info__actions">
+      <div className="FilePreviewItem__info__actions FilePreviewItem__info__actions--media-type">
+        <i className="FilePreviewItem__info__actionsIcon material-icons">insert_photo</i>{' '}
+        <span>{extension}</span>
       </div>
-    </>
+      <div>
+        {handleEditModal && (
+          <div
+            data-testid={`open-media-library-${file.id}`}
+            className="FilePreviewItem__info__actionsIcon material-icons edit"
+            aria-hidden="true"
+            onClick={() => handleEditModal(file)}>
+            <i className="fas fa-pen fa-xs" />
+          </div>
+        )}
+        {onUnselectFile && (
+          <div
+            data-testid={`unselect-${file.id}`}
+            className="FilePreviewItem__info__actionsIcon material-icons delete"
+            aria-hidden="true"
+            onClick={() => onUnselectFile([file.id])}>
+            <i className="fas fa-trash fa-xs" />
+          </div>
+        )}
+      </div>
+    </div>
   );
 };
 

package/src/components/FilePreview/Image/Image.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Button from '@blaze-react/button';
 
-const Image = ({ url, name, children }) => (
+const Image = ({ url, name, children, handleChangeFile }) => (
   <div className="preview">
     <div className="preview__file preview__file--image">
       <img src={url} alt={name} />
@@ -12,6 +13,7 @@ const Image = ({ url, name, children }) => (
             Original
           </a>
         </p>
+        <Button onClick={handleChangeFile}>Change file</Button>
       </div>
     </div>
     {children}
@@ -21,7 +23,12 @@ const Image = ({ url, name, children }) => (
 Image.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
+};
+
+Image.defaultProps = {
+  handleChangeFile: () => {}
 };
 
 export { Image };

package/src/components/FilePreview/Image/imageSchema.js

@@ -40,7 +40,7 @@ const imageSchema = {
       hrefUrl: {
         type: 'string',
         format: 'uri-template',
-        label: 'url',
+        label: 'Url',
         showInForm: true,
         formFieldType: 'text',
         description: 'Url format is not valid'

package/src/components/FilePreview/index.js

@@ -3,7 +3,14 @@ import { FormBuilder } from '@blaze-cms/react-form-builder';
 import PropTypes from 'prop-types';
 import { getPreview } from './get-preview';
 
-const FilePreview = ({ file, handleFormChange, displayForm, previewType, children }) => {
+const FilePreview = ({
+  file,
+  handleFormChange,
+  displayForm,
+  previewType,
+  children,
+  handleChangeFile
+}) => {
   const { name, url, mimetype, data, store } = file;
   const [Preview, schema] = getPreview({ mimetype, previewType });
   const shouldRenderForm = schema && displayForm;
@@ -23,7 +30,13 @@ const FilePreview = ({ file, handleFormChange, displayForm, previewType, childre
 
   return (
     <>
-      <Preview mimetype={mimetype} url={url} name={name} {...data} file={file}>
+      <Preview
+        mimetype={mimetype}
+        url={url}
+        name={name}
+        {...data}
+        file={file}
+        handleChangeFile={handleChangeFile}>
         {shouldRenderForm && (
           <div className="preview__details">
             <div className="preview__filename">{file.filename}</div>
@@ -50,6 +63,7 @@ FilePreview.propTypes = {
   file: PropTypes.object.isRequired,
   fileName: PropTypes.string,
   handleFormChange: PropTypes.func,
+  handleChangeFile: PropTypes.func,
   displayForm: PropTypes.bool,
   handlers: PropTypes.object,
   previewType: PropTypes.oneOf(Object.keys(FilePreview.availablePreviewTypes)),
@@ -62,6 +76,7 @@ FilePreview.defaultProps = {
   handlers: {},
   previewType: FilePreview.availablePreviewTypes.card,
   handleFormChange: () => {},
+  handleChangeFile: () => {},
   children: []
 };
 

package/src/components/FilePreviewReadOnly/FileList.js

@@ -3,9 +3,7 @@ import PropTypes from 'prop-types';
 import FilePreviewList from './FilePreviewList';
 
 const FileList = ({ selectedFiles, children }) => (
-  <>
-    <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
-  </>
+  <FilePreviewList selectedFiles={selectedFiles}>{children}</FilePreviewList>
 );
 
 FileList.propTypes = {

package/src/components/FilePreviewReadOnly/FilePreviewReadOnly.js

@@ -11,49 +11,37 @@ const FilePreviewReadOnly = ({ label, id, type, value }) => {
   const client = useApolloClient();
 
   const getFiles = async (offset, ids) => {
-    const {
-      data: { files: newFiles }
-    } = await client.query({
+    if (!ids.length) return [];
+    const { data: { files = [] } = {} } = await client.query({
       query: getQuery('GET_FILES'),
       variables: {
         offset,
         where: {
-          id: {
-            _in: ids
-          }
+          id: { _in: ids }
         }
       },
-      skip: !initialValue.length,
       fetchPolicy: 'network-only'
     });
-    return newFiles;
+    return files;
   };
 
-  useEffect(
-    () => {
-      (async () => {
-        const files = await getFiles(0, initialValue);
-        const orderedFiles = orderFiles(files, initialValue);
-        setSelectedFiles(orderedFiles);
-      })();
-    },
-    [] //eslint-disable-line
-  );
-
   const orderFiles = (files, ids) =>
     ids.map(currentId => files.find(({ id: fileId }) => fileId === currentId)).filter(Boolean);
 
+  useEffect(() => {
+    (async () => {
+      const files = await getFiles(0, initialValue);
+      const orderedFiles = orderFiles(files, initialValue);
+      setSelectedFiles(orderedFiles);
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
-    <>
-      <div className="form-field form-field--button">
-        <label>{label}</label>
-        {selectedFiles && (
-          <>
-            <FileList selectedFiles={selectedFiles} />
-          </>
-        )}
-      </div>
-    </>
+    <div className="form-field form-field--button">
+      <label htmlFor={id}>{label}</label>
+      {selectedFiles.length > 0 && <FileList selectedFiles={selectedFiles} />}
+    </div>
   );
 };
 

package/src/components/FileUploadAdapter/FileUploadAdapter.js

@@ -5,6 +5,7 @@ import { useApolloClient } from '@apollo/client';
 import { getQuery, getMutation, ModalAdapter as Modal } from '@blaze-cms/admin-ui-utils';
 import { parseFormValues } from '@blaze-cms/react-form-builder';
 import { useToasts } from '@blaze-react/toaster';
+import Tooltip from '@blaze-react/tooltip';
 import { MORE } from '../../constants';
 import ListingContainer from '../ListingContainer';
 import { MediaContextProvider } from '../../utils/media-context';
@@ -30,6 +31,7 @@ const FileUploadAdapter = ({
   shouldRenderInPreview,
   canDragAndDrop,
   simpleLayout,
+  tooltip,
   previewAllFiles,
   fileType
 }) => {
@@ -270,7 +272,9 @@ const FileUploadAdapter = ({
   return (
     <>
       <div className="form-field form-field--button">
-        <label>{label}</label>
+        <label>
+          {label} <Tooltip tooltipContent={tooltip} />
+        </label>
         {selectedFiles && (
           <MediaContextProvider value={{ handleEditModal, onUnselectFile: handleSelectedFiles }}>
             {shouldRenderInPreview ? (
@@ -364,6 +368,7 @@ FileUploadAdapter.propTypes = {
   canDragAndDrop: PropTypes.bool,
   simpleLayout: PropTypes.bool,
   previewAllFiles: PropTypes.bool,
+  tooltip: PropTypes.string,
   fileType: PropTypes.string
 };
 
@@ -374,6 +379,7 @@ FileUploadAdapter.defaultProps = {
   canDragAndDrop: false,
   simpleLayout: false,
   previewAllFiles: false,
+  tooltip: '',
   fileType: 'file'
 };