feat: [AXIMST-605] add file name to upload preview modal

raccoongang · Mar 6, 2024 · 0191833 · 0191833
1 parent d35de95
commit 0191833
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 8 deletions.
diff --git a/src/generic/modal-dropzone/ModalDropzone.jsx b/src/generic/modal-dropzone/ModalDropzone.jsx
@@ -29,6 +29,7 @@ const ModalDropzone = ({
   onCancel,
   onChange,
   onSavingStatus,
+  onSelectFile,
   maxSize = UPLOAD_FILE_MAX_SIZE,
 }) => {
   const {
@@ -42,7 +43,7 @@ const ModalDropzone = ({
     handleCancel,
     handleSelectFile,
   } = useModalDropzone({
-    onChange, onCancel, onClose, fileTypes, onSavingStatus,
+    onChange, onCancel, onClose, fileTypes, onSavingStatus, onSelectFile,
   });
 
   const invalidSizeMore = invalidFileSizeMore || intl.formatMessage(
@@ -130,6 +131,7 @@ ModalDropzone.defaultProps = {
   imageDropzoneText: '',
   maxSize: UPLOAD_FILE_MAX_SIZE,
   invalidFileSizeMore: '',
+  onSelectFile: null,
 };
 
 ModalDropzone.propTypes = {
@@ -145,6 +147,7 @@ ModalDropzone.propTypes = {
   onSavingStatus: PropTypes.func.isRequired,
   maxSize: PropTypes.number,
   invalidFileSizeMore: PropTypes.string,
+  onSelectFile: PropTypes.func,
 };
 
 export default ModalDropzone;
diff --git a/src/generic/modal-dropzone/useModalDropzone.jsx b/src/generic/modal-dropzone/useModalDropzone.jsx
@@ -7,7 +7,7 @@ import { uploadAssets } from './data/api';
 import messages from './messages';
 
 const useModalDropzone = ({
-  onChange, onCancel, onClose, fileTypes, onSavingStatus,
+  onChange, onCancel, onClose, fileTypes, onSavingStatus, onSelectFile,
 }) => {
   const { courseId } = useParams();
   const intl = useIntl();
@@ -70,6 +70,10 @@ const useModalDropzone = ({
       };
       reader.readAsDataURL(file);
       setSelectedFile(fileData);
+
+      if (onSelectFile) {
+        onSelectFile(file.path);
+      }
     }
   };
 
@@ -95,6 +99,7 @@ const useModalDropzone = ({
     try {
       const response = await uploadAssets(courseId, selectedFile, onUploadProgress);
       const url = response?.asset?.url;
+
       if (url) {
         onChange(url);
         onSavingStatus({ status: RequestStatus.SUCCESSFUL });

diff --git a/src/textbooks/textbook-form/TextbookForm.jsx b/src/textbooks/textbook-form/TextbookForm.jsx
@@ -39,6 +39,12 @@ const TextbookForm = ({
 
   const [currentTextbookIndex, setCurrentTextbookIndex] = useState(0);
   const [isUploadModalOpen, openUploadModal, closeUploadModal] = useToggle(false);
+  const [selectedFile, setSelectedFile] = useState('');
+
+  const onCloseUploadModal = () => {
+    closeUploadModal();
+    setSelectedFile('');
+  };
 
   const onUploadButtonClick = (index) => {
     setCurrentTextbookIndex(index);
@@ -155,8 +161,8 @@ const TextbookForm = ({
             </ActionRow>
             <ModalDropzone
               isOpen={isUploadModalOpen}
-              onClose={closeUploadModal}
-              onCancel={closeUploadModal}
+              onClose={onCloseUploadModal}
+              onCancel={onCloseUploadModal}
               onChange={(value) => setFieldValue(`chapters[${currentTextbookIndex}].url`, value)}
               fileTypes={['pdf']}
               modalTitle={intl.formatMessage(messages.uploadModalTitle, { courseName: courseTitle })}
@@ -167,8 +173,12 @@ const TextbookForm = ({
                 messages.uploadModalFileInvalidSizeText,
                 { maxSize: UPLOAD_FILE_MAX_SIZE / (1000 * 1000) },
               )}
+              onSelectFile={setSelectedFile}
               previewComponent={(
-                <Icon src={PdfIcon} className="modal-preview-icon" />
+                <div className="modal-preview">
+                  <Icon src={PdfIcon} className="modal-preview-icon" />
+                  <span className="modal-preview-text">{selectedFile}</span>
+                </div>
               )}
             />
             <PromptIfDirty dirty={dirty} />

diff --git a/src/textbooks/textbook-form/TextbookForm.scss b/src/textbooks/textbook-form/TextbookForm.scss
@@ -48,8 +48,20 @@
   }
 }
 
-.modal-preview-icon {
-  height: 6.25rem;
-  width: 6.25rem;
+.modal-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: $spacer;
+
+  .modal-preview-icon {
+    height: 6.25rem;
+    width: 6.25rem;
+  }
+
+  .modal-preview-text {
+    font-size: 14px;
+  }
 }