upload

React Mobile Single File Upload Component

Dec 25, 2019
React Mobile Single File Upload Component

react-file-upload-mobile

React Mobile Single File Upload Component.

Screenshots

  • Upload mode - To be uploaded

  • Upload mode - Uploaded

  • Display mode

install

react-file-upload-mobile

Usage

import ReactFileUploadMobile from 'react-file-upload-mobile'; const [image, setImage] = useState(); const [imageName, setImageName] = useState(); const clearAttachment = () => { setImage(''); setImageName(''); } const onUpload = (file) => { // upload api } const preview = () => { // preview picture } // Upload mode <ReactFileUploadMobile fileUrl={image} fileName={imageName} displayOnly={false} preview={preview} compressImg={0.8} onFileDelete={clearAttachment} onFileUpload={onUpload} showNote={true} uploadSuffix={['docx', 'doc', 'jpg', 'png', 'jpeg', 'zip']} uploadImgSuffix={['jpg', 'png', 'jpeg']} /> // Display mode <ReactFileUploadMobile fileUrl={'//xxx.com/xxx.jpg'} fileName={'xxx.jpg'} preview={preview} download={true} displayOnly={true} />

API

PropertiesDescritionTypeDefault
wrapClsWrap classNamestring-
fileUrlFile urlstring-
fileNameFile namestring-
displayOnlyDisplay mode or upload modebooleanfalse
downloadDownloading file Display mode onlybooleanfalse
compressImgPicture compression ratio, Upload mode only, One decimal place between 0-1, 0 or 1 is uncompressednumber0.8
showNoteShow bottom text, Upload mode onlybooleanfalse
uploadSuffixSuffix restrictions on uploaded files, Upload mode onlyArray[]
uploadImgSuffixPicture file suffix,Subset of uploadSuffix, Upload mode onlyArray[]

Methods

  • preview() - Click thumbnail callback
  • onFileDelete() - Clicking delete button callback, Upload mode only
  • onFileUpload(file: File) - File upload callback, Upload mode only

Development

Modify the file under source,npm run build will compile, other functions have not been implemented yet

TODOs

  • Globalization
  • Add parameter: file name length limit
  • Add parameter: file size limit

GitHub

Recommended