https://github.com/bezkoder/multiple-image-upload-react-js
Multiple image upload in React.js (functional component) with Preview, Progress Bars using Hooks, Axios, Bootstrap 4
https://github.com/bezkoder/multiple-image-upload-react-js
axios bootstrap bootstrap-4 bootstrap4 file-upload functional-components multipart multipart-formdata multipart-uploads react react-hooks reactjs upload-file upload-images
Last synced: 2 months ago
JSON representation
Multiple image upload in React.js (functional component) with Preview, Progress Bars using Hooks, Axios, Bootstrap 4
- Host: GitHub
- URL: https://github.com/bezkoder/multiple-image-upload-react-js
- Owner: bezkoder
- Created: 2022-11-21T09:22:49.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-21T09:27:30.000Z (about 3 years ago)
- Last Synced: 2025-01-31T22:24:00.950Z (11 months ago)
- Topics: axios, bootstrap, bootstrap-4, bootstrap4, file-upload, functional-components, multipart, multipart-formdata, multipart-uploads, react, react-hooks, reactjs, upload-file, upload-images
- Language: JavaScript
- Homepage:
- Size: 342 KB
- Stars: 6
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Multiple Image Upload in React.js (Functional Component)
In this tutorial, I will show you way to build React.js Hooks (Functional Component) Multiple Image Upload with Preview to a Rest API example. The React App uses Axios and Multipart File for making HTTP requests, Bootstrap for progress bar. You also have a display list of images’ information (with download url).
For more detail, please visit:
> [Multiple Images Upload in React.js (Functional Component)](https://www.bezkoder.com/multiple-image-upload-react-js/)
Rest APIs server for this React Client:
> [Node.js Express File Upload Rest API example](https://www.bezkoder.com/node-js-express-file-upload/)
> [Spring Boot Multipart File upload example](https://www.bezkoder.com/spring-boot-file-upload/)
More Practice:
> [Multiple Images Upload in React.js (Class Component)](https://www.bezkoder.com/react-multiple-image-upload-with-preview/)
> [React CRUD example using Hooks](https://www.bezkoder.com/react-hooks-crud-axios-api/)
> [React Pagination using Hooks example](https://www.bezkoder.com/react-pagination-hooks/)
> [React Hooks: JWT Authentication & Authorization example](https://www.bezkoder.com/react-hooks-jwt-auth/)
> [React + Redux + Hooks: JWT Authentication & Authorization example](https://www.bezkoder.com/react-hooks-redux-login-registration-example/)
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 Hooks + Django Rest Framework](https://www.bezkoder.com/django-react-hooks/)
Serverless:
> [React Hooks Firebase CRUD App with Realtime Database](https://www.bezkoder.com/react-firebase-hooks-crud/)
> [React Hooks Firestore CRUD App example | Firebase Cloud Firestore](https://www.bezkoder.com/react-hooks-firestore/)
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.