Uploading multiple files using formData

Question

var fd   new FormData    fd append  fileToUpload   document getElementById  fileToUpload   files 0    var xhr   new XMLHttpRequest    xhr open  POST    uph php    xhr send fd     uph php   var dump   FILES  fileToUpload       This works  but obviously for the files 0  only  How to get this working for chosen file   I tried removing the  0   but it didn t work

User · Answer

I found this work for me   var fd   new FormData      each     modal-banner  type file     function index  file      fd append  item        input type file    index  files 0           ajax     type   POST     url   your path       data  fd    dataType   json     contentType  false    processData  false    cache  false    success  function  response        console log response          error  function err       console log err          done function          do something         return false

User · Answer

This worked fine    var fd   new FormData        input type  file     on  change   function  e           forEach call this files  function  file            fd append  filename     file                  ajax       url    url to post on       method   post       data  fd      contentType  false      processData  false      success  function  response            console log response             error  function  err            console log err

User · Answer

Adding    when appending to fd works  but if you prefer to have your data grouped by file then I d suggest doing it this way  var files  document getElementById  inpFile   files var fd   new FormData    for  let i   0  i  lt  files length  i        fd append i  files i      Now your data will be sent grouped by file instead of grouped by attribute

User · Answer

Create a FormData object  const formData  any   new FormData      And append to the same keyName  photos forEach   photoInfo    localUri  string  file  File      gt        formData append  file    photoInfo file         and send it to server     angular code this http post url  formData    this will automatically create an array of object under file  if you are using nodejs  const files  File     req files   req files file   null

User · Answer

To upload multiple files with angular form data  make sure you have this in your component html                         Upload Documents                   lt div class  row  gt                       lt div class  col-md-4  gt                        amp nbsp   lt small class  text-center  gt   Driver  Photo lt  small gt                       lt div class  form-group  gt                         lt input   change   onFileSelected  event   profilepic     type  file  class  form-control   gt                       lt  div gt                     lt  div gt                      lt div class  col-md-4  gt                        amp nbsp   lt small gt  Driver ID lt  small gt                       lt div class  form-group  gt                         lt input   change   onFileSelected  event   id     type  file  class  form-control   gt                       lt  div gt                     lt  div gt                      lt div class  col-md-4  gt                       amp nbsp   lt small gt Driving Permit lt  small gt                       lt div class  form-group  gt                         lt input type  file    change   onFileSelected  event   drivingpermit    class  form-control     gt                       lt  div gt                     lt  div gt                   lt  div gt                      lt div class  row  gt                       lt div class  col-md-6  gt                          amp nbsp   lt small gt Car Registration lt  small gt                         lt div class  form-group  gt                           lt div class  input-group mb-4  gt                               lt input class  form-control                    change   onFileSelected  event   carregistration    type  file  gt   lt br gt                           lt  div gt                         lt  div gt                       lt  div gt                        lt div class  col-md-6  gt                           lt small id  li  gt  Car Insurance lt  small gt                         lt div class  form-group  gt                           lt div class  input-group mb-4  gt                             lt input class  form-control   change   onFileSelected  event                              insurancedocs      type  file  gt                           lt  div gt                         lt  div gt                       lt  div gt                      lt  div gt                     lt div style  align-items c  class  modal-footer  gt                       lt button type  button  class  btn btn-secondary  data-                    dismiss  modal  gt Close lt  button gt                       lt button class  btn btn-primary    click   uploadFiles    gt Upload                    Files lt  button gt                     lt  div gt                 lt  form gt    In your componenet ts file declare array selected files like this  selectedFiles            array of selected files  onFileSelected event  type        this selectedFiles push   type  file  event target files 0              in the upload files method  append your form data like this  uploadFiles         const formData   new FormData          this selectedFiles forEach file   gt          formData append file type  file file  file file name                formData append  driverid   this driverid        this driverService uploadDriverDetails formData  subscribe        res   gt            console log res                    error   gt  console log error message               NOTE  I hope this solution works for you friends

User · Answer

Here is the Vanilla JavaScript solution for this issue -   First  we ll use Array prototype forEach   method  as   document querySelectorAll  input type file    returns an array like object    Then we ll use the Function prototype call   method to assign each element in the array-like object to the this value in the  forEach method   HTML   lt form id  myForm  gt        lt input type  file  name  myFile  id  myFile 1  gt       lt input type  file  name  myFile  id  myFile 2  gt       lt input type  file  name  myFile  id  myFile 3  gt        lt button type  button  onclick  saveData    gt Save lt  button gt    lt  form gt    JavaScript   function saveData         var data   new FormData document getElementById  myForm          var inputs   document querySelectorAll  input type file           Array prototype forEach call inputs 0  files  function index           data append  files   index                 console log data getAll  myFile         You can view the working example of the same HERE

User · Answer

You just have to use fileToUpload   instead of fileToUpload    fd append  fileToUpload     document getElementById  fileToUpload   files 0      And it will return an array with multiple names  sizes  etc

User · Answer

This one worked for me   x000D   x000D    Javascript part x000D    file input is a file input id x000D  var formData   new FormData    x000D  var filesLength document getElementById  file input   files length  x000D  for var i 0 i lt filesLength i     x000D   formData append  file     document getElementById  file input   files i    x000D    x000D    ajax   x000D     url   upload php   x000D     type   POST   x000D     data  formData  x000D     contentType  false  x000D     cache  false  x000D     processData  false  x000D     success  function  html    x000D      x000D      x000D      x000D   x000D   x000D     x000D   x000D   lt  php x000D    PHP part x000D   file names     FILES  file    name    x000D  for   i   0   i  lt  count  file names    i      x000D      file name  file names  i   x000D      extension   end explode       file name    x000D      original file name   pathinfo  file name  PATHINFO FILENAME   x000D      file url    original file name    -    date  YmdHis            extension  x000D   move uploaded file   FILES  file    tmp name    i    absolute destination    file url   x000D    x000D   x000D   x000D

User · Answer

The way to go with javascript  var data   new FormData       each    quot input type  file   quot   0  files  function i  file        data append  file   file          ajax       type   POST       url    your url       cache  false      contentType  false      processData  false      data   data      success  function result           console log result              error  function err           console log err             If you call data append  file   file  multiple times your request will contain an array of your files  From MDN web docs    quot The append   method of the FormData interface appends a new value onto an existing key inside a FormData object  or adds the key if it does not already exist  The difference between FormData set and append   is that if the specified key already exists  FormData set will overwrite all existing values with the new one  whereas append   will append the new value onto the end of the existing set of values  quot   Myself using node js and multipart handler middleware multer get the data as follows  router post   trip save   upload array  file   10   function req  res          Your array of files is in req files

User · Answer

This worked for me   let formData   new FormData   formData append  files   file1  formData append  files   file2

User · Answer

You have to get the files length to append in JS and then send it via AJAX request as below    JavaScript  var ins   document getElementById  fileToUpload   files length  for  var x   0  x  lt  ins  x          fd append  fileToUpload     document getElementById  fileToUpload   files x         PHP  count   count   FILES  fileToUpload    name     for   i   0   i  lt   count   i          echo  Name      FILES  fileToUpload    name    i    lt br  gt

[javascript] Uploading multiple files using formData()

Examples related to javascript

Examples related to arrays

Examples related to upload

Examples related to xmlhttprequest