How To Upload Images From React Forms To Express

In this weblog, I'll be going over the simplest and fastest method to upload a photo from a React client to a Node server with Express and then how to display that photo back to the client.

Assuming that y'all already have these components of your app fix and connected, first nosotros'll start with a bones button and a function to handle the selected file.

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

                          uploadHandler              (              issue              )              {              // code goes here              }

In this demo, it should exist noted that I volition be showing examples using a class component, just you could just every bit well do this in a functional component.

Now, inside your upload handler part, you'll need to convert the file into something that can be sent in a POST request, and and so send information technology to your server. We'll be using Axios in this example.

Here'southward what the upload handler function should look similar:

                          uploadHandler              (              event              )              {              const              data              =              new              FormData              ();              data              .              append              (              '              file              '              ,              consequence              .              target              .              files              [              0              ]);              axios              .              mail service              (              '              /upload              '              ,              data              )              .              so              ((              res              )              =>              {              this              .              setState              ({              photos              :              [              res              .              data              ,              ...              this              .              land              .              photos              ]              });              });              }

Here, we are creating an instance of FormData and appending the file with .append(). The file details can as well exist seen with a console log of event.target.files[0], in which instance you may see something that looks similar this:
Alt Text

Now, for your Express server, you'll need to install Multer if yous do not have it already, via the command npm install multer. And then, add this to the .js file for your Express server above wherever your POST route is going to be:

                          const              multer              =              require              (              '              multer              '              )              const              storage              =              multer              .              diskStorage              ({              destination              :              function              (              req              ,              file              ,              cb              )              {              cb              (              null              ,              '              public              '              )              },              filename              :              (              req              ,              file              ,              cb              )              =>              {              cb              (              zippo              ,              Appointment              .              at present              ()              +              '              -              '              +              file              .              originalname              )              }              })              const              upload              =              multer              ({              storage              :              storage              }).              single              (              '              file              '              )

All we really demand from hither is the upload office which is congenital from storage and multer higher up it. In the multer.diskStorage object above, the 'public' cord in 'destination:' can be inverse to whatever you want the folder name to exist where your photos to be stored. This folder, by default, is in the root folder of your unabridged app.
Additionally, the Date.now() + '-' +file.originalname below information technology specifies the filename that your stored photo volition be saved as. If you go out information technology as is, the original filename volition be preserved, just with a JavaScript formatted date in front of it followed past a dash.

And now for the POST road:

                          app              .              mail service              (              '              /upload              '              ,              (              req              ,              res              )              =>              {              upload              (              req              ,              res              ,              (              err              )              =>              {              if              (              err              )              {              res              .              sendStatus              (              500              );              }              res              .              transport              (              req              .              file              );              });              });

Equally you lot tin encounter, the aforementioned upload() function is now treatment the req and res objects from the initial Express app.post. We accept some basic fault handling by sending a 500 if the file tin't be saved, but otherwise, it volition send dorsum data about the file that was saved. There's but one thing left that the server will need now in order to really serve that file back to the customer.

                          app              .              use              (              express              .              static              (              '              public              '              ));

Add this near the bottom of your express server index.js file. The 'public' cord here again volition refer to whatever you lot have named the folder that volition shop the paradigm files. At present let's await back at the Axios request from the customer.

                          axios              .              post              (              '              /upload              '              ,              data              )              .              and so              ((              res              )              =>              {              this              .              setState              ({              photos              :              [              res              .              information              ,              ...              this              .              state              .              photos              ]              });              });

In the .then(), res.data contains an object with details about the file that was saved, one of them being the filename. this.setState({ photos: [res.data, ...this.country.photos] }); will add this object to the forepart of a 'photos' array in this.country.

Now, in your render(), beneath the upload button, yous could add together something similar this: (where localhost is the host your app is beingness served from and 3000 is your port number)

                          {              this              .              country              .              photos              .              map              (              photo              =>              (              <              img              src              =              {              `http://localhost:3000/              ${              photo              .              filename              }              `              }              /              >                            ))}

By default, with app.use(express.static('public')), the photos within the 'public' folder will be available at the '/' endpoint followed past the filename. So the to a higher place map function should now display the photos one by one as you add together them, with the nigh recent being at the summit since we're adding them in opposite lodge.

Hither is the terminal result of the code for the customer side app:

                          import              React              ,              {              Component              }              from              '              react              '              ;              import              axios              from              '              axios              '              ;              class              App              extends              Component              {              constructor              (              props              )              {              super              (              props              );              this              .              state              =              {              photos              :              [],              };              this              .              uploadHandler              =              this              .              uploadHandler              .              bind              (              this              );              }              uploadHandler              (              effect              )              {              const              data              =              new              FormData              ();              data              .              append              (              '              file              '              ,              event              .              target              .              files              [              0              ]);              axios              .              post              (              '              /upload              '              ,              data              )              .              then              ((              res              )              =>              {              this              .              setState              ({              photos              :              [              res              .              data              ,              ...              this              .              country              .              photos              ]              });              });              }              render              ()              {              return              (              <              div              >              <              div              >              <              input              type              =              "              file              "              name              =              "              file              "              onChange              =              {              this              .              uploadHandler              }              /              >                            <              /div              >                            {              this              .              land              .              photos              .              map              (              photo              =>              (              <              img              src              =              {              `http://localhost:3000/              ${              photograph              .              filename              }              `              }              /              >                            ))}              <              /div              >                            )              }              }              export              default              App              ;

The sit-in that I've done shows the quickest, most basic way to get a file upload and retrieval system working with React, Node, and Express. Yous will nearly likely desire to eventually add more avant-garde features like multiple file upload, more advanced error handling, a progress indicator, saving the URLs to a database, and peradventure a separate procedure of selecting the file and uploading the file. However, the demo should be enough to get you started. There is a lot that tin be done with file upload functionality in an app, so hopefully this demo will assistance get you lot started.