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

Follow

Comments

4 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

    0
    Comment actions Permalink
  • 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.

    0
    Comment actions Permalink
  • 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!

    0
    Comment actions Permalink
  • 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);
    ....
    ....
    });
    0
    Comment actions Permalink

Please sign in to leave a comment.