JQuery Ajax uploading a file and other values from client side

Question

I need to upload a file to the server and send a GUID value, both needed to complete an operation.

Is it possible to send both with one $.ajax statement?

Here's a snippet of the Upload action method I'm using

[HttpPost]
public ActionResult Upload()
{
  HttpPostedFileBase file = Request.Files[0];
}

and here's a snippet of the Javascript code I'm using to send the file to the server

function upload() {
  var formData = new FormData();
  var totalFiles = document.getElementById("FileUpload").files.length;

  for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("FileUpload").files[i];

    formData.append("FileUpload", file);
  }

  $.ajax({
    type: 'post',
    url: '/myController/Upload',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) {
      alert('succes!!');
    },
    error: function (error) {
      alert("errror");
    }
  });
}

This code is working well. The file is uploaded as expected but now I need to send a GUID to the same controller (Upload) so I wonder if I can send the GUID with the file in the same $.ajax statement?

Take a look at this http://stackoverflow.com/questions/34603739/jquery-ajax-form-submit-that-contains-files/34604232#34604232 — Shyju, Mar 03 '16 at 21:16
Yes, you can send the strings with the files in the formData, as shown by Rory above, all you need to do is append the data — adeneo, Mar 03 '16 at 21:18

Ashkan Mobayen Khiabani · Accepted Answer · 2016-03-03T21:29:18.850

12

function upload() {
  var formData = new FormData();
  var totalFiles = document.getElementById("FileUpload").files.length;

  for (var i = 0; i < totalFiles; i++) {
    var file = document.getElementById("FileUpload").files[i];

    formData.append("FileUpload", file);
formData.append("guid", theGuid);
  }

  $.ajax({
    type: 'post',
    url: '/myController/Upload',
    data: formData,
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (response) {
      alert('succes!!');
    },
    error: function (error) {
      alert("errror");
    }
  });
}

on server side:

Request.Form["guid"];
Request.Files["FileUpload"];

edited Mar 03 '16 at 21:29

answered Mar 03 '16 at 21:17

Ashkan Mobayen Khiabani

33,575
33
102
171

how do I manage the data sent in the Upload controller? When I check the values of Request.Files in the controller there's only one value "FileUpload" how can I access to the "guid" value appened to the formData? – vcRobe Mar 03 '16 at 21:28
@vcRobe I edited my code, have a look at it – Ashkan Mobayen Khiabani Mar 03 '16 at 21:29
1

Thank you for your quick answer. It works! – vcRobe Mar 03 '16 at 21:32
1

one of the best and very clear answer, also run on MVC Core 2.2 – Nripendra Ojha Nov 15 '19 at 09:35

JQuery Ajax uploading a file and other values from client side

1 Answers1