Images are automatically uploaded upon selection. How can I disable it? – Cloudinary Support

The default implementation indeed automatically uploads a file once selected. Most of our customers don't bother with deleting accidentally uploaded images as they don't take a lot of extra storage. However, if you wish not to upload the image automatically on selection, you can set the autoUpload parameter to false in the fileupload call.

For example, you can use something like the following flow:

Initiate a Cloudinary file upload:

var cldFU = $('#fileMultipleRead').cloudinary_fileupload(options);

Set autoUpload to false (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#autoupload), e.g.,

$(document).ready(function() {
  $('.cloudinary-fileupload').cloudinary_fileupload({
    autoUpload: false
  });
});

Capture file additions with the add callback (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#add):
```
cldFU.bind('fileuploadadd', function (e, data) {/* store data somewhere - called for each file added */});
```
Perform any additional processes that you require with the added files.
Upload files with data.submit(). This is the data received on the add callback.
- Note that data.submit() bypasses invalidations, so the workaround is to add the parameter processalways to the .cloudinary_fileupload call.
- More info here: https://support.cloudinary.com/hc/en-us/articles/202520722-How-to-display-error-messages-when-client-side-validation-fails-

$('#fileMultipleRead').bind('fileuploadadd', function (e, data) {
....
....
var img = document.createElement("IMG");
img.setAttribute("src", URL.createObjectURL(data.files[0]));
img.setAttribute("width", 200);
$('body').append(img);
....
....
});

Comments

4 comments

Ben Latchford

August 28, 2016 18:50
Is there a way to show a preview of the selected image between when they select it and when you make the upload request?

I have a small form where a user can fill out a couple of text fields and pick an image, then click 'Create'. I only want to upload the image if they click save but would like them to be able to change the image they have selected and preview it next to the text before clicking the save button.

I'm uploading directly from the browser, so when they click the save button, I would then show a progress bar while the image is uploading, and then when the request returns, submit the data via AJAX to my server along with the newly created public_id of the image.

It's just the showing of the preview and adding/removing the image data from the payload to cloudinary that I'm struggling with.

Thanks
0

Comment actions Permalink
Nadav Ofir

August 28, 2016 20:53

Edited
Hi Ben,

While the plugin doesn't provide pre-upload preview functionality, you can utilize the add callback (see 3rd section) in order to read the file and form a preview, as well as for switching the file pointer which is about to be uploaded.
0

Comment actions Permalink
Ben Latchford

August 29, 2016 03:10
Thanks for the suggestion, I found this solution from a Stackoverflow thread. Although I cannot show the preview of the transformed images, as obviously it hasn't been transformed yet! I prevent the auto upload and save the image data to an object variable which I then call the .submit() method on when the final Save button is pressed. Thanks for the help!
0

Comment actions Permalink

Nadav Ofir

August 29, 2016 08:10
Edited

To add a preview to your page (based on the original local image), try something like:

Please sign in to leave a comment.

Articles in this section

Related articles