Cloudinary Blog

Node.js File Upload to a Local Server Or to the Cloud

Node.js File Upload to a Local Server Or to the Cloud

Probably one of the best things to happen to JavaScript developers, Node.js empowers them to write and ship JavaScript on the back end. Thanks to Node.js, front-end developers can become full-stack developers in a snap.

The procedures below describe how to Node.js file upload's to your local server or to the cloud at Cloudinary.

How to Optimize for Page Load Speed

Set Up a Node Project

First, download and install Node.js on your system. Afterwards, set up a Node.js back-end server with a package, such as Express. Do the following:

  1. Create an upload directory and run npm init there to generate a package.json file:

    Copy to clipboard
    npm init
  2. In the same directory, install Express:

    Copy to clipboard
    npm install express --save
  3. Create an index.js file with the code below:

    Copy to clipboard
    const express = require('express')
    const app = express()
    const port = 3000
    
    app.get('/', (req, res) => res.json({ message: 'Hello World!' }))
    
    app.listen(port, () => console.log(`This is the beginning of the Node File Upload App`))
  4. Run the project with the command node index.js.

    Your back-end server is now up and running.

    upload

    Afterwards, multer creates an images directory in which to display the details of the recently uploaded file in your console. See this example:

    node upload

    For simultaneous multiple file uploads, just change fileUpload.single to fileUpload.array:

Copy to clipboard
...
app.post('/photos/upload', fileUpload.array('image', 5), function (req, res, next) {
      console.log("Images ", req.file);  
})

5 above can be any numeric value, denoting the number of files you plan to upload.

Step 2: Set up file uploads to Cloudinary

Completing step 1 enables you to upload files to your local server. For multiple files, best store them in a central location like Cloudinary and behind a content delivery network (CDN) at scale for efficient retrieval and delivery to users.

This step establishes the mechanics for uploading files to Cloudinary.

As a prerequisite, sign up for a free account on Cloudinary. Note your cloud name and API keys on the dashboard.

media library

Now do the following.

  1. Rewrite multer to accept zero arguments:

    Copy to clipboard
    const fileUpload = multer()

    Instead of being written to a local directory, the uploaded files now reside in memory temporarily as a buffer.

  2. Install Cloudinary’s Node.js SDK and the streamifier library:

    Copy to clipboard
    npm install cloudinary 
    npm install streamifier
  3. Make the cloudinary and streamifier required libraries in your codebase:

    Copy to clipboard
    ...
    const cloudinary = require('cloudinary').v2
    const streamifier = require('streamifier')
    ...
  4. Rewrite the /upload endpoint code to upload files to Cloudinary:

    Copy to clipboard
    app.post('/upload', fileUpload.single('image'), function (req, res, next) {
    let streamUpload = (req) => {
        return new Promise((resolve, reject) => {
            let stream = cloudinary.uploader.upload_stream(
              (error, result) => {
                if (result) {
                  resolve(result);
                } else {
                  reject(error);
                }
              }
            );
    
           streamifier.createReadStream(req.file.buffer).pipe(stream);
        });
    };
    
    async function upload(req) {
        let result = await streamUpload(req);
        console.log(result);
    }
    
    upload(req);
    });

Recall that you rewrote multer earlier to process and store uploaded files temporarily as a buffer. streamifier now converts the uploaded buffer to a readable stream, after which Cloudinary’s upload_stream method streams directly to the cloud.

The returned result looks like this, complete with the details on the recently uploaded file:

node.js index

Now you can fetch the URL from the JSON response and store it in the database. Mission accomplished.

A Word About Cloudinary’s Node.js SDK

Besides uploading images and videos, Cloudinary’s Node.js SDK can also transform, optimizatize, and deliver them. You can seamlessly integrate those capabilities with your Node.js app. For details, see the related documentation.

Want to Learn More About File Uploads?

Recent Blog Posts

Overlaying Glasses Or Masks on Avatars With Vue.js and Cloudinary

Deep learning, a subset of machine learning, breaks down tasks in ways that make all kinds of machine assists possible. With deep learning, you can identify images by machine, i.e., instead of hand-coding software with specific instructions for a task, you train the machine with large amounts of data and algorithms that enable it to learn how to perform the task.

Read more
On-Demand Viewing of Live Video Presents New Opportunities

In early 2020, Cloudinary was planning its fourth annual ImageCon conference, a two-day event in the heart of San Francisco, where we’d congregate with curious digital-media minds to brainstorm best practices for media management. Instead, the COVID-19 pandemic forced the entirety of ImageCon 2020 online. As with all other events being planned, we had to overhaul the content to be communicated on video. Gratifyingly, we found the right partner—the event platform Bizzabo—to turn that into a reality.

Read more
Why the Future of E-commerce Is Live

In a previous post, I discussed how “going live” is gaining popularity across industries and verticals. What began as a way for gamers to jam together has evolved into a medium for broader entertainment and business purposes. To continue the conversation, this post unpacks the current trends of shoppable live streams to shine a light on how brands are leveraging “lives” to connect with shoppers in new ways.

Read more
An Overview of Live-Streaming Video Trends

“Let’s go live.” For decades, that’s what newscasters say as they cut to real-time footage of a colleague reporting in the field. The live-video feed adds visual interest and perspective to a story beyond what can be communicated by someone sitting behind the news desk. In the same way, live-streaming video nowadays adds context to other consumer environments. From gaming and events to shopping and social media, “going live” enhances everyday experiences, and it’s something anyone can do with relative ease.

Read more