0

I'm using carrierwave to upload movies to amazon s3. I want to do it asynchronously so that I can upload multiple videos at the same time and I want to use a progress bar.

How can I do this?

Deepesh
  • 6,138
  • 1
  • 24
  • 41
Felix
  • 5,452
  • 12
  • 68
  • 163

1 Answers1

1

You can use dropzone for this. This is a sample code I have used in my app:

View:

<%= form_tag user_new_drag_drop_photo_path, method: :post, class: "dropzone form-horizontal", id: "media-dropzone", :authenticity_token => true do %>
  <div class="fallback">
    <%= file_field_tag "photo", multiple: true %>
  </div>
<% end %>

Js Code:

function create_dropzone(thumbnailUrls){
  Dropzone.autoDiscover = false;
  var mediaDropzone;
  mediaDropzone = new Dropzone("#media-dropzone", {
    addRemoveLinks: true,

    success: function(file, response) {
              $(file.previewTemplate).find('.dz-remove').attr('id', response.id);
              $(file.previewElement).addClass("dz-success");
            },

    removedfile: function(file){
                  var id = $(file.previewTemplate).find('.dz-remove').attr('id');
                  var parent = $(file.previewTemplate).find('.dz-remove').parent();
                  parent.remove();
                 // The above will remove the file preview but you can send a AJAX request to delete it from server
            },

    init: function () {
                // This callback be used to do some task on dropzone intialize
    }
  });

This is purely my code(I have deleted some part), you need to change it according to yourself. I have used user_new_drag_drop_photo_path this is my custom path you can take it to photos_controllers create action. It will send the request using AJAX and will save it through it.

More tutorial you can find here:

http://www.dropzonejs.com/

Hope this helps.

Deepesh
  • 6,138
  • 1
  • 24
  • 41