Node React Upload Image to Local Folder

React file upload: proper and easy way, with NodeJS!

Upload page reloads on submitting a file for upload. Are you a newbie to React, and using this generic manner to upload files on the web?

There's a better fashion to handle uploads in React.

This tutorial is the answer!

Today, it'll change forever if you get through this tutorial and implement it on your site.

Nosotros'll utilize Node with React to upload multiple files at once. As we go along, in that location volition be elementary client-side validation and finally with uploaded notification can exist shown with react-toastify.

Like always, start a react app with create-react-app

Include the bootstrap CDN in index.html.

In dissimilarity to creating the form from scratch, grab this snippet from bootsnipp.

This is our cute upload form to piece of work with.

Unmarried  React file upload

Allow's start with a unproblematic ane, a single file upload.

Capture selected file

Add together a change handler in toapp.js pick the file on alter.

                          <input type="file" proper name="file" onChange={this.onChangeHandler}/>          

Log event.target.files, it is an assortment of all stored files.target.files[0]holds the actual file and its details.

            onChangeHandler=upshot=>{      console.log(result.target.files[0])  }          

On saving, create-react-app volition instantly refresh the browser.

Store the file in state, and only upload when a user clicks the upload button.

Initially, the selectedFilestate is set to null

            constructor(props) {     super(props);       this.land = {         selectedFile: null       }       }          

To pass the file to the state, setselectedFile state to outcome.target.files[0].

                          onChangeHandler=event=>{     this.setState({       selectedFile: event.target.files[0],       loaded: 0,     })   }          

Check the state variable over again with react-devtools to verify.

Once more, create-react-app volition instantly refresh the browser and you lot'll see the result

Send the files to the server

We have a land of files to upload.

We definitely demand an upload push button,  upload is handled with onClick consequence handler.

                          <button type="button" class="btn btn-success btn-block" onClick={this.onClickHandler}>Upload</button>                      

onClickhandle volition execute onClickHandler which sends a request to the server. The file from a state is appended every bit a file to FormData.

            onClickHandler = () => {     const data = new FormData()      data.append('file', this.state.selectedFile) }          

Nosotros'll utilize axios to ship AJAX requests.

Install and import axios.

                          import              axios              from              'axios';          

Create form object and create Mail service asking with axios. Information technology needs endpoint URL and form data.

                          axios.mail("http://localhost:8000/upload", data, { // receive two parameter endpoint url ,form data        })       .then(res => { // then print response status         console.log(res.statusText)       })          

Here's final,onClickhandler with axios POST asking. It sends POST request to http://localhost:8000/upload and gets response.

            onClickHandler = () => {    const data = new FormData()    data.append('file',              this.state.selectedFile)    axios.post("http://localhost:8000/upload", data, {              // receive two    parameter endpoint url ,form data              })          

            .then(res => {              // so print response status              console.log(res.statusText)  }) }          

The file blazon attached is ready as a country and needs to exist checked. As a outcome, it's a binary file.

Axios will send a request to the endpoint with a binary file in Form Data.

To receive the uploaded file, implement a backend server. It'll receive the file sent from front-finish.

Create a simple server with Node.

Create server.js file in the root directory

Install express, multer, and cors.

            npm i express multer cors nodemon –save          

We'll apply express to create a server, multer to handle files. Cors volition be used to enable cross-origin request to this server. Nodemon to monitor the changes and auto-reload, it is optional and you'll have to restart the server manually in it's absence.

In,server.js initiate an limited example

            var express = require('express'); var app = express(); var multer = require('multer') var cors = require('cors');          

Don't forget CORS middleware.

            app.use(cors())          

Create a multer instance and set up the destination folder. The code below uses /public folder. You can also assign a new file proper name upon upload. The code beneath uses 'originalfilename'as the file proper name.

            var storage = multer.diskStorage({       destination: part (req, file, cb) {       cb(null, 'public')     },     filename: function (req, file, cb) {       cb(nil, Date.now() + '-' +file.originalname )     } })          

Create an upload case and receive a unmarried file

            var upload = multer({ storage: storage }).unmarried('file')          

Setup thePOSTroad to upload a file

            app.post('/upload',function(req, res) {           upload(req, res, function (err) {              if              (err instanceof multer.MulterError) {              return              res.condition(500).json(err)            }              else              if              (err) {              render              res.status(500).json(err)            }              return              res.status(200).send(req.file)      })  });          

Outset an upload object and handle an error, check formulter error before general errors. Status OK (200) with metadata is sent back to the client on successful upload.

Make the server heed on port 8000.

            app.listen(8000, function() {      console.log('App running on port 8000');  });          

Run nodemon server.js in a final to start this server

Upload a file, yous will see the file appear in the public directory.

It'southward working, congratulations!

Uploading multiple files in React

It'due south time for uploading multiple files at once.

Add togethermultiplein the input field to accept multiple files in the grade.

            <input type="file" grade="grade-control" multiple onChange={this.onChangeHandler}/>          

Update andonChangeHandler remove zilch indexes, it's simply event.target.files.

            onChangeHandler=outcome=>{              this.setState({      selectedFile: event.target.files,     }) }          

Too, update functiononClickHandler to loop through the fastened files.

            onClickHandler = () => {    const data = new FormData()              for(var x = 0; x<this.state.selectedFile.length; ten++) {        data.append('file',              this.country.selectedFile[ten])    }    axios.post("http://localhost:8000/upload", data, {              // receive two    parameter endpoint url ,form data              })  .then(res => {              // then print response status              console.log(res.statusText)  })  }          

In server.js update multer upload example to have an array of files.

            var upload = multer({ storage: storage }).array('file')          

Reload the server and upload multiple files this time.

Is it working for yous every bit well? Let the states know if it isn't.

Treatment Validation

Until now, null has gone wrong only  it doesn't hateful it never volition.

Hither are situations where this application can crash:

1. Likewise many images to upload
2. Uploading an image with the incorrect file extension
3. Sending an prototype file that is too big

Client-side validation doesn't secure the application but tin can throw errors early to the user and improves the user experience.

#1 There are too many files!

Create a carve up function named maxSelectedFile and pass effect object.

Use length to check a number of files attached. The lawmaking below returns false when a number of files reach 3.

                          maxSelectFile=(event)=>{    let files = effect.target.files // create file object              if              (files.length > 3) {            const msg = 'Only 3 images can be uploaded at a time'           event.target.value = nada // discard selected file           console.log(msg)          return false;       }              render              true;  }          

Update onChangeHandler to only set land when the maxSelectFile returns, that is when a number of files are less than three.

            onChangeHandler=event=>{       var files = outcome.target.files              if(this.maxSelectFile(event)){        // if return true let to setState              this.setState({          selectedFile: files       })    } }          

The result

#ii Uploading an image with the incorrect file extension

Create a checkMimeType function and pass an event object

            checkMimeType=(event)=>{   //getting file object   let files = event.target.files    //define bulletin container   let err = ''   // list allow mime type  const types = ['prototype/png', 'image/jpeg', 'image/gif']   // loop access array              for(var x = 0; ten<files.length; x++) {    // compare file type find doesn't matach              if              (types.every(type => files[x].blazon !== type)) {        // create error bulletin and assign to container           err += files[x].type+' is not a supported format\n';      }    };                              if              (err !== '') { // if message not same old that mean has mistake        event.target.value = goose egg // discard selected file       console.log(err)              return              false;    }              render              true;  }          

Update onChangeHandler once more to include checkMimeType.

            onChangeHandler=event=>{       var files = outcome.target.files              if(this.maxSelectFile(event) &&              this.checkMimeType(event))){        // if return truthful allow to setState              this.setState({          selectedFile: files       })    } }          

See the output again.

#iii Uploading an paradigm that is too big

Create another office checkFileSize to cheque the file size. Ascertain your limiting size and return false if the uploaded file size is greater.

            checkFileSize=(event)=>{      let files = effect.target.files      let size = 15000       let err = "";              for(var x = 0; ten<files.length; x++) {              if              (files[x].size > size) {       err += files[x].type+'is too large, please pick a smaller file\northward';     }   };              if              (err !== '') {      result.target.value = cipher      console.log(err)              return false              }              return              true;  }          

Update onChangeHandler again to handle checkFileSize.

            onChangeHandler=outcome=>{       var files = event.target.files              if(this.maxSelectFile(event) &&              this.checkMimeType(event) &&              this.checkMimeType(event)){        // if return true let to setState              this.setState({          selectedFile: files       })    } }          

The output thereafter…

That's all on client-side validation.

Ameliorate UX with progress bar and Toastify

Letting the user know the happening is a lot amend than having them stare at the screen until the upload is finished.

To ameliorate the user feel, we can insert progress bar and a popup bulletin

Progress Bar

Apply country variable loaded to update real-fourth dimension values.
Update the state, add loaded: 0

            constructor(props) {              super(props);              this.state = {        selectedFile: null,        loaded:0    } }          

The loaded state is inverse from progressEvent of the Postal service asking.

            axios.post("http://localhost:8000/upload", data, {        onUploadProgress: ProgressEvent => {              this.setState({            loaded: (ProgressEvent.loaded / ProgressEvent.total*100),        })    }, })          

For progress bar, we utilize reactstrap.

Install and import progress bar from reactstrap

                          import              {Progress}              from              'reactstrap';          

Add a progress bar after the file picker.

            <div class="form-grouping">  <Progress max="100" color="success" value={this.land.loaded} >{Math.round(this.state.loaded,2) }%</Progress>  </div>          

See the upshot in action.

Beautiful, own't it?

Display the outcome message with toastify

Installreact-toastify and import the following:

            import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';          

Put the container somewhere

            <div class="form-group">    <ToastContainer /> </div>          

Utilise toast wherever y'all desire to brandish a bulletin.

Offset of all, identify upload event

            .and so(res => {      toast.success('upload success') }) .catch(err => {      toast.error('upload fail') })          

See the result.

Also, identify validation upshot.

Update checkMimeType office for validation.

            checkMimeType=(result)=>{      permit files = outcome.target.files     allow err = [] // create empty array     const types = ['epitome/png', 'image/jpeg', 'image/gif']              for(var 10 = 0; x<files.length; x++) {              if              (types.every(type => files[10].type !== type)) {         err[x] = files[x].type+' is non a supported format\n';        // assign message to assortment       }     };              for(var z = 0; z<err.length; z++) { // loop create toast massage         event.target.value = zero          toast.mistake(err[z])     }              return              true; }          

You've the result

Too, add together toast.warn(msg)

Include the checkFileSizeand changes from checkMimeType function

            checkFileSize=(event)=>{              let              files = consequence.target.files              allow              size = 2000000              let              err = [];              for(var              10 = 0; ten<files.length; ten++) {              if              (files[x].size > size) {    err[x] = files[x].type+'is likewise large, please pick a smaller file\n';  } };              for(var              z = 0; z<err.length; z++) {  toast.error(err[z])  event.target.value = cypher }              return              truthful; }          

Change err variable to array and loop to create toast message from it.

Our react file upload is working fine, but we tin can have a lot of improvements like uploading to deject providers , also use of 3rd-party plugins for other services to improve upload feel are some possible additions.

Before we terminate of this tutorial,  you tin can contribute to meliorate and refactor code from this tutorial transport your PR to this repository.

If y'all loved the tutorial, you might also want to check out Mosh's Consummate React class

And, if this mail was helpful in any mode, show some support. Please share!

Krissanawat is Nomad Web developer live in Chiangmai passionate on React and Laravel

Tags: javascript, react

larsonhitiong.blogspot.com

Source: https://programmingwithmosh.com/javascript/react-file-upload-proper-server-side-nodejs-easy/

Share this post