⬆️ 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

| Name | Type | Required | Default | Description | | -------------- | -------------- | -------- | ------- | ------------------------------------------- | | primaryColor | String | false | #fff | primary color of the component | secondaryColor | String | false | #99FF33 | secondary color of the component | buttonColor | String | false | #0073e6 | button Color of the component | options | Object | false | - | Options for file input | onSubmit | Function | false | - | Returs uploaded files

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

| Name | Type | Required | Default | Description | | -------------- | -------------- | -------- | ------- | ------------------------------------------- | | open | Boolean | true | false | to open the modal | onClose | Function | true | - | function to close the modal | primaryColor | String | false | #fff | primary color of the component | secondaryColor | String | false | #99FF33 | secondary color of the component | buttonColor | String | false | #0073e6 | button Color of the component | options | Object | false | - | Options for file input | onSubmit | Function | false | - | Returs uploaded files

Author

Satyam Lohiya