Pdf File or Word Document Upload to React Mongodb Github

Whenever we submit a grade on the client-side of whatever website, all the form data goes to the server-side. Usually, form-data gets encoded before we submit information technology to the server. Nosotros tin can exercise this past specifying the enctype attribute in the <form> tag in HTML. If we don't specify it, form-data gets encoded with the default type.

Introduction

This is usually the case when we are dealing with text-just data similar name, email, and password, etc.

But, if nosotros are uploading some kind of files, we need to specify the enctype attribute with the value multipart/class-data. This value is required when nosotros are using forms that have a file input type element.

Multer is an npm package that makes information technology like shooting fish in a barrel to handle file uploads. It does it very efficiently, thus it is quite pop. In this article, we volition see how to employ Multer to handle multipart/course-information using Node.js, Express and MongoDB.

Prerequisites

In that location are 4 things yous should know/have installed earlier yous attempt this tutorial.

Good understanding of HTML and CSS.
Node.js should exist installed in your system and you lot should accept a working noesis of information technology.
MongoDB should exist installed in your system and you should have a working knowledge of it.
Adept understanding of the command-line or integrated terminals in lawmaking-editors.

Goals of the tutorial

The goal of this tutorial is to help you sympathize these four things:

How to design an API endpoint for posting data.
How to employ Multer equally a middleware for that API.
How to manage and shop those files on the server-side.
How to view those files on the front end-stop.

Project setup

First, create a new folder/directory in your system and proper name it Multer-Tutorial. Then, open this folder in your favorite code editor. I'll exist using VSCode.

Next, create a new HTML file and proper name information technology index.html. Inside it, we will add together a form to upload files. Your HTML lawmaking should wait something similar this:

                          <!DOCTYPE html>              <html              lang              =              "en">   <head>     <meta              charset              =              "UTF-eight"              />     <meta              name              =              "viewport"              content              =              "width=device-width, initial-scale=1.0"              />     <link              href              =              "https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700;900&brandish=swap"              rel              =              "stylesheet"              />     <link              href              =              "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"              rel              =              "stylesheet"              integrity              =              "sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"              crossorigin              =              "anonymous"              />              <!-- style.css file path in the line below. -->              <link              rel              =              "stylesheet"              href              =              "css/style.css"              />              <!-- -------------------------------------- -->              <title>Multer Tutorial</title>   </caput>   <body>     <chief              form              =              "admin">       <div              class              =              "admin__upload-file">         <form              action              =              "#"              enctype              =              "multipart/form-data"              method              =              "post">           <input              type              =              "file"              class              =              "admin__input"              id              =              "myFile"              proper noun              =              "myFile"              />           <input              form              =              "admin__submit"              type              =              "submit"              />         </form>       </div>     </main>   </body> </html>

Of import points to annotation in the lawmaking in a higher place

In the class tag, the enctype aspect must exist set to multipart/form-data, for Multer to work.
Also, in the form tag, we take specified the activeness attribute to #. This is because we haven't made any API endpoint to receive the data from this class. Nosotros'll be creating this API endpoint later in this tutorial.

Note: The header links in the HTML lawmaking is my personal way of styling. You can fashion this page as you want and don't forget to write your CSS in the style.css file created within the CSS folder in the root directory. I volition share my CSS lawmaking at the end of this tutorial because this article focuses on using Multer.

You should follow the aforementioned binder structure that'south specified. I'll exist sharing it several times as nosotros create new files and folders and then yous can follow this tutorial without whatsoever difficulty.

Electric current binder structure

Multer-Tutorial (Root Directory)

index.html (file) css (folder)

manner.css (file)

Next steps

Before moving forward, make certain that Node.js is installed in your system. Write this command in your final to check whether information technology is installed.

It should show you lot the installed version of Node.js in your system.

Something like:- v14.8.0

At present, since our static site is fix we tin can first initiating this project with npm. To exercise this:-

Write this command in the integrated terminal in your code editor or in whatever command line tool. Brand sure that you are in the root directory of this projection while running this command.

npm init -y creates a new package.json file. This file will help us to manage all the dependencies that we will install afterwards on in this tutorial merely yous should create the chief option in package.json from index.js to app.js.

The resulting packet.json file should look like this:

package.json

Setting up the project with Node.js, Express, and MongoDB

Offset, we demand to install the three most important npm packages that we need for this tutorial.

These are: express, body-parser and mongoose.

Thus, write this control in the final:

            npm i express body-parser mongoose

Limited will help united states create unlike API endpoints and much more.
body-parser will mount the information coming from the course onto the incoming request.
Mongoose will help united states work with MongoDB easily.

Let's get-go by creating a new file named app.js in our root directory. In this file, we will make different routes and also write some configuration code.

Write the following code in your app.js file.

                          // Calling all the required packages                                          const              express              =              require("express");              const              bodyParser              =              require("body-parser");              const              app              =              express();              // Configurations for "trunk-parser"                                          app.apply(              bodyParser.urlencoded({              extended              :              true,   }) );              // Configurations for setting up ejs engine &                            // displaying static files from "public" binder                            // TO Be ADDED Afterward                                          // Routes will be added here after                                          //Express server                                          module.exports              =              app;

Note that I have exported the app because nosotros will be creating a new file. In that file, we will brand our express server and a connection with our MongoDB cluster.

Please refer to these two videos to learn how to make a MongoDB cluster in Atlas (cloud database) and how to connect information technology to our project.

This video will help you create a cluster.
This video will help you connect it to our project.

When you are ready with your cluster, create a new file in the root directory and proper name information technology server.js. This file will make the connexion with our server and database.

Write this lawmaking in the file:

                          const              app              =              require("./app");              const              mongoose              =              crave("mongoose");              process.on("uncaughtException", (err) => {              console.log("UNCAUGHT EXCEPTION, APP SHUTTING NOW!!");              console.log(err.message,              err.name);              process.leave(one); });              const              DB              =              "ENTER YOUR Connectedness STRING HERE";              mongoose              .connect(DB, {              useCreateIndex              :              true,              useFindAndModify              :              true,              useNewUrlParser              :              true,              useUnifiedTopology              :              truthful,              autoIndex              :              truthful,   })   .and then(() => {              panel.log("DB continued successfully");   });              const              port              =              3000;              const              server              =              app.listen(port, () => {              panel.log("Server is upward listening on port:"              +              port); });

Don't forget to enter your connection URI string in the DB variable.

Now, nosotros have to run our project on the express server that we accept mentioned. To do this, run the "server.js" file by writing this command on the terminal.

You should see this bulletin on the terminal if you have done everything correct:

            Server is up listening on port:3000 DB continued successfully

If you see something else like any error, watch those videos again or try fixing those errors by surfing on the internet.

Earlier writing any code in the app.js file, we have to make some new folders and change the locations of some files. Yous must be wondering why we are putting so much endeavor into emphasizing these things.

It is because writing clean and manageable lawmaking with an organized folder structure is as important as writing the "right" code. These kinds of folder structure and refactoring will aid you with your big, future projects.

Create a new binder in the root directory and name information technology public. This will hold the static files that nosotros will serve. Cut the css folder that nosotros created at the start of this project and paste it into this folder.
Create a second folder and name it views. This will hold our HTML file that we created at the beginning.

Since we are dealing with a HTML file, we take to make some changes. Commencement, change the file extension from .html to .ejs because nosotros'll be using the ejs render engine. Then, inside the caput tag, where we have linked our CSS file, alter that link from this:

            <link              rel              =              "stylesheet"              href              =              "css/style.css"              />

to this:-

            <link              rel              =              "stylesheet"              href              =              "/css/style.css"              />

We take added the '/' in front of it because we now take to mention the relative path from the public folder, as it contains our static files.

New folder structure

├───node_modules (folder)
├───public (folder)
│ └───css (folder)
|──────└───style.css (file)
|───views (folder)
│────└───alphabetize.ejs (file)
├───app.js (file)
├───package-lock.json (file)
├───package.json (file)
├───server.js (file)

We accept to define some routes in our app.js file, so nosotros volition start by defining the road for our home folio.

Follow these steps:

Install the template engine for ejs by writing this command:

Include the path package at the meridian which is a built-in Ndde.js packet.

                          const              path              =              crave("path");

Write the configuration code for setting upwards the EJS template engine and defining the path.

                          app.set("view engine",              "ejs");              app.set("views",              path.join(__dirname,              "views"));              app.use(limited.static(`              ${              __dirname              }              /public`));

At present, we will create our start API endpoint, to render the HTML file that we build at the start of this tutorial.

                          app.apply("/", (req,              res) => {              res.status(200).render("index"); });

After all these steps, your app.js file should wait like this.

app.js

Restart the server with the same command every bit above:

You lot should see the rendered HTML file that yous created earlier.

Uploading and storing files

Before using Multer to handle the upload activeness of files, we demand to understand a few things.

The bodily files are never stored in the database. They are ever stored someplace on the server. In our tutorial, we will shop the uploaded files in the public folder.

This is considering all the files that are in the public binder are meant to be available to the public at the front-stop.

Afterwards in the tutorial, nosotros volition learn how to view those files on the front-end. So, that is another reason to shop them in the public folder.

But, we will utilize the database to store some information nearly those files. The beginning matter can be the name of the file and other information tin can vary according to the project.

Next we create a schema to store the proper noun of our uploaded files. Nosotros volition practise this with the help of the Mongoose packet that we installed earlier.

To exercise this, follow these three steps:

Create a new folder and proper noun it model.
Create a new file in it and name it the `fileSchema.js``.
Write this lawmaking in that file.

                          // Calling the "mongoose" package                                          const              mongoose              =              crave("mongoose");              // Creating a Schema for uploaded files                                          const              fileSchema              =              new              mongoose.Schema({              createdAt              :              {              type              :              Engagement,              default              :              Date.now,   },              name              :              {              type              :              Cord,              required              :              [true,              "Uploaded file must have a name"],   }, });              // Creating a Model from that Schema                                          const              File              =              mongoose.model("File",              fileSchema);              // Exporting the Model to use it in app.js File.                                          module.exports              =              File;

This is how we create a Schema with Mongoose and extract a model from information technology. We will now apply this model to shop information about uploaded files in MongoDB. Don't forget to call this model in the app.js file at the top.

                          const              File              =              crave("./model/fileSchema");

Side by side, create a new binder named "files" inside the public folder. This is where we'll be storing the uploaded files.

Updated binder structure:

├───model (binder)
│ └───fileSchema.js (file)
├───node_modules (folder)
├───public (binder)
│ └───css (folder), files(folder)
|──────└───style.css (file)
|───views (folder)
│────└───index.ejs (file)
├───app.js (file)
├───bundle-lock.json (file)
├───package.json (file)
├───server.js (file)

Multer

As mentioned previously, Multer is a Node.js middleware used for handling multipart/form-information, which is primarily used for uploading files.

For those who don't know what a middleware is in Node.js, it's a function that receives the request and response object when a user from the client-side makes whatsoever request.

In that location are two uses of middleware in Node.js:

To send the response based on the request coming from the user.
To change or modify the request object and send information technology to the adjacent middleware.

Nosotros can add as many middleware every bit we wish in this request-response wheel. Let's start by installing Multer.

Write this command in your final:

After installing the package, we volition import it at the top of the app.js file:

                          const              multer              =              require("multer");

And then we will beginning by creating an API endpoint to upload the file, only above the previous one.

Note: Brand sure that the endpoint used to return the page is at the end of all the API endpoints.

                          //API Endpoint for uploading file                                          app.post("/api/uploadFile", (req,              res) => {              // Stuff to be added after                            });

Permit'south kickoff using Multer

We are going to shop the uploaded files in our disk storage inside the files folder that we just created. Permit'due south commencement past defining the destination. Copy the following code in your app.js file just below the code for configuration of static files.

                          //Configuration for Multer                                          const              upload              =              multer({              dest              :              "public/files"              });

In this code, we are calling the multer part that takes sure options equally arguments. We pass the dest (destination) selection and the value of dest volition exist:public/files.

Later on that, we have to use this upload variable as the middleware in the API endpoint created in a higher place.

Alter that API endpoint to this:

                          app.mail("/api/uploadFile",              upload.single("myFile"), (req,              res) => {              // Stuff to exist added after                                          console.log(req.file); });

Here, upload.unmarried is again a part. The single determines that only a single file is to be uploaded. In the instance of there being many files, we tin use multiple instead of single.

It takes a string equally an argument and that string is the proper name of the input that we mentioned in our HTML code.

Nosotros did console.log(req.file) to meet the details of the file that we are uploading. This will help us configure multer in a more advanced way. We volition also be able to do the filtering on those files.

Now, nosotros can start past sending the request with files on this API. But, before that, we need to make small changes in our HTML code in the index.ejs file.

Open up that file and change the value of the action aspect in the course to '/api/uploadFile'. Likewise, notation the name of the input that we mentioned in the above lawmaking.

            <course              activeness              =              "/api/uploadFile"              enctype              =              "multipart/form-information"              method              =              "POST">   <input              blazon              =              "file"              course              =              "admin__input"              id              =              "myFile"              name              =              "myFile"              />   <input              class              =              "admin__submit"              type              =              "submit"              /> </class>

Merely to brand sure that nosotros are on the same page, here is the land of the app.js file upwardly to now.

app.js

Finally, y'all tin upload a file from your rendered folio. Yous should come across something like this on your last window when you hitting submit.

This is my output. Yours volition be different based on what yous uploaded.

                          {              fieldname:              'myFile',   originalname:              'Terminal Resume.pdf',   encoding:              '7bit',   mimetype:              'application/pdf',   destination:              'public/files',   filename:              '54a87baf681a51490eda5626f495df6c',   path:              'public\\files\\54a87baf681a51490eda5626f495df6c',   size:              2034370              }

Also, note that a new file would already have been created in your files binder under public. Simply, that file won't be readable because there is no extension for that file.

With the information we but got, we will configure multer in a more than complex way so that our files become readable.

Configuring Multer

Now, we can start configuring Multer in a more complex way and nosotros will exercise that in two parts:

Configuring the disk storage and naming the uploaded files.

To do this, replace the previous one-liner code for configuration with this code:

Delete this:

                          //Configuration for Multer                                          const              upload              =              multer({              dest              :              "public/files"              });

At present write this:

                          //Configuration for Multer                                          const              multerStorage              =              multer.diskStorage({              destination              :              (req,              file,              cb) => {              cb(aught,              "public");   },              filename              :              (req,              file,              cb) => {              const              ext              =              file.mimetype.split("/")[1];              cb(null,              `files/admin-              ${              file.fieldname              }              -              ${Date.at present()}              .              ${              ext              }              `);   }, });

Multer has an in-built method called diskStorage and it takes a couple of options. The beginning choice is again the destination, but we cannot merely gear up information technology equally we did before.

The destination option is a callback role that takes three arguments:

req, which is the incoming request object.
file, which is the incoming file object (that we saw in the final a scrap before).
cb, which is again another callback office.

Nosotros call the cb function that takes the 2 arguments. The beginning is error which we are going to pass nada to. The second is the destination binder which is public.

The second pick that this method takes is the filename. It is almost the same equally the destination option except in this, the inner callback function takes the filename as the 2d argument.

So, you lot can see that I have created a unique filename for this using the template string in JavaScript. You can refer to the file object that we logged in to our terminal before. I have taken the extension from the mimetype property of the file object and as well the fieldname.

Congratulations. We take completed the first stride of configuring Multer. Next, we will make a filter to filter out different kinds of files. I will brand a filter to only let the upload of PDF files. You tin can make your own filter by referring to the code beneath:

                          // Multer Filter                                          const              multerFilter              =              (req,              file,              cb) => {              if              (file.mimetype.divide("/")[one]              ===              "pdf") {              cb(zip,              true);   }              else              {              cb(new              Error("Not a PDF File!!"),              imitation);   } };

Now, this piece of code is very unproblematic. Multer filter is simply a office that too has req, file, and a callback function equally its arguments. In this, we will check if the uploaded files are PDFs, if so nosotros volition pass true in the callback office. If it isn't a PDF, we will laissez passer fake along with an fault in the callback office. If you desire to filter out another files like images, yous can do that easily by checking the mimetype of the uploaded files.

The last footstep is to again telephone call the Multer function just at present passing our manually configured multerStorage and multerFilter as options like the lawmaking beneath:

                          //Calling the "multer" Function                                          const              upload              =              multer({              storage              :              multerStorage,              fileFilter              :              multerFilter, });

Save the file to restart the server.

Now, if y'all endeavour to upload a PDF file, you should see that uploaded file (in PDF format) in your files binder under the public directory. But, if you upload whatsoever other file, it will show an fault.

So, we tin can finally see our uploaded file in our disk storage. Merely, if nosotros want to see this file on the front-end, we need to store the proper noun of the file in our database. Since, nosotros have already created the schema for our database, all we have to do is to save the proper name of the file in our route-handler role.

Write the following code inside the uploadFile API endpoint:-

                          // Stuff to be added afterward                            // panel.log(req.file)                                          endeavour              {              const              newFile              =              wait              File.create({              name              :              req.file.filename,   });              res.status(200).json({              status              :              "success",              bulletin              :              "File created successfully!!",   }); }              catch              (error) {              res.json({              error,   }); }

Updated app.js File

app.js3

Know if yous upload a file and striking submit once again, the name of the file will exist saved in your cloud database. To see that, you can go to your cluster at the MongoDB site, and in the collections, you should see something similar the image beneath:

atlas

Notation that, the proper noun of the file in the database should friction match the filename in your disk storage and this is how nosotros can upload a file using Multer every bit a middleware in a node.js application.

View these files on your front-end

The next role of this tutorial is to view these uploaded files on the front-end of your projection. To do this, we have to create another API endpoint to get all the files.

Write the post-obit code in your app.js file:

                          app.get("/api/getFiles",              async              (req,              res) => {              try              {              const              files              =              look              File.detect();              res.condition(200).json({              status              :              "success",              files,     });   }              catch              (error) {              res.json({              status              :              "Fail",              error,     });   } });

At present, all nosotros take to practice is make an API call on this endpoint. I prefer using Axios to practice this. After getting the results, we tin can show these files on our page using some bones HTML code and CSS.

Include this script at the end of your HTML code before closing the <html> tag.

            <script              src              =              "https://unpkg.com/axios/dist/axios.min.js"></script>

I'll include the JavaScript lawmaking later on the HTML but you can create a new JavaScript file and so identify information technology in the public directory the same as your CSS file.

            <script>              const              parentDiv              =              certificate.querySelector(".admin");   window.addEventListener("load",              async              () => {              try              {              let              result              =              wait              axios({              method              :              "GET",              url              :              "/api/getFiles",       });              permit              files              =              result.information.files;              files.forEach((file) => {              markup              =              `                                            <div class="files__entity">                                            <i class="files__icon fa fa-file-text" aria-hidden="true"></i>                                            <span class="files__date">Appointment created:-                            ${              file.createdAt              }              </span>                                            <a href="              ${              file.name              }              " form="files__link"><i class="fa fa-middle tests__icon" aria-hidden="true"></i></a>                                            </div>                                            `;              parentDiv.insertAdjacentHTML("beforeend",              markup);       });     }              grab              (error) {              console.log(error);     }   }); </script>

With this code, nosotros are calling the API endpoint that nosotros created and with the information we receive, we are making entities for each dissimilar file. We too made a link in those entities and set up its value to the name of the file stored in the database. This way, when we click that link, our uploaded file will open in our browser.

CSS Styles

                          *,              *::before              ,              *::after              {              margin:              0;              padding:              0;              box-sizing:              inherit; }              html              {              font-size:              62.5              %;   curlicue-behavior:              smooth; }  .admin              {              margin-left:              50              %;              margin-pinnacle:              7              rem;              transform: translateX(-xxx              %); }  .admin__input              {              border:              none;              background-color:              #41398e;              padding:              one              rem              one.8              rem;              color:              #e2e0e0;              border-radius:              10              rem;              margin-right:              2.5              rem; }  .admin__submit              {              border:              none;              background-color:              #603556;              padding:              1              rem              1.8              rem;              colour:              #e2e0e0;              edge-radius:              x              rem;              cursor:              pointer; }  .admin__submit:focus              {              outline:              none; }  .files__entity              {              background-color:              lightgray;              brandish:              inline              -              cake;              padding:              5              px              10              px;              text-align:              center;              margin-top:              20              px;              font-size:              14              px; }

Conclusion

Congratulations. Yous've uploaded files using Multer and viewed them on the front-terminate. There are also lots of things that we tin can do with Multer, therefore I suggest you lot to check out its documentation here.

If you desire to upload images, resize them according to your needs, in order to salvage space on the server. Nosotros would have to store the images in the buffer storage before storing them in deejay storage.

Happy Coding!

Peer Review Contributions by: Peter Kayere

liebfroople1966.blogspot.com

Source: https://www.section.io/engineering-education/uploading-files-using-multer-nodejs/