DEV Community

abhigsri
abhigsri

Posted on

1 1

Image file/files upload with multer, node and express

A simple and complete file upload without the intervention of html file type

Hey guys just wanted to share with you the stuff on which I have been working on recently.
I have been trying to upload an image with node server and get it done with multer.
I know that it is quite easy as it is available with all the details when you search this on Google.

So why I am writing this post🤔
As I had a requirement in which an image or more than one image needed to download from other server and then needed to upload it all on node server which does not have the intervention of html form and file type, So the solution for the given scenario is as given below.

Client

var data;
var xhr = new XMLHttpRequest();
var imgUri = "https://cors-anywhere.herokuapp.com/https://nodejs.org/static/images/logos/nodejs-new-pantone-black.png";  // your image url which you needed to download first
xhr.open("GET", imgUri);
xhr.responseType = "blob";  // just make sure you get the blob type in response
xhr.onload = function() {
  data = xhr.response;
  uploadImage(data);
}
xhr.send();

function uploadImage(blobImg) {
  // console.log(blobImg);

  var imgData = new FormData();  // create a new form data
  imgData.append("image", blobImg, "node_icon.png");

  // append single image blob for single multer upload, append more images with the same feild name for array upload
  // do not forget to provide the file name while appending the form data, otherwise it will be uploaded as blob file which further needed a conversion 

  //call your node server api here and send the imgData
  var uri = encodeURI("node server api to upload with multer");
  $.ajax({
    url: uri,
    data: imgData,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    error: function(err) {
      console.log('AJAX ERROR: ' + err);
      //handle the error response if any
    },
    success: function(result) {
      //handle the success response here if any
    }
  });
}

Node Server
Multer

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

var storage = multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, '/tmp/my-uploads')
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now())
  }
});

var upload = multer({ storage: storage }).single('image'); // just make sure field name should be same as client form data field name

// To upload multiple image 
//var upload = multer({ storage: storage }).array('images', maxCount);
// req.files is array of `images` files
// maxCount files could be uploaded 

app.post('/uploads', function (req, res) {
  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      // A Multer error occurred when uploading.
    } else if (err) {
      // An unknown error occurred when uploading.
    }

    // Everything went fine.
  })
})

Conclusion
In this article I have tried to cover it all which is essential to complete the task and you learn how to download/upload an image/file with node server which require the javascript knowledge nothing else.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series