You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-11Lines changed: 15 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@ React frontend.
18
18
19
19
## General info
20
20
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.
22
22
23
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
24
@@ -28,25 +28,27 @@ React frontend.
28
28
29
29
## Technologies
30
30
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/).
* 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.
40
40
41
41
* The page will reload if you make edits. You will also see any lint errors in the console.
42
42
43
43
## Backend Setup
44
44
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.
46
48
47
49
## Code Examples
48
50
49
-
* extract of Frontend `Main.jsx` that handles the file upload.
51
+
* extract of Frontend `Main.js` that handles the file upload.
50
52
51
53
```javascript
52
54
// function to upload an image. FormData() constructor used to create a new FormData object.
@@ -72,14 +74,16 @@ React frontend.
72
74
73
75
## Status & To-Do List
74
76
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'.
76
78
77
-
*To do: check backend.
79
+
*To do: check backend code.
78
80
79
81
## Inspiration
80
82
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/)
82
86
83
87
## Contact
84
88
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!
0 commit comments