├── .gitignore
├── README.md
├── client
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── manifest.json
│ └── uploads
│ │ ├── test1.png
│ │ └── test2.jpg
├── src
│ ├── App.css
│ ├── App.js
│ ├── components
│ │ ├── FileUpload.js
│ │ ├── Message.js
│ │ └── Progress.js
│ └── index.js
└── yarn.lock
├── package-lock.json
├── package.json
└── server.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | client/build
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React File Upload
2 |
3 | > This is a full stack React-Express file uploader but could easily be modified to work with any back-end including cloud storage
4 |
5 | ## Quick Start
6 |
7 | ```bash
8 | # Install dependencies server/client
9 | npm install
10 | cd client
11 | npm install
12 |
13 | # Serve on localhost:3000
14 | npm run dev
15 | ```
16 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "axios": "^0.18.0",
7 | "react": "^16.8.6",
8 | "react-dom": "^16.8.6",
9 | "react-scripts": "2.1.8"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build",
14 | "test": "react-scripts test",
15 | "eject": "react-scripts eject"
16 | },
17 | "eslintConfig": {
18 | "extends": "react-app"
19 | },
20 | "browserslist": [
21 | ">0.2%",
22 | "not dead",
23 | "not ie <= 11",
24 | "not op_mini all"
25 | ],
26 | "proxy": "http://localhost:5000"
27 | }
28 |
--------------------------------------------------------------------------------
/client/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/react_file_uploader/705300b93bd69543e6b3d5ab4290b8a68bdb9386/client/public/favicon.ico
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
17 |
18 |
24 |
25 |
26 |
27 | React File Upload
28 |
29 |
30 |
31 |
32 |
33 |
38 |
43 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/client/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/client/public/uploads/test1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/react_file_uploader/705300b93bd69543e6b3d5ab4290b8a68bdb9386/client/public/uploads/test1.png
--------------------------------------------------------------------------------
/client/public/uploads/test2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/react_file_uploader/705300b93bd69543e6b3d5ab4290b8a68bdb9386/client/public/uploads/test2.jpg
--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/react_file_uploader/705300b93bd69543e6b3d5ab4290b8a68bdb9386/client/src/App.css
--------------------------------------------------------------------------------
/client/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import FileUpload from './components/FileUpload';
3 | import './App.css';
4 |
5 | const App = () => (
6 |
7 |
8 | React File Upload
9 |
10 |
11 |
12 |
13 | );
14 |
15 | export default App;
16 |
--------------------------------------------------------------------------------
/client/src/components/FileUpload.js:
--------------------------------------------------------------------------------
1 | import React, { Fragment, useState } from 'react';
2 | import Message from './Message';
3 | import Progress from './Progress';
4 | import axios from 'axios';
5 |
6 | const FileUpload = () => {
7 | const [file, setFile] = useState('');
8 | const [filename, setFilename] = useState('Choose File');
9 | const [uploadedFile, setUploadedFile] = useState({});
10 | const [message, setMessage] = useState('');
11 | const [uploadPercentage, setUploadPercentage] = useState(0);
12 |
13 | const onChange = e => {
14 | setFile(e.target.files[0]);
15 | setFilename(e.target.files[0].name);
16 | };
17 |
18 | const onSubmit = async e => {
19 | e.preventDefault();
20 | const formData = new FormData();
21 | formData.append('file', file);
22 |
23 | try {
24 | const res = await axios.post('/upload', formData, {
25 | headers: {
26 | 'Content-Type': 'multipart/form-data'
27 | },
28 | onUploadProgress: progressEvent => {
29 | setUploadPercentage(
30 | parseInt(
31 | Math.round((progressEvent.loaded * 100) / progressEvent.total)
32 | )
33 | );
34 | }
35 | });
36 |
37 | // Clear percentage
38 | setTimeout(() => setUploadPercentage(0), 10000);
39 |
40 | const { fileName, filePath } = res.data;
41 |
42 | setUploadedFile({ fileName, filePath });
43 |
44 | setMessage('File Uploaded');
45 | } catch (err) {
46 | if (err.response.status === 500) {
47 | setMessage('There was a problem with the server');
48 | } else {
49 | setMessage(err.response.data.msg);
50 | }
51 | setUploadPercentage(0)
52 | }
53 | };
54 |
55 | return (
56 |
57 | {message ? : null}
58 |
79 | {uploadedFile ? (
80 |
81 |
82 |
{uploadedFile.fileName}
83 |
84 |
85 |
7 | {msg}
8 |
16 |
17 | );
18 | };
19 |
20 | Message.propTypes = {
21 | msg: PropTypes.string.isRequired
22 | };
23 |
24 | export default Message;
25 |
--------------------------------------------------------------------------------
/client/src/components/Progress.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | const Progress = ({ percentage }) => {
5 | return (
6 |
7 |
12 | {percentage}%
13 |
14 |