Running project:

to run the project. Visit localhost:3000 to view the app. Select the file and check the uploads folder. Your file must be present there!

Explanation :

In our Server.js file, we have configured multer. We have made custom middle-ware function to choose the storage engine which is Disk because we want files to store in disk and appending the file name with current date just to keep the uniqueness of files.

Hi, thanks a lot for this post, but I’m hoping that you guys can answer a question for me, I’m currently using multer, but a need a way to upload files to different directories. For example images to ‘uploads/img’, pdf files to ‘uploads/pdf’ and so on. Thanks again.

Hi Juan,
By default this feature is not available. You need to create multiple instance of multer for different file types and in each instance define the destination. Hope this snippet trigger the idea.

my English is bad. If use app.use(express.bodyParser()) and before insert app.use(multer({/*…*/})), you example dont work. Or at the beginning
insert app.use(multer({/*…*/})) and before app.use(express.bodyParser()), how to close connection with client.

Hi man. Thanks for this tuto, it’s great. However it seems the form uploads the file even if you don’t call /api/photo. I mean, if you change the action of the form to anything, like “http://myserver”, it will upload the file anyway. So it’s not respecting the routes. Any idea why this is happening? Thanks!

Nice tutorial….,
I created multiple instance of multer for different file types and each instance defined specific destination but I am also using json web tokens for authentication. In this case i am getting TypeError: Cannot read property ‘token’ of undefined. Is it possible to use both different multers and json webtokens? but Whenever upload all files into single destination i didn’t get any error.

First of all, thanks for your tutorial. But I’m trying to use it and it doesn’t work. In my case, I don’t have the upload form in the index page, but in a secondary page (located in a directory, ‘partials/upload.jade’, I use Jade for make my pages) I also use AngularJS… Should it be a problem? I follow all your tutorial step by step, the only difference is what I have mentioned.

There’s also a problem: if I add “method=’POST'” to the form, it appears a message saying me “Cannot GET /api/uploadFile?”. If not, the browser doesn’t charge anything.

Another thing to say is that I have my APIs in a separate page, but once again it shouldn’t be a problem if I have the upload API with a direct callback function in the main file, am I wrong? Because I need the “done” boolean I guess.

Thank you again and sorry for the double post, I thought that it wasn’t sent!

It still doesn’t work. But now I’ve discovered that any of my POST APIs work when I configure Multer, and I don’t know why (I have a form to add data to the database, and in normal conditions it works, but when I add your code to configure Multer I can’t do it).

Nice tutorial, but I’m trying to follow your steps and I’m not able to upload files. When I click the Upload button, the browser tells me “Cannot GET /api/uploadFile?”. I have more APIs in my project, and all of them work without problems (I have tried with another ones in that form and they work). What could happen? Multer is configured as you did and I’ve put the “api/uploadFile” line (the name I’ve used) in the same way as you.

It still doesn’t work. But now I’ve discovered that any of my POST APIs work when I configure Multer, and I don’t know why (I have a form to add data to the database, and in normal conditions it works, but when I add your code to configure Multer I can’t do it).

Hi ! Thanks for this tutorial. I have a question to ask you =)
I would want to upload a form containing a video file and parameters, such as :
“formData.append(‘media_format’, extension);
formData.append(‘media’, blob);
formData.append(‘mediaid’, id);”
But I can’t seem to find where in your code I could put those infos. Is this automatically taken care of when you send the form from your .html client file to your .js server file ?

thanks for great tutorial. Got everything working with one exception.
I’m printing req.files with console.log and it’s returning only { userPhoto:
and nothing else from the array. If I try to print directly other item from the array, it returns undefined. Any idea why is it doing this?

Thanks for the tutorial, it really helped. I have a question, hopefully you can help me out.

From what I’m seeing, ‘done’ is a global variable, right? If you have multiple users uploading files at the same time, will the variable be set to true as soon as the first upload finishes? Wouldn’t that affect the other users?

i do see file gets uploaded successfully,
BUT never hits onFileUploadStart, onFileUploadComplete. Webpage just keeps on waiting and never hits if(done==true)
& file extension is also missing
Any help appreciated.

Hey, i think i got where you are confused with. done == true is hitting and that is why console is printing req.files object. About res.end, you can see that in browser console cause we are not rendering our pages from Node script. We used res.sendFile to send HTML page to browser.

Thanks for the tutorial, it really helped. I have a question, hopefully you can help me out.
my question is how to create file uploading in node js but one think is there register user are id used to folder name to create server site.there folder name is updeted user id for the folder.plz help me.

ya sir i need new folder created in each user id to save in the mongoose in mongodb to fech this id and create folder in node.js server side.
i am created new registration form to used in restful api in this registration are complited it will genrat on id this id are fech in server side and newly create folder in server.
ex. user/uploads/123(id fech in mongodb)
user/uploads/124
plz help me…

After you submit the file successfully to node server, you need to return back the response with file path which you can access in req.files.path variable. And in UI, upon recieving success response, show that path using tag. That’s it.

After you submit the file successfully to node server, you need to return back the response with file path which you can access in req.files.path variable. And in UI, upon recieving success response, show that path using tag. That’s it.

Hey shahid,
Nice work there.
I wonder you could guide me how to handle errors which come when file size is exceeded and also when the format is incorrect. I also want to send an error response to client when the above errors occur. I knew my way around before multer 1.1.0. Please guide me how to do this in multer 1.1.0. I can’t seem to find a way out.
Thanks.

Hey shahid,
Nice work there.
I wonder you could guide me how to handle errors which come when file size is exceeded and also when the format is incorrect. I knew my way around before multer 1.1.0. Please guide me how to do this in multer 1.1.0. I can’t seem to find a way out.
Thanks

Hey Shahid,
Kudos to you and the codeforgeek for doing such an awesome job to help newbies like us out.
I did as you told but have run into a new problem.
The limits option does not seem to work.
I have handled the error in the function inside the route(‘/dp’ is my action for uploads)
When I upload a large file, the response “SIZ” is send after a long time proportional to the size of the file being uploaded indicating that upload is not being aborted and limits is failing. Am I missing something here?
My upload object definiton.
var maxSize = 1 * 1024 * 1024;
var upload = multer({ dest: ‘./bin/uploads/’,
limits: {
fileSize: maxSize,
files: 1
},

Hello shahid i have problem in node.js.
I am trying to build an web based application, wherein i take the snapshots of my sites visitors and store them in database( for now its simply a folder ). Server side is controlled with node.js. But the problem is, if i have a image with name say “xyz.png” and if i again try to put a image with the same name in the same folder, latter image gets appended with the previous one (“xyz.png”). The only thing happens is that the size of latter image increases.
Its happening because i am appending the images to the folder content (because i am using opening it with ‘a’ flag).
This is the piece of code:
//fileName is the image name that i want to store
fs.open(fileName, ‘a’, 0755, function(err, fd) {
if (err) throw err;

fs.write(fd, buffer, null, ‘Binary’, function(err, written, buff) {
fs.close(fd, function() {
console.log(‘File saved successful!’);
});
})
});
Is there any other way of doing this thing. As i don’t want to loose my previous content of the folder.

Hi, great Application ! Just one question, Is possible to use this application on same port of another application ? I need to use my application that works on port 8888 and this application oh the same port, but when I try, I have a javascript error (TypeError: status is not a function)

thank you for the tutorial..
im making rest api with nodejs.
and i use this turorial for uploading, but i just want to have the path of the uploaded files stored on mongodb, how to do it? pls help thanks

can u tell me how i will get the file i upload, to be displayed in the client side, from mongodb. (im assuming i have to take the path of the files, and put it into the datbase) but i still kinda confuse of that, can u give me the simple tutorial/example?

but, how the client can get to the folder that i stored my files to, my server and the client has different origin. since the req.file.path wil only return ../”folder upload”/”filename”
how the clinet can use this path to access the files.
im assuming this has something with express.static(path) ,but i dont really understand, can u explain this ? thankyou

Thank you for the tutorial, Could you explain if I can use multer for below scenario and if Yes, where should i specify destination host name and port?
If I want to upload a file from my machine to a different machine where the application is hosted(server), will I be able to do it using multer. I mean I will host a web application on machine one which serves as server and i will access it through the browser of machine 2 which is client. I will upload a file from machine 2 , but it should get uploaded to the server(machine 1).

Hi , Please help me here …….I want to upload diffrent extension files like .txt or excel….. and give path of directory at run time where i hv to upload that file….. can you plz help me …plz comment as soon as possible

Thanks for this nice post on uploading files in express js.
But, a question that i faced, is that if I use other input fields along with file field my file is uploaded but the other input data from the form can not be retrieved, It is showing undefined. What is the problem, Can you please answer?

This tutorial works great on my local machine. I’m trying to get it to work on my server. I get all the data back with no errors when I upload but the files don’t actually store. Is there a setting in nginx config that I’m missing?

Thanks so much for your tutorial! There were some oddities, going through it, but in the end I was able to figure everything out that I wanted. I whipped up a system that restricts by file type and size, and checks for a file of the same name before writing to disk. If it’s there, it renames it. Here’s my code for anyone interested (and yes, I realize my renamePng function is redundant.):

I still have a question: I’m uploading an image and I get it without an extension, so when I try to open it with a double click, I’m getting some weird characters. I also tried to open in in a browser using html but I’m still getting a broken image.

Hi,
How can i access the file name inside my app.post().
I want to access the file name and store it in db so how can i get the files name ?? I need the filename that the multer used not the name by which user uploaded.