CODEWITHSUNDEEP
ruby-on-railscloudinary
user3697591
user3697591

Reputation: 11

Rails Cloudinary Direct Image Upload After Commit

I have a question regarding direct-image-upload from Cloudinary. I could set this up in a rails app using simple-form and <% = f.cl_image_upload (: file)%> but after I select the file, it start uploading. I don't like this approach and I want that upload start just after commit the form. Is it possible? I worry about having file in Cloudinary server which does not have a corresponding id in my database.

Upvotes: 1

Views: 530

Answers (2)

user3697591
user3697591

Reputation: 11

I think you can help me, Actually, I have this script...

<script>
  $(document).ready(function() {
    // Cloudinary jQuery integration library uses jQuery File Upload widget
    // (see http://blueimp.github.io/jQuery-File-Upload/).
    // Any file input field with cloudinary-fileupload class is automatically
    // wrapped using the File Upload widget and configured for Cloudinary uploads.
    // You can further customize the configuration using .fileupload method
    // as we do below.
    $(".cloudinary-fileupload")
      .fileupload({ 
        // Uncomment the following lines to enable client side image resizing and valiation.
        // Make sure cloudinary/processing is included the js file       
        disableImageMetaDataLoad: true,        
        disableImageResize: false,
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png|bmp|ico)$/i,
        maxFileSize: 20000000, // 20MB
        dropZone: "#direct_upload",
        start: function (e) {
          $(".status").text("Starting upload...");
        },
        progress: function (e, data) {
          $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");
        },
        fail: function (e, data) {
          $(".status").text("Upload failed");
        }
      })
      .off("cloudinarydone").on("cloudinarydone", function (e, data) {
        $(".status").text("");
        $(".preview").html(
          $.cloudinary.image(data.result.public_id, {
            format: data.result.format, width: 150, height: 100, crop: "limit"
          })
        );
      });
    });  
</script>

I'm beginning with javascript. This script above is working fine, but it just show me the preview after upload it. I don't like this approach because, if user change the preview image, I will have one file upload to Cloudinary without relative register in my db. Will be great if is possible show the preview and just upload after the user press submit in the form.

Note: I hope you understand me, I'm from Brazil and I don't write in english very well.

Upvotes: 0

Itay Taragano
Itay Taragano

Reputation: 1931

The default implementation indeed automatically uploads a file once selected. Most users 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 to false in the fileupload call. For example:

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

Upvotes: 1

Related Questions