Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-file-upload-mobile with all npm packages installed. Try it out:

require("antd-mobile/package.json"); // antd-mobile is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactFileUploadMobile = require("react-file-upload-mobile")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-file-upload-mobile v1.0.2

file upload ui component for react

react-file-upload-mobile


React Mobile Single File Upload Component

NPM version npm download

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

Example

Tips

Test Case

Coverage

License

react-file-upload-mobile is released under the MIT license.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free