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

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:

  1. Initiate a Cloudinary file upload: 
    var cldFU = $('#fileMultipleRead').cloudinary_fileupload(options);
  2. Set autoUpload to false (https://github.com/blueimp/jQuery-File-Upload/wiki/Options#autoupload), e.g., 
    $(document).ready(function() {
      $('.cloudinary-fileupload').fileupload({
        autoUpload: false
      });
    });
  3. 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 */});
  4. Perform any additional processes that you require with the added files.
  5. Upload files with data.submit(). This is the data received on the add callback.
Have more questions? Submit a request

Comments

  • Avatar
    Ben Latchford

    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

  • Avatar
    Nadav Ofir

    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.

    Edited by Nadav Ofir
  • Avatar
    Ben Latchford

    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!

  • Avatar
    Nadav Ofir

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

    $('#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);
    ....
    ....
    });
    Edited by Nadav Ofir
Powered by Zendesk