Skip to content

Commit 05273d0

Browse files
dependency, readme & minor code updates
1 parent 94a2d8b commit 05273d0

File tree

14 files changed

+6145
-4204
lines changed

14 files changed

+6145
-4204
lines changed

README.md

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ React frontend.
1818

1919
## General info
2020

21-
* Uploads an image file from the React frontend. This file is fetched by the backend using express.js.
21+
* Uploads an image file from the React frontend. This file is fetched by the backend using express.jsm and stored in a files directory in the public folder.
2222

2323
* 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.
2424

@@ -28,25 +28,27 @@ React frontend.
2828

2929
## Technologies
3030

31-
* [Node.js v10.15.3](https://nodejs.org/) javascript runtime using the [Chrome V8 engine](https://v8.dev/).
31+
* [Node.js v12.3.1](https://nodejs.org/) javascript runtime using the [Chrome V8 engine](https://v8.dev/).
3232

33-
* [React v16.8.6](https://reactjs.org/) Frontend javascript library.
33+
* [React v16.10.2](https://reactjs.org/) Frontend javascript library.
3434

3535
## Frontend Setup
3636

37-
### `npm start`
37+
### `npm run start`
3838

39-
* Runs the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view in browser.
39+
* Runs the app in development mode. Open [http://localhost:3000](http://localhost:3000) to view in browser.
4040

4141
* The page will reload if you make edits. You will also see any lint errors in the console.
4242

4343
## Backend Setup
4444

45-
* to follow after backend checked
45+
### `nodemon app.js`
46+
47+
* Runs the backend in development mode. Open [http://localhost:8000](http://localhost:3000) to view in browser.
4648

4749
## Code Examples
4850

49-
* extract of Frontend `Main.jsx` that handles the file upload.
51+
* extract of Frontend `Main.js` that handles the file upload.
5052

5153
```javascript
5254
// function to upload an image. FormData() constructor used to create a new FormData object.
@@ -72,14 +74,16 @@ React frontend.
7274

7375
## Status & To-Do List
7476

75-
* Status: working front-end. back-end needs to be checked.
77+
* Status: updated oct 2019. working front-end. When running back-end gives a 404 error message 'file not found'.
7678

77-
*To do: check backend.
79+
* To do: check backend code.
7880

7981
## Inspiration
8082

81-
* [Medium article by Antonio Erdeljac: File upload with Node & React](https://levelup.gitconnected.com/file-upload-with-node-js-react-js-686e342ad7e7)
83+
* [Medium article by Antonio Erdeljac, jan 2018: File upload with Node & React](https://levelup.gitconnected.com/file-upload-with-node-js-react-js-686e342ad7e7)
84+
85+
* [Signet article (original) by Antonio Erdeljac: File upload with Node & React](https://www.signet.hr/file-upload-with-node-react/)
8286

8387
## Contact
8488

85-
Created by [ABateman](https://www.andrewbateman.org) - feel free to contact me!
89+
Repo created by [ABateman](https://www.andrewbateman.org) - feel free to contact me!

backend/app.js

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,20 @@ const cors = require('cors');
99

1010
const app = express();
1111

12+
app.use((req, res, next) => {
13+
res.setHeader('Access-Control-Allow-Origin', '*');
14+
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
15+
res.header('Access-Control-Allow-Credentials', true);
16+
res.header('Access-Control-Allow-Methods', '*'); // enables all the methods to take place
17+
return next();
18+
});
19+
1220
// view engine setup
1321
app.set('views', path.join(__dirname, 'views'));
1422
app.set('view engine', 'jade');
1523

1624
// uncomment after placing your favicon in /public
17-
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
25+
// app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
1826
app.use(logger('dev'));
1927
app.use(cors());
2028
app.use(bodyParser.json());
@@ -57,7 +65,7 @@ app.use(function(err, req, res, next) {
5765
});
5866

5967
app.listen(8000, () => {
60-
console.log('8000');
68+
console.log('listening on port 8000');
6169
});
6270

6371
module.exports = app;

backend/backendReadme.md

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)