React File Upload

• React frontend image upload with express backend server.js to handle file uploads.
• This is an excellent tutorial by Traversy Media.
• Note: to open web links in a new window use: ctrl+click on link

Table of contents

• React File Upload
  • Table of contents
  • General info
  • Screenshots
  • Technologies
  • Fullstack Dev Setup
  • Code Examples
  • Status & To-Do List
  • Inspiration
  • 📁 License
  • ✉️ Contact

General info

• Uploads an image file from the React frontend. This file is fetched by the backend using express.js and stored in 'uploads' in the public folder.
• The frontend uses a FileUpload component with a FormData object with inputs for the file itself and a file name. The image will be displayed on the frontend.
• Includes a % upload complete progress-bar component.
• Includes a dismissable status message component.
• React hooks used to write state. React extension shows hooks and their states in the dev console.

Screenshots

.

Technologies

• Node.js v14 javascript runtime using the Chrome V8 engine
• Express middleware v4
• Express fileupload middleware v1
• React v16 Frontend javascript library.
• Bootstrap front-end component library
• Font Awesome icons
• React Hooks

Fullstack Dev Setup

• npm run dev runs the front and backend simultaneously in development mode. It will open http://localhost:3000 to view in browser. Any code changes will automatically reload the browser.

Code Examples

• FileUpload component try-catch to show percentage progress or error message.

    try {
      const res = await axios.post('/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          setUploadPercentage(parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total)));
          setTimeout(() => setUploadPercentage(0), 10000);
        }
      });

      const { fileName, filePath } = res.data;
      setUploadedFile({ fileName, filePath });
      setMessage('File uploaded');
    } catch(err) {
      if(err.response.status === 500) {
        setMessage('There was a problem with the server');
      } else {
        setMessage(err.response.data.msg);
      }
    }

Status & To-Do List

• Status: Working.
• To do: Nothing

Inspiration

• Traversy Media: React File Uploader With Express (Using React Hooks)

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com