Skip to content

Commit 49d5c4b

Browse files
daviskamaudaviskamau
authored
code
1 parent 52770f5 commit 49d5c4b

18 files changed

+30413
-0
lines changed

Diff for: ‎react_file_uploader/README.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
```

Diff for: ‎react_file_uploader/client/package-lock.json

+16,536
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎react_file_uploader/client/package.json

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
}

Diff for: ‎react_file_uploader/client/public/favicon.ico

3.78 KB
Binary file not shown.

Diff for: ‎react_file_uploader/client/public/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
9+
/>
10+
<meta name="theme-color" content="#000000" />
11+
<link
12+
rel="stylesheet"
13+
href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
14+
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
15+
crossorigin="anonymous"
16+
/>
17+
18+
<link
19+
rel="stylesheet"
20+
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
21+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
22+
crossorigin="anonymous"
23+
/>
24+
25+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
26+
27+
<title>React File Upload</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
33+
<script
34+
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
35+
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
36+
crossorigin="anonymous"
37+
></script>
38+
<script
39+
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
40+
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
41+
crossorigin="anonymous"
42+
></script>
43+
<script
44+
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
45+
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
46+
crossorigin="anonymous"
47+
></script>
48+
</body>
49+
</html>

Diff for: ‎react_file_uploader/client/public/manifest.json

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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+
}

Diff for: ‎react_file_uploader/client/public/uploads/test1.png

51.9 KB
Loading

Diff for: ‎react_file_uploader/client/public/uploads/test2.jpg

157 KB
Loading

Diff for: ‎react_file_uploader/client/src/App.css

Whitespace-only changes.

Diff for: ‎react_file_uploader/client/src/App.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react';
2+
import FileUpload from './components/FileUpload';
3+
import './App.css';
4+
5+
const App = () => (
6+
<div className='container mt-4'>
7+
<h4 className='display-4 text-center mb-4'>
8+
<i className='fab fa-react' /> React File Upload
9+
</h4>
10+
11+
<FileUpload />
12+
</div>
13+
);
14+
15+
export default App;

Diff for: ‎react_file_uploader/client/src/components/FileUpload.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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+
<Fragment>
57+
{message ? <Message msg={message} /> : null}
58+
<form onSubmit={onSubmit}>
59+
<div className='custom-file mb-4'>
60+
<input
61+
type='file'
62+
className='custom-file-input'
63+
id='customFile'
64+
onChange={onChange}
65+
/>
66+
<label className='custom-file-label' htmlFor='customFile'>
67+
{filename}
68+
</label>
69+
</div>
70+
71+
<Progress percentage={uploadPercentage} />
72+
73+
<input
74+
type='submit'
75+
value='Upload'
76+
className='btn btn-primary btn-block mt-4'
77+
/>
78+
</form>
79+
{uploadedFile ? (
80+
<div className='row mt-5'>
81+
<div className='col-md-6 m-auto'>
82+
<h3 className='text-center'>{uploadedFile.fileName}</h3>
83+
<img style={{ width: '100%' }} src={uploadedFile.filePath} alt='' />
84+
</div>
85+
</div>
86+
) : null}
87+
</Fragment>
88+
);
89+
};
90+
91+
export default FileUpload;

Diff for: ‎react_file_uploader/client/src/components/Message.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Message = ({ msg }) => {
5+
return (
6+
<div className='alert alert-info alert-dismissible fade show' role='alert'>
7+
{msg}
8+
<button
9+
type='button'
10+
className='close'
11+
data-dismiss='alert'
12+
aria-label='Close'
13+
>
14+
<span aria-hidden='true'>&times;</span>
15+
</button>
16+
</div>
17+
);
18+
};
19+
20+
Message.propTypes = {
21+
msg: PropTypes.string.isRequired
22+
};
23+
24+
export default Message;

Diff for: ‎react_file_uploader/client/src/components/Progress.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
const Progress = ({ percentage }) => {
5+
return (
6+
<div className='progress'>
7+
<div
8+
className='progress-bar progress-bar-striped bg-success'
9+
role='progressbar'
10+
style={{ width: `${percentage}%` }}
11+
>
12+
{percentage}%
13+
</div>
14+
</div>
15+
);
16+
};
17+
18+
Progress.propTypes = {
19+
percentage: PropTypes.number.isRequired
20+
};
21+
22+
export default Progress;

Diff for: ‎react_file_uploader/client/src/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
5+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)