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.
Comments
2 comments
Is it possible to upload multiple files at once via a HTTP request?
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.
Please sign in to leave a comment.