Rails 4: How to Upload Files with Ajax

How can I upload image using AJAX in rails5.1.6

//f.file_field in html.erb will be compiled to <input type='file'>//you can construct FormData manually, param by param:var fileInput = document.querySelector('form input[type=file]');var attachment = fileInput.files[0];var formData = new FormData(); formData.append('email', 'Your Email');formData.append('attachment', attachment, 'filename.jpg');
//In jQuery you would send it like this:
      $.ajax({        url: "/profile/upload_image",        type: "POST",        beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},        data: "data=" + formData,        success: function(data) {          ...        }      });

Confused about how Rails 4 handling AJAX file upload with Paperclip

Unfortunately, you can't upload files with remote: true. AJAX uploads do not work for files, at least not in the default way.

Possible solutions:

1. Remotipart Gem
2. HTML5 Formdata Object
3. JQuery File-Upload

Have a look at this question: How can I upload files asynchronously with jQuery?

Update 01/2015:

There is a new gem called Refile, that makes async file uploads much easier. There is also a good introduction video on GoRails.com: File Uploads with Refile

Rails form submission by AJAX with an active storage attachment

The solution was just to wrap my form in a FormData object.

Rails not making Ajax request when file field is present in form

Got it. The docs are assuming that I'm using the rails-ujs adapter for unobtrusive JavaScript (which has been built in since Rails 5.1). My app was created in the Rails 4 era, and uses the old jquery-ujs adapter.

Browsers don't natively send Ajax requests that include file uploads. rails-ujs has a built-in workaround for this, but jquery-ujs doesn't.

There are two ways to proceed from here.

The long-term solution is to switch to rails-ujs, which is currently maintained as part of Rails. (As of this writing, jquery-ujs hasn't been updated in over two and a half years.)

Unfortunately, the two adapters have some interface differences, so some changes will likely need to be made throughout the application's JavaScript. See this article for specifics.

The quick fix? Well, there's a gem for that. (The docs indicate that it's for Rails 3, but it works like a charm on my application, which is running Rails 6.0.3.3 as of this writing.)

Addition to Gemfile:

gem 'remotipart', '~> 1.4.4'

Addition to app/assets/javascripts/application.js (after the existing jquery_ujs line):

//= require jquery.remotipart

And it works. The request is being made via Ajax. It's hitting my XHR-only route without issue and rendering a JavaScript view that's updating only part of the page.

Victory!

Rails - form doesn't submit any data during AJAX call - file upload - 422 status code

The Issue was with an order of javascript libraries included in application.js. Bootsy was defined after jquery-fileupload. It seems, that Bootsy must be defined before it, with this setup, both works well. So state before:

//= require jquery-fileupload
//= require bootsy
//= require bootsy/locales/cs.js

after (working):

//= require bootsy
//= require bootsy/locales/cs.js
//= require jquery-fileupload

---

Related Topics