graphql-upload VS react-dropzone

Uploading cloud storage (s3, firebase storage, etc) is probably best. I do not recommend it, but graphql-upload is a thing. https://github.com/jaydenseric/graphql-upload

Look at the grapqhl file upload spec (https://github.com/jaydenseric/graphql-upload). Basically the custom type File is just a string path which the server will use to get the file from the multipart request.

I am not sure if this actually a problem with graphql-upload or webpack or something else. I also noticed that my issue looks similar to this issue, but I didn't really understand if there were any fixes to that issue and if indeed it is the same issue I am facing.

For file-uploads there is https://github.com/jaydenseric/graphql-upload. Usually at scale you would use a service such as S3 for storing the files. IMHO, proxying the files through the GraphQL server is a big performance penalty. Therefore I would rather recommen uploading to the file storage directly from the client, e.g. by issuing a pre-singed upload url that can be requested via a GraphQL mutation.

To upload images with GraphQL, make sure to add [graphql-upload](https://github.com/jaydenseric/graphql-upload).

6. Simplify File Uploads with React-Dropzone

Website: React Dropzone

In addition to being able to access the file browser to select an image to upload, I also wanted to be able to drag'n'drop that image as well. While researching a few options, I came across react-dropzone, a "Simple React hook to create a HTML5-compliant drag'n'drop zone for files." Installation was easy, and the docs were well-written with many examples of different applications.

The journey starts with the user uploading the PDF document. For this, I used the react-dropzone library. The library supports both drag-and-drop and click-based uploads. Once the user drops the file into the input, the file is sent to the backend for processing

React Dropzone is a popular open-source library for creating file upload components in React applications. It provides an easy way to implement drag-and-drop file uploads and supports various customization options.

If you want some more advanced functionality, take a look at react-dropzone

React-Dropzone: https://github.com/react-dropzone/react-dropzone

4. React Dropzone

React-dropzone react-dropzone is a set of React libraries that help developers to build complex drag-and-drop functionalities while keeping their components destructured. In other words, it is a React hook that makes it easy to construct drag-and-drop interfaces quickly rather than from scratch.

In this React tutorial, I will show you way to build Drag and Drop File Upload example with React Hooks using react-dropzone, Axios and Multipart File for making HTTP requests, Bootstrap for progress bar and display list of files' information (with download url).