jquery fileupload with rails carrierwave/s3

Question

I'm not that familiar with jquery file uploading plugin/libraries.

I'm trying to build an image uploader that loads images through jquery/ajax on the frontend so I don't have to update the site as the image gets uploaded, and then send it to the backend to carrierwave so it gets saved in the amazon s3.

I have: backend: carrierwave + fog to store on amazon S3 frontend: jquery - fileupload plugin the only thing I found to give me some hints was https://github.com/blueimp/jQuery-File-Upload along with its demo, but I'm not even sure is that repository the tutorial or also the source code for the library? uploading the file through jquery and using the fileupload seems too complicated if jQuery-File-Upload is an example.

On the my coffee script this is what I have

initialize: ->
  @render()
  $.log "#{@name}: initialised"
  $('#campaign_main_image').fileupload
  $('#campaign_main_image').fileupload 'option'
    dataType: 'json'
    url: '/api/v3/upload'
    dropZone: $('.campaign-editor-about .dropzone')
    maxFileSize: 5000000
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i
    send: (e, data) =>
      $('#logo_wait').show()
    done: (e, data) =>
      @model.set
        logo: data.result.url
      @model.save()

This code does make the call to my router on rails, but doesn't send any image files over ( I checked in the networks tab on chrome) So I don't know if this is even right? Is there a place where I can find documentation for fileupload? Jquery site doesn't have anything... For my project I need drag and drop too, so is there a better jquery library? (with good examples)

Thanks!

Answer 1

Have a look at https://github.com/yortz/carrierwave_jquery_file_upload . Its a complete example including JQuery File Upload, rails with CarrierWave and S3. Perhaps it can help you.

Answer 2

The wiki page provides detailed instructions and code on how to get it set up. I have the same setup and it worked without any problems for me.

If you want to allow users to select multiple files at once: https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V6-(multiple )

If you only want to allow selecting one file in the file dialogue: https://github.com/blueimp/jQuery-File-Upload/wiki/Rails-setup-for-V6

Hope this helps.

Answer 3

Well just saw this quesetion in my suggestions, here's how you can send an image file through ajax to be handled by your controller in the backend:

First of all make sure your form triggers a js event and you preventDefault

Within your Javascript you can construct manually the FormData object:

var fileInput = document.querySelector('form input[type=file]');
var attachment = fileInput.files[0];

var formData = new FormData(); 
formData.append('attachment', attachment, 'filename.jpg');

Then you can just:

$.ajax({
  url: '/my/url',
  type: 'POST',
  data: formData,
  contentType: false,
  processData: false
});

Note the contentType and processData options, which are needed so that jQuery does not try to serialize the FormData object

Source