diff --git a/src/generic/modal-dropzone/ModalDropzone.jsx b/src/generic/modal-dropzone/ModalDropzone.jsx index cc12069a48..8133910785 100644 --- 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 index 4d17316b55..4dcdb604f9 100644 --- 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 index 671f353258..5840b7f37c 100644 --- 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 = ({ 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={( - +
+ + {selectedFile} +
)} /> diff --git a/src/textbooks/textbook-form/TextbookForm.scss b/src/textbooks/textbook-form/TextbookForm.scss index e0430192e6..73846b70fa 100644 --- 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; + } }