Node Express file upload

Question

I m using node v0 10 26 and express v4 2 0 and I m pretty new to node   I ve been beating my head against my desk for the past three or so hours trying to get a file upload form working with node   At this point I m just trying to get req files to not return undefined  My view looks like this   lt  DOCTYPE html gt   lt html gt   lt head gt     lt title gt    title    lt  title gt     lt link rel  stylesheet  href   stylesheets style css    gt   lt  head gt   lt body gt     lt h1 gt    title    lt  h1 gt     lt p gt Welcome to    title    lt  p gt     lt form method  post  action  upload  enctype  multipart form-data  gt       lt input type  file  name  fileUploaded  gt       lt input type  submit  gt     lt  form gt   lt  body gt   lt  html gt    Here are my routes  var express   require  express    var router   express Router         GET home page     router get      function req  res      res render  index     title   Express           router post   upload   function req  res   console log req files        module exports   router    And here s my app js  var express   require  express    var path   require  path    var favicon   require  static-favicon    var logger   require  morgan    var cookieParser   require  cookie-parser    var bodyParser   require  body-parser     var routes   require    routes index    var users   require    routes users     var app   express        view engine setup app set  views   path join   dirname   views     app set  view engine    hjs     app use favicon     app use logger  dev     app use bodyParser json     app use bodyParser urlencoded     app use cookieParser     app use express static path join   dirname   public       app use      routes   app use   users   users        catch 404 and forward to error handler app use function req  res  next        var err   new Error  Not Found        err status   404      next err            error handlers     development error handler    will print stacktrace if  app get  env        development         app use function err  req  res  next            res status err status    500           res render  error                 message  err message              error  err                           production error handler    no stacktraces leaked to user app use function err  req  res  next        res status err status    500       res render  error             message  err message          error                    module exports   app    I saw somewhere that including methodOverride   and bodyParser  keepExtensions true uploadDir path   was supposed to help but I can t even launch my server if I add those lines

User · Answer

Personally multer didn t work for me after weeks trying to get this file upload thing right  Then I switch to formidable and after a few days I got it working perfectly without any error  multiple files  express and react js even though react is optional  Here s the guide  https   www youtube com watch v jtCfvuMRsxE amp t 122s

User · Answer

Another option is to use multer  which uses busboy under the hood  but is simpler to set up   var multer   require  multer      Use multer and set the destination for the upload   app use multer  dest    uploads         Create a form in your view  enctype  multipart form-data is required for multer to work   form role  form   action      method  post   enctype  multipart form-data       div class  form-group           label Upload File         input type  file   name  myfile   id  myfile     Then in your POST you can access the data about the file   app post      function req  res      console dir req files         A full tutorial on this can be found here

User · Answer

I needed to be walked through with a bit more detail than the other answers provided  e g  how do I write the file to a location I decide at runtime     Hopefully this is of help to others  nbsp  nbsp   get connect-busboy   npm install connect-busboy --save   In your server js  add these lines  let busboy   require  connect-busboy             app use busboy               app post   upload   function req  res        req pipe req busboy       req busboy on  file   function fieldname  file  filename            var fstream   fs createWriteStream    images     filename            file pipe fstream           fstream on  close   function                  res send  upload succeeded                               This would seem to omit error handling though    will edit it in if I find it

User · Answer

Here is a simplified version  the gist  of Mick Cullen s answer -- in part to prove that it needn t be very complex to implement this  in part to give a quick reference for anyone who isn t interested in reading pages and pages of code     You have to make you app use connect-busboy   var busboy   require  connect-busboy    app use busboy       This will not do anything until you trigger it  Within the call that handles uploading  do the following   app post   upload   function req  res        if req busboy            req busboy on  file   function fieldName  fileStream  fileName  encoding  mimeType                  Handle file stream here                     return req pipe req busboy               Something went wrong -- busboy was not loaded       Let s break this down    You check if req busboy is set  the middleware was loaded correctly  You set up a  file  listener on req busboy You pipe the contents of req to req busboy   Inside the file listener there are a couple of interesting things  but what really matters is the fileStream  this is a Readable  that can then be written to a file  like you usually would   Pitfall  You must handle this Readable  or express will never respond to the request  see the busboy API  file section

User · Answer

I find this  simple and efficient   const express   require  express    const fileUpload   require  express-fileupload    const app   express        default options app use fileUpload      app post   upload   function req  res      if   req files    Object keys req files  length     0        return res status 400  send  No files were uploaded               The name of the input field  i e   sampleFile   is used to retrieve the uploaded file   let sampleFile   req files sampleFile        Use the mv   method to place the file somewhere on your server   sampleFile mv   somewhere on your server filename jpg   function err        if  err        return res status 500  send err        res send  File uploaded                 express-fileupload

User · Answer

const http            require  http    const fs              require  fs        https   www npmjs com package formidable const formidable      require  formidable        https   stackoverflow com questions 31317007 get-full-file-path-in-node-js const path            require  path     router post   upload    req  res    gt        console log req files        let oldpath   req files fileUploaded path          https   stackoverflow com questions 31317007 get-full-file-path-in-node-js            let newpath   path resolve       req files fileUploaded name              copy        https   stackoverflow com questions 43206198 what-does-the-exdev-cross-device-link-not-permitted-error-mean     fs copyFile  oldpath  newpath   err    gt             if  err  throw err              delete         fs unlink  oldpath   err    gt                 if  err  throw err               console log  Success uploaded quot

User · Answer

Multer is a node js middleware for handling multipart form-data  which is primarily used for uploading files  It is written on top of busboy for maximum efficiency   npm install --save multer   in app js      var multer      require  multer        var storage   multer diskStorage         destination  function  req  file  callback            callback null     public uploads                   filename  function  req  file  callback            console log file           callback null  Date now    -  file originalname                       var upload   multer  storage  storage   single  photo         router route   storedata   post function req  res  next            upload req  res  function err              if err                console log  Error Occured                return                        var userDetail   new mongoOp User                name  req body name               email  req body email               mobile  req body mobile               address  req body address                          console log req file              res end  Your File Uploaded              console log  Photo Uploaded               userDetail save function err result             if  err                return console log err                        console log  saved to database                               res redirect

User · Answer

ExpressJS Issue   Most of the middleware is removed from express 4  check out  http   www github com senchalabs connect middleware For multipart middleware like busboy  busboy-connect  formidable  flow  parted is needed   This example works using connect-busboy middleware   create  img and  public folders  Use the folder structure    server js   img  where stuff is uploaded to    public index html  SERVER JS  var express   require  express         Express Web Server  var busboy   require  connect-busboy      middleware for form file upload var path   require  path          used for file path var fs   require  fs-extra            File System - for file manipulation  var app   express    app use busboy     app use express static path join   dirname   public                                                                      Create a Route   upload  to handle the Form submission   handle POST requests to  upload  Express v4  Route definition                                                                 app route   upload        post function  req  res  next             var fstream          req pipe req busboy           req busboy on  file   function  fieldname  file  filename                console log  Uploading      filename                  Path where image will be uploaded             fstream   fs createWriteStream   dirname     img     filename               file pipe fstream               fstream on  close   function                          console log  Upload Finished of     filename                                 res redirect  back                where to go next                                      var server   app listen 3030  function         console log  Listening on port  d   server address   port         INDEX HTML   lt  DOCTYPE html gt   lt html lang  en  ng-app  APP  gt   lt head gt       lt meta charset  UTF-8  gt       lt title gt angular file upload lt  title gt   lt  head gt    lt body gt           lt form method  post  action  upload  enctype  multipart form-data  gt           lt input type  file  name  fileUploaded  gt           lt input type  submit  gt    lt  body gt   lt  html gt    The following will work with formidable SERVER JS  var express   require  express        Express Web Server  var bodyParser   require  body-parser      connects bodyParsing middleware var formidable   require  formidable    var path   require  path          used for file path var fs  require  fs-extra         File System-needed for renaming file etc  var app   express    app use express static path join   dirname   public                                                                       bodyParser   required to allow Express to see the uploaded files                                                                 app use bodyParser  defer  true      app route   upload     post function  req  res  next       var form   new formidable IncomingForm          Formidable uploads to operating systems tmp dir by default     form uploadDir      img           set upload directory     form keepExtensions   true        keep file extension      form parse req  function err  fields  files            res writeHead 200    content-type    text plain             res write  received upload  n n            console log  form bytesReceived              TESTING         console log  file size    JSON stringify files fileUploaded size            console log  file path    JSON stringify files fileUploaded path            console log  file name    JSON stringify files fileUploaded name            console log  file type    JSON stringify files fileUploaded type            console log  astModifiedDate    JSON stringify files fileUploaded lastModifiedDate               Formidable changes the name of the uploaded file           Rename the file to its original name         fs rename files fileUploaded path     img   files fileUploaded name  function err            if  err              throw err            console log  renamed complete                            res end                var server   app listen 3030  function     console log  Listening on port  d   server address   port

User · Answer

If you are using Node js Express and Typescript here is a working example  this works with javascript also  just change the let to var and the import to includes etc     first import the following make sure you install formidable by running the following command   npm install formidable   than import the following     import   as formidable from  formidable     import   as fs from  fs     then your function like bellow       uploadFile req  res        let form   new formidable IncomingForm        form parse req  function  err  fields  files            let oldpath   files file path          let newpath    C  test     files file name          fs rename oldpath  newpath  function  err                if  err  throw err              res write  File uploaded and moved                 res end

User · Answer

Here is an easier way that worked for me   const express   require  express    var app   express    var fs   require  fs     app post   upload   async function req  res       var file   JSON parse JSON stringify req files      var file name   file file name      if you want just the buffer format you can use it   var buffer   new Buffer from file file data data       uncomment await if you want to do stuff after the file is created      await     fs writeFile file name  buffer  async err    gt         console log  Successfully Written to File              do what you want with the file it is in    dirname         file name       console log  end         new Date         console log result stt            fs unlink   dirname         file name       gt          res send result stt

[node.js] Node/Express file upload

Examples related to node.js

Examples related to file-upload

Examples related to express