Can I have multiple upload fields on the same page?

In order to have multiple file input fields in one page you should specify different drop zones. Initiating the file input fields using the jQuery plugin should work regularly (if you have the cloudinary-fileupload default class).

Here's an example:

<div class="form_line">
  <label for="photo_image">Image:</label>
      <input class="cloudinary-fileupload" data-cloudinary-field="photo[image]" data-form-data="..." name="file" type="file"></input>
    <span class="status"></span>
  </div>
</div>
<div class="form_line">
  <label for="photo_image">Image 2:</label>
      <input class="cloudinary-fileupload" data-cloudinary-field="photo[image2]" data-form-data="..." name="file" type="file"></input>
    <span class="status"></span>
  </div>
</div>
$(".cloudinary-fileupload").each(function() {
  var field = $(this);
  var line = field.parents('.form_line');
  field.fileupload({ 
    dropZone: line,
    start: function (e) {
      $(line).find(".status").text("Starting upload...");
    },
    progress: function (e, data) {
      $(line).find(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
    },
    fail: function (e, data) {
      $(line).find(".status").text("Upload failed");
    }
  });
});

We'll soon add support to integration with multiple input fields that are handled by server-side development frameworks.

Have more questions? Submit a request

Comments

  • Avatar
    Dzmitry Vensko

    Is it possible to upload multiple files at once via a HTTP request?

  • Avatar
    Richard Gieg

    In order to upload multiple files, the images will need to be uploaded one-by-one. This can also be done in parallel using multi-threading.

Powered by Zendesk