upload-dropzone v1.0.5

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

Licença

MIT

🔗 Links