Upload file with multer in Nodejs

#react #javascript #node

Upload file in Nodejs with multer

In this arcticle, I want to show you how can I upload file in Nodejs with multer. And I using react for front-end. Now, let's started.

Backend

Making new folder :

    mkdir upload-file
    cd upload-file

Create new package.json :

    upload-file >  npm init -y

Libary what we need for backend

   upload-file > npm i -s express multer uuid morgan

Libary	Description
express	Creating server
multer	Working with file in express
uuid	Creating guid for new name file
morgan	Logger middleware server

Create new file server.js in root folder :

    upload-file > touch server.js

Ok ! Now, we are going to setup server in nodejs :

    const express = require("express");
    const app = express();
    const multer = require("multer");
    const uuid = require("uuid");
    const morgan = require("morgan");
    const path = "./uploads";

    const storage = multer.diskStorage({
        destination: (req, file, cb) => {
            cb(null, path);
        },
        filename: (req, file, cb) => {
            cb(null, uuid.v4().toString() + "_" + file.originalname);
        }
    });

    const fileFilter = (req, file, cb) => {
        if (file.mimetype === "image/jpeg" || file.mimetype === "image/png") {
            cb(null, true);
        } else {
            cb("Type file is not access", false);
        }
    };

    const upload = multer({
        storage,
        fileFilter,
        limits: 1024 * 1024 * 5
    });

    app.use(morgan("dev"));
    app.use(express.json({ extented: false }));

    const PORT = process.env.PORT || 5000;
    app.listen(PORT, () => console.log(`Server is running in port ${PORT}`));

Ok, now we are going to setup for server and client start in one command. If we do that, we are going to add new library :

   npm i -D conccurently

Edit package.json in backend :

    "scripts": {
        "start": "node server.js",
        "server": "nodemon server.js",
        "client": "npm start --prefix client",
        "dev": "concurrently \"npm run server\" \"npm run client\""
    },

Client

Add library axios for working with RESTful Api and making beautiful web with bootstrap in React :

    npm i -s axios bootstrap

Go to package.json in client and add proxy config in last file. That is will make easy work with RESTful, so we don't need everytime we declare "http://localhost:5000/api/name" but when using this case we just need "/api/name" :

    "proxy" : "http://localhost:5000"

Then, rewriting file App.js in client folder:

    import React, { Component } from "react";
    import "bootstrap/dist/css/bootstrap.min.css";
    import axios from "axios";

    class App extends Component {
        state = {
            title: "",
            file: ""
        };

        handleOnChange = e => this.setState({ [e.target.name]: e.target.value });

        handleOnUploadFile = e => this.setState({ file: e.target.files[0] });

        handleOnSubmit = e => {
            e.preventDefault();
            const formData = new FormData();
            formData.append("title", this.state.title);
            formData.append("file", this.state.file);
            axios
            .post("/api/post", formData)
            .then(res => console.log(res.data))
            .catch(err => console.error(err));
        };

        render() {
            return (
                <div className="container">
                    <h1>Upload file in nodejs</h1>
                    <form onSubmit={this.handleOnSubmit} className="w-50">
                    <div className="form-group">
                        <input
                        type="text"
                        name="title"
                        value={this.state.title}
                        autoComplete="off"
                        className="form-control"
                        onChange={this.handleOnChange}
                        />
                    </div>
                    <div className="form-group">
                        <input
                        type="file"
                        name="file"
                        accept="image/*"
                        onChange={this.handleOnUploadFile}
                        />
                    </div>
                    <button type="submit" className="btn btn-danger">
                        Submit
                    </button>
                    </form>
                </div>
            );
        }
    }

    export default App;

Result :

And finally, we are going to upload multiple file. I will change a little file App.js :

    state = {
        title: "",
        files: ""
    };
    //...
    handleOnUploadFile = e => this.setState({ files: e.target.files });
    //...
    handleOnSubmit = e => {
        e.preventDefault();
        const formData = new FormData();
        for (const name in this.state) {
            if (name === "files") {
                for (let i = 0; i < this.state.files.length; i++) {
                    formData.append(name, this.state.files[i]);
                }
            }
            formData.append(name, this.state[name]);
        }
        axios
        .post("/api/posts", formData)
        .then(res => console.log(res.data))
        .catch(err => console.error(err));
    };
    ///...
    render() {
        return (
            ///...
            <div className="form-group">
                <input
                type="file"
                name="file"
                accept="image/*"
                onChange={this.handleOnUploadFile}
                multiple
                />
            </div>
            ///...
        )
    }

Result image :

And just like that. If I wrong something, please comment for implement this article. And one more, I just know a little English, so please sympathize with me.
This is link github repo upload-file-in-nodejs
Thanks for reading !
Have a good day !