3

I'm trying to use input file with multiple attribute and to have the formData split so I would have a formData isnatce for each file in the multiple file element.

HTML

<input type="file" name="file" multiple></label>

JS

new FormData(formElement) // <--- Need to have this for each file selected

I need this because I'm using Cloudinary API and they only accept one file at a time, so I need to send multiple Ajax requests and for each, I need formData instance for each of the files selected, but the problem is, FormData accepts as an argument the how form element, and I cannot separate the files.

DEMO PAGE

3
  • Are you trying to call $.ajax() for each file selected? Note, second parameter to FormData.prototype.append() should be data to be set, third parameter is file name, if any Commented Oct 23, 2016 at 19:14
  • It seems Cloudinary API REST is expecting FormData to be instantiated only with the form which is the DOM form element... Commented Oct 23, 2016 at 19:19
  • See github.com/cloudinary/pkg-cloudinary-core#installation , cloudinary.com/blog/… Commented Oct 23, 2016 at 20:20

2 Answers 2

3

You can use $.when(), $.map() to append each File of <input type="file"> FileList to new FormData instance, then call $.ajax() for each FormData() instance.

Note, substituted .on() for onsubmit event attribute. Without required attribute or a default .value set name="cloud_name" and name="upload_preset" <input type="text"> elements .value could be an empty string when form submit event occurs.

$(function() {
  var form = $("form");
  form.on("submit", function(e) {
    e.preventDefault();
    var cloudName = $('input[name="cloud_name"]').val(),
      presetName = $('input[name="upload_preset"]').val(),
      URL = "https://api.cloudinary.com/v1_1/" + cloudName + "/image/upload",
      input = form.find("[name=file]");

    $.when.apply($, $.map(input[0].files, function(file, index) {
      var data = new FormData(form[0]);
      data.append("upload_preset", file, file.name);
      return $.ajax({
        type: 'post',
        url: URL,
        data: data,
        processData: false,
        contentType: false,
        cache: false
      });
    }))
    .then(function(response) {
      console.log(response)
    })
    .catch(function(err) {
      console.log(err)
    })
  })
})

plnkr http://plnkr.co/edit/7l0obsusqXVlommdd49L?p=preview

Sign up to request clarification or add additional context in comments.

13 Comments

yes obviously.. but this is not what I need, as I said, to create multiple instances of FormData, and you are creating only one. I cannot use this since Cloudinary doesn't support this. also, out of curiosity, I have tested it, and it does not work. do you have experience with Cloudinary unsigned uploads?
I have a response from their support confirming this
@vsync Ah, passed jQuery object. Should be new FormData(form[0]) to get DOM element plnkr.co/edit/7l0obsusqXVlommdd49L?p=preview
Araz gave me the actual clue I wanted and I made it work, but thank you SO MUCH for helping!!!!
it's an images hosting service that lets you do tons of image manipulations simply by modifying the url. it's like imageMagic / GD2 but as SaaS product. I didn't know I could instantiate formData without any parameters and then fill it up with the files manually, for some reason i was stuck with the thought that the form had to be passed as a parameter.. I blame myself for not thinking out-of-the-box no this one.
|
2

Each time you make a formData object you can append to it data like this:

data.append("file", document.getElementById(file).files[0]);

but instead of 0 in for loop you can put loop index and send data to ajax.

and you should initialize data by following :

 var data = new FormData();

2 Comments

yes but how do I iterate form.file.files ? it's not a "real" array, loops and Array methods don't apply to it
i think if you use getElementById you can access like array see this: stackoverflow.com/questions/17400191/…

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.