react-upload-media v1.0.3

⬆️ React Upload Media

React Upload Media is a library of React UI which provides component for uploading media.

This library contains two react component UploadMedia and UploadMediaModal

Installation

This module is installed via npm:

npm install react-upload-media

UploadMedia

UploadMedia component is a easy-to-use Ui component ehich allows user to upload file using drag 'n' drop zone which also works on click event.

import React, { useState } from 'react'
import { UploadMedia } from 'react-upload-media';

export const App = (props) => {

    const [files, setFiles] = useState([]);

    const submitHandler = (files) => {
        setFiles(files);
    }

    return (
        <div>
            <UploadMedia height={'300px'} onSubmit={submitHandler} />
            <div>
                <p>Files Uploaded</p>
                <ul>
                    {files.map((file) => <li key={file.path}>{file.name}</li>)}
                </ul>
            </div>
        </div>
    );
} 


export default App;

API

UploadMediaModal

UploadMediaModal component is provides user with the feature of uploding files through the modal. This component have two extra prop then the UploadMedia which aloows the component to open and close the modal.

import React, { useState } from 'react'
import { UploadMediaModal } from 'react-upload-media';

export const App = (props) => {

    const [open, setOpen] = useState(false);
    const [files, setFiles] = useState([]);

    const submitHandler = (files) => {
        setFiles(files);
    }

    const handleClose = () => {
        setOpen(false);
    }

    const handleOpen = () => {
        setOpen(true);
    }

    return (
        <div>
        <UploadMediaModal open={open} onClose={handleClose} onSubmit={submitHandler} />
        <button onClick={handleOpen}>Upload Media</button>
            <div>
                <p>Files Uploaded</p>
                <ul>
                    {files.map((file) => <li key={file.path}>{file.name}</li>)}
                </ul>
            </div>
        </div>
    );
} 

API

Author

Satyam Lohiya