diff --git a/src/molecules/drop-zone/drop-zone.tsx b/src/molecules/drop-zone/drop-zone.tsx index 625c2cb2..88639814 100644 --- a/src/molecules/drop-zone/drop-zone.tsx +++ b/src/molecules/drop-zone/drop-zone.tsx @@ -78,6 +78,30 @@ export type DropZoneProps = { * Upload limit display e.g.: 'KB' (upper case) */ uploadLimitIn?: FileSizeUnit; + /** + * Message that instructs the user on how to user the drop-zone + */ + instructionsMessage?: string; + /** + * Label for the max size + */ + maxSizeLabel?: string; + /** + * Title for the wrong size error + */ + wrongSizeTitle?: string; + /** + * Function to build the message for the wrong size error + */ + wrongSizeMessage?: (file: File) => string; + /** + * Title for the wrong type error + */ + wrongTypeTitle?: string; + /** + * Function to build the message for the wrong type error + */ + wrongTypeMessage?: (file: File) => string; } const UploadInput = styled.input` @@ -188,7 +212,20 @@ type ErrorMessage = { * @section design-system */ const DropZone: React.FC = (props) => { - const { validate, onChange, multiple, files: filesFromProps, uploadLimitIn, ...other } = props + const { + validate, + onChange, + multiple, + files: filesFromProps, + uploadLimitIn, + instructionsMessage = 'Pick or Drop File here to upload it.', + maxSizeLabel = 'Max size', + wrongSizeTitle = 'Wrong Size', + wrongSizeMessage = (file) => `File: ${file.name} size is too big`, + wrongTypeTitle = 'Wrong Type', + wrongTypeMessage = (file) => `File: ${file.name} has unsupported type: ${file.type}`, + ...other + } = props const [, setIsDragging] = useState(false) const [error, setError] = useState(null) @@ -224,11 +261,11 @@ const DropZone: React.FC = (props) => { const file = files.item(i) as File if (!file) { return } if (validate && !validateSize(validate.maxSize, file && file.size)) { - setError({ message: `File: ${file.name} size is too big`, title: 'Wrong Size' }) + setError({ message: wrongSizeMessage(file), title: wrongSizeTitle }) return } if (validate && !validateContentType(validate.mimeTypes, file.type)) { - setError({ message: `File: ${file.name} has unsupported type: ${file.type}`, title: 'Wrong Type' }) + setError({ message: wrongTypeMessage(file), title: wrongTypeTitle }) return } validatedFiles.push(file) @@ -269,12 +306,12 @@ const DropZone: React.FC = (props) => { onDrop(event)} multiple={multiple} /> - Pick or Drop File here to upload it. + {instructionsMessage} {validate && validate.maxSize ? ( - + {displayUploadLimit()} ) : ''}