Simple AJAX image upload with Rails - The first knowledge sharing application in Vietnam

I was developing a small feature: AJAX upload user avatars. This means:

User select an image from local computer
Avatar is uploaded immediately after being selected
Update user avatar display after uploading successfully

All without reloading the page.

There are plenty of JS libraries that satifies the requirements above however after trying several libraries, I decided to not use any of them for the following reasons:

adding a library is too much, the library often offers too many configs and options that almost unnecessary for this case.
libraries often hack the element and inject their own style. making their style fit with provided design is often too complex to make it worth.

Therefore I’m searching for a minimalistic solution and came up with the piece of code below:

$(document).on('turbolinks:load', function() {  $("#js-avatar-uploader").change(function() {    var fd = new FormData();    fd.append('avatar', $('#js-avatar-uploader')[0].files[0])    $.ajax({      url: '/avatars',      data: fd,      processData: false,      type: 'POST',      contentType: false,      cache: false,      mimeType: 'multipart/form-data',      dataType: 'JSON',      beforeSend: function() {        $('span.js-upload-text').text('Uploading...')      }    })    .done(function (data) {      $('img#js-avatar').attr('src', data.avatar)    })    .always(function () {      $('span.js-upload-text').text('Upload New Image')    })  })})

This solution ultilizes FormData interface (https://developer.mozilla.org/en-US/docs/Web/API/FormData) and jQuery AJAX.

To make the AJAX call work with file uploading, the following options must be set as follow:

processData: false,contentType: false,cache: false,mimeType: 'multipart/form-data',