https://github.com/bezkoder/react-image-upload-preview
React Image Upload example with Preview, Progress Bar, Bootstrap, Axios to Rest APIs
https://github.com/bezkoder/react-image-upload-preview
axios file-upload react react-js reactjs
Last synced: 5 months ago
JSON representation
React Image Upload example with Preview, Progress Bar, Bootstrap, Axios to Rest APIs
- Host: GitHub
- URL: https://github.com/bezkoder/react-image-upload-preview
- Owner: bezkoder
- Created: 2020-12-29T15:07:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-17T05:05:28.000Z (over 2 years ago)
- Last Synced: 2024-10-29T23:05:00.289Z (6 months ago)
- Topics: axios, file-upload, react, react-js, reactjs
- Language: JavaScript
- Homepage:
- Size: 480 KB
- Stars: 15
- Watchers: 4
- Forks: 13
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Image Upload example with Preview
In this tutorial, I will show you way to build React.js Image Upload example with Preview to a Rest API. 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:
> [React.js Image Upload example with Preview](https://www.bezkoder.com/react-image-upload-preview/)
> [React.js Image Upload with Preview using Hooks](https://www.bezkoder.com/react-image-upload-preview-hooks/)
> [Material UI Image Upload example with Preview](https://www.bezkoder.com/material-ui-image-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/)
> [Spring Boot Multipart File upload example](https://www.bezkoder.com/spring-boot-file-upload/)
More Practice:
> [React File Upload with Axios & Boostrap Progress Bar](https://www.bezkoder.com/react-file-upload-axios/)
> [React (with Hooks) File Upload with Axios & Boostrap Progress Bar](https://www.bezkoder.com/react-hooks-file-upload/)
> [Material UI File Upload example with Axios & Progress Bar](https://www.bezkoder.com/material-ui-file-upload/)
Security:
> [React JWT Authentication & Authorization example (without Redux)](https://www.bezkoder.com/react-jwt-auth/)
> [React + Redux: JWT Authentication & Authorization example](https://www.bezkoder.com/react-redux-jwt-auth/)
## Fullstack CRUD
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/)
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/)
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/)
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.