https://github.com/bezkoder/react-dropzone-multiple-files-upload
React Dropzone Multiple Files Upload example with axios & Rest API, Bootstrap Progress Bar
https://github.com/bezkoder/react-dropzone-multiple-files-upload
axios bootstrap bootstrap4 dropzone dropzonejs file-upload multipart multiple-file-upload progress-bar react reactjs
Last synced: about 1 month ago
JSON representation
React Dropzone Multiple Files Upload example with axios & Rest API, Bootstrap Progress Bar
- Host: GitHub
- URL: https://github.com/bezkoder/react-dropzone-multiple-files-upload
- Owner: bezkoder
- Created: 2021-09-24T09:17:08.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-09-24T09:18:56.000Z (over 3 years ago)
- Last Synced: 2025-03-28T10:47:35.561Z (about 2 months ago)
- Topics: axios, bootstrap, bootstrap4, dropzone, dropzonejs, file-upload, multipart, multiple-file-upload, progress-bar, react, reactjs
- Language: JavaScript
- Homepage:
- Size: 242 KB
- Stars: 15
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React Dropzone Multiple Files upload example with Progress Bar
We’re gonna create a React Multiple Files upload application in that user can:
- drag and drop multiple files into a Dropzone
- see the upload process (percentage) of each file with progress bars
- view all uploaded files
- download link to file when clicking on the file name
Upload successfully:
For more detail, please visit:
> [React Dropzone Multiple Files upload example with Progress Bar](https://www.bezkoder.com/react-dropzone-multiple-files-upload/)
Rest APIs server for this React Client:
> [Node.js Express File Upload Rest API example](https://www.bezkoder.com/node-js-express-file-upload/)
> [Node.js Express File Upload with Google Cloud Storage example](https://www.bezkoder.com/google-cloud-storage-nodejs-upload-file/)
> [Spring Boot Multipart File upload example](https://www.bezkoder.com/spring-boot-file-upload/)
More Practice:D
> [React (with Hooks) Multiple Files upload example](https://www.bezkoder.com/react-hooks-multiple-file-upload/)
> [React Pagination example](https://www.bezkoder.com/react-pagination-material-ui/)
> [React File Upload example](https://www.bezkoder.com/react-file-upload-axios/)
> [React JWT Authentication & Authorization example](https://www.bezkoder.com/react-jwt-auth/)
> [React + Redux: JWT Authentication & Authorization example](https://www.bezkoder.com/react-redux-jwt-auth/)
Fullstack with Node.js Express:
> [React.js + Node.js Express + MySQL](https://www.bezkoder.com/react-node-express-mysql/)
> [React.js + Node.js Express + PostgreSQL](https://www.bezkoder.com/react-node-express-postgresql/)
> [React.js + Node.js Express + MongoDB](https://www.bezkoder.com/react-node-express-mongodb-mern-stack/)
Fullstack with Spring Boot:
> [React.js + Spring Boot + MySQL](https://www.bezkoder.com/react-spring-boot-crud/)
> [React.js + Spring Boot + PostgreSQL](https://www.bezkoder.com/spring-boot-react-postgresql/)
> [React.js + Spring Boot + MongoDB](https://www.bezkoder.com/react-spring-boot-mongodb/)
Fullstack with Django:
> [React.js + Django Rest Framework](https://www.bezkoder.com/django-react-axios-rest-framework/)
Serverless:
> [React Firebase CRUD App with Realtime Database](https://www.bezkoder.com/react-firebase-crud/)
> [React Firestore CRUD App example | Firebase Cloud Firestore](https://www.bezkoder.com/react-firestore-crud/)
Integration (run back-end & front-end on same server/port)
> [Integrate React with Spring Boot](https://www.bezkoder.com/integrate-reactjs-spring-boot/)
> [Integrate React with Node.js Express](https://www.bezkoder.com/integrate-react-express-same-server-port/)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
### Set port
.env
```
PORT=8081
```
## Project setup
In the project directory, you can run:
```
npm install
# or
yarn install
```
or
### Compiles and hot-reloads for development
```
npm start
# or
yarn start
```
Open [http://localhost:8081](http://localhost:8081) to view it in the browser.
The page will reload if you make edits.