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: about 1 month 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 (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2022-11-21T09:27:30.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T16:01:11.022Z (about 2 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).

![multiple-image-upload-react-js-example](multiple-image-upload-react-js.png)

![multiple-image-upload-react-js-example-list-images](multiple-image-upload-react-js-functional-component.png)

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.