Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 94a2d8b

Browse files
first commit
0 parents commit 94a2d8b

30 files changed

+14438
-0
lines changed

‎.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/build
11+
12+
# misc
13+
.DS_Store
14+
.env.local
15+
.env.development.local
16+
.env.test.local
17+
.env.production.local
18+
19+
npm-debug.log*
20+
yarn-debug.log*
21+
yarn-error.log*

‎README.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# React File Upload
2+
3+
Express backend server app to handle file uploads.
4+
React frontend.
5+
6+
*** Note: to open web links in a new window use: _ctrl+click on link_**
7+
8+
## Table of contents
9+
10+
* [General info](#general-info)
11+
* [Screenshots](#screenshots)
12+
* [Technologies](#technologies)
13+
* [Setup](#setup)
14+
* [Features](#features)
15+
* [Status](#status)
16+
* [Inspiration](#inspiration)
17+
* [Contact](#contact)
18+
19+
## General info
20+
21+
* Uploads an image file from the React frontend. This file is fetched by the backend using express.js.
22+
23+
* The frontend uses a [FormData object](https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData) with inputs for the file itself and a file name. The image will be displayed on the frontend.
24+
25+
## Screenshots
26+
27+
![Example screenshot](./img/frontend.png).
28+
29+
## Technologies
30+
31+
* [Node.js v10.15.3](https://nodejs.org/) javascript runtime using the [Chrome V8 engine](https://v8.dev/).
32+
33+
* [React v16.8.6](https://reactjs.org/) Frontend javascript library.
34+
35+
## Frontend Setup
36+
37+
### `npm start`
38+
39+
* Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view in browser.
40+
41+
* The page will reload if you make edits. You will also see any lint errors in the console.
42+
43+
## Backend Setup
44+
45+
* to follow after backend checked
46+
47+
## Code Examples
48+
49+
* extract of Frontend `Main.jsx` that handles the file upload.
50+
51+
```javascript
52+
// function to upload an image. FormData() constructor used to create a new FormData object.
53+
// file will be fetched by the backend server running on port 8000.
54+
handleUploadImage(event) {
55+
event.preventDefault();
56+
57+
const data = new FormData();
58+
data.append('file', this.uploadInput.files[0]);
59+
data.append('filename', this.fileName.value);
60+
61+
fetch('http://localhost:8000/upload', {
62+
method: 'POST',
63+
body: data,
64+
}).then((response) => {
65+
response.json().then((body) => {
66+
this.setState({ imageURL: `http://localhost:8000/${body.file}` });
67+
});
68+
});
69+
}
70+
71+
```
72+
73+
## Status & To-Do List
74+
75+
* Status: working front-end. back-end needs to be checked.
76+
77+
*To do: check backend.
78+
79+
## Inspiration
80+
81+
* [Medium article by Antonio Erdeljac: File upload with Node & React](https://levelup.gitconnected.com/file-upload-with-node-js-react-js-686e342ad7e7)
82+
83+
## Contact
84+
85+
Created by [ABateman](https://www.andrewbateman.org) - feel free to contact me!

‎backend/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎backend/4.1.11

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
+ clean-css@4.2.1
2+
updated 1 package and audited 249 packages in 2.105s
3+
found 3 low severity vulnerabilities
4+
run `npm audit fix` to fix them, or `npm audit` for details

‎backend/app.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const express = require('express');
2+
const path = require('path');
3+
const favicon = require('serve-favicon');
4+
const logger = require('morgan');
5+
const cookieParser = require('cookie-parser');
6+
const bodyParser = require('body-parser');
7+
const fileUpload = require('express-fileupload');
8+
const cors = require('cors');
9+
10+
const app = express();
11+
12+
// view engine setup
13+
app.set('views', path.join(__dirname, 'views'));
14+
app.set('view engine', 'jade');
15+
16+
// uncomment after placing your favicon in /public
17+
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
18+
app.use(logger('dev'));
19+
app.use(cors());
20+
app.use(bodyParser.json());
21+
app.use(bodyParser.urlencoded({ extended: false }));
22+
app.use(cookieParser());
23+
app.use(fileUpload());
24+
app.use('/public', express.static(__dirname + '/public'));
25+
26+
27+
app.post('/upload', (req, res, next) => {
28+
console.log(req);
29+
let imageFile = req.files.file;
30+
31+
imageFile.mv(`${__dirname}/public/${req.body.filename}.jpg`, function(err) {
32+
if (err) {
33+
return res.status(500).send(err);
34+
}
35+
36+
res.json({file: `public/${req.body.filename}.jpg`});
37+
});
38+
39+
})
40+
41+
// catch 404 and forward to error handler
42+
app.use(function(req, res, next) {
43+
const err = new Error('Not Found');
44+
err.status = 404;
45+
next(err);
46+
});
47+
48+
// error handler
49+
app.use(function(err, req, res, next) {
50+
// set locals, only providing error in development
51+
res.locals.message = err.message;
52+
res.locals.error = req.app.get('env') === 'development' ? err : {};
53+
54+
// render the error page
55+
res.status(err.status || 500);
56+
res.render('error');
57+
});
58+
59+
app.listen(8000, () => {
60+
console.log('8000');
61+
});
62+
63+
module.exports = app;

‎backend/backendReadme.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# to be updated

‎backend/bin/www

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
#!/usr/bin/env node
2+
3+
/**
4+
* Module dependencies.
5+
*/
6+
7+
var app = require('../app');
8+
var debug = require('debug')('backend:server');
9+
var http = require('http');
10+
11+
/**
12+
* Get port from environment and store in Express.
13+
*/
14+
15+
var port = normalizePort(process.env.PORT || '3000');
16+
app.set('port', port);
17+
18+
/**
19+
* Create HTTP server.
20+
*/
21+
22+
var server = http.createServer(app);
23+
24+
/**
25+
* Listen on provided port, on all network interfaces.
26+
*/
27+
28+
server.listen(port);
29+
server.on('error', onError);
30+
server.on('listening', onListening);
31+
32+
/**
33+
* Normalize a port into a number, string, or false.
34+
*/
35+
36+
function normalizePort(val) {
37+
var port = parseInt(val, 10);
38+
39+
if (isNaN(port)) {
40+
// named pipe
41+
return val;
42+
}
43+
44+
if (port >= 0) {
45+
// port number
46+
return port;
47+
}
48+
49+
return false;
50+
}
51+
52+
/**
53+
* Event listener for HTTP server "error" event.
54+
*/
55+
56+
function onError(error) {
57+
if (error.syscall !== 'listen') {
58+
throw error;
59+
}
60+
61+
var bind = typeof port === 'string'
62+
? 'Pipe ' + port
63+
: 'Port ' + port;
64+
65+
// handle specific listen errors with friendly messages
66+
switch (error.code) {
67+
case 'EACCES':
68+
console.error(bind + ' requires elevated privileges');
69+
process.exit(1);
70+
break;
71+
case 'EADDRINUSE':
72+
console.error(bind + ' is already in use');
73+
process.exit(1);
74+
break;
75+
default:
76+
throw error;
77+
}
78+
}
79+
80+
/**
81+
* Event listener for HTTP server "listening" event.
82+
*/
83+
84+
function onListening() {
85+
var addr = server.address();
86+
var bind = typeof addr === 'string'
87+
? 'pipe ' + addr
88+
: 'port ' + addr.port;
89+
debug('Listening on ' + bind);
90+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /