grommet-dropzone

- grommet-dropzone.netlify.com

About

This app uses Grommet and react-dropzone to create a drag and drop file uploader. You can use this repository as a starting point to build your app on top of, or you can add these files into an existing application. If you have feedback or requests, please file them as an issue.

Dropzone API

The following props can be applied to Dropzone to affect its functionality:

How to use Dropzone in a form

This app puts the Dropzone within a form to demonstrate how to do file uploading. If you intend to use the Dropzone for file upload, you will need to include these functions within your form (see MyForm.js for how it is implemented). Additionally, a fileUpload.js file has been provided as a starter for how to connect the form data with your database.

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

const addFiles = newFiles => {
    setFiles(...files, newFiles);
};

const deleteFiles = remainingFiles => {
    setFiles(remainingFiles);
};

const handleSubmit = event => {
    event.preventDefault();
    // You will need to update ../utils/fileUpload with the correct url for
    // where the data will be sent to.
    fileUpload({ firstName, lastName, files });
};

To connect the above functions to the Dropzone, you will need to add these props:

<Dropzone onAddFiles={addFiles} onDeleteFiles={deleteFiles} />

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

yarn build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See the section about deployment for more information.