Upload Dropzone

We appreciate your interest. Please read carefully the complete documentation before starting with Upload Dropzone.

Features

• Drag and drop anywhere in the app
• Create specific areas in the application to upload
• Simultaneous upload areas
• Multiple upload instances
• Callback system to know the status of the drop
• Option to upload directly through the lib
• Can be used with: ReactJs, VueJs, Angular
• Has methods of manually adding files for upload
• Has events to identify and remove upload drop
• Has events to identify and remove upload a file input
• Has Typescript support

Requirements

• ES >= 5

Documentation

Using ReactJs

import React from 'react';
import UploadDropzone from 'upload-dropzone';

function Test() {
    const elementRef = React.useRef<HTMLDivElement>(null);

    React.useEffect(() => {
        if (!elementRef.current) return;
        const uploadDropzone = new UploadDropzone({
            fileFieldName: 'file',
            serverUrl: 'http://localhost:3000/upload',
        });
        uploadDropzone.addEventListenerToDropzone(elementRef.current, (codeStatus, response) => {
            console.log(codeStatus, response);
        });
        return () => {
            uploadDropzone.removeEventListenerFromDropzone(elementRef.current as HTMLElement);
        }
    }, []);

    return (
        <div ref={elementRef} style={{width: '100%', height: '100%'}}>

        </div>
    )
}
export default Test;

Using with input inside ReactJs

import UploadDropzone from 'upload-dropzone';

const elementRef = useRef();

useEffect(() => {
    if (!elementRef.current) return;
    const uploadDropzone = new UploadDropzone({
        serverUrl: "http://localhost:3000",
        fileFieldName: "file",
    });
    uploadDropzone.addEventListenerToInput(
        elementRef.current,
        (dropStatus, files) => {
            console.log('elementRef', dropStatus, files);
        }
    );
    return () => {
        uploadDropzone.removeEventListenerFromInput(elementRef.current);
    }
}, [elementRef.current]);

Documentation API

| Method | Description | | :---------- | :---------------------------------- | | setFiles | Use it when you need to save in the class instance the files that will be sent to the server without using the DROP event |

| Method | Description | | :---------- | :---------------------------------- | | setFile | Use it when you need to save in the class instance the single file that will be sent to the server without using the DROP event |

| Method | Description | | :---------- | :---------------------------------- | | removeFile | Remove a specific file of class instance |

| Method | Description | | :---------- | :---------------------------------- | | removeFile | Remove a specific file of class instance |

| Method | Description | | :---------- | :---------------------------------- | | removeAllFiles | Clean the files in class instance |

| Method | Description | | :---------- | :---------------------------------- | | uploadFile | Use this when uploading a single file. You need to provide the upload endpoint name. |

| Method | Description | | :---------- | :---------------------------------- | | uploadFiles | Use this when uploading files. You need to provide the upload endpoint name. |

| Method | Description | | :---------- | :---------------------------------- | | addEventListenerToDropzone | Use this when you need an element of your application to be a drop zone when passing a file over it |

| Method | Description | | :---------- | :---------------------------------- | | removeEventListenerFromDropzone | Disable dropzone event |

| Method | Description | | :---------- | :---------------------------------- | | addEventListenerToInput | Create drop event to input element |

| Method | Description | | :---------- | :---------------------------------- | | removeEventListenerFromInput | Disable drop event of input element |

Licença

MIT

🔗 Links