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
tofalse
(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 thedata
received on theadd
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-
- Note that
Comments
4 comments
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
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.
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!
To add a preview to your page (based on the original local image), try something like:
Please sign in to leave a comment.