Image previews using base64 – Javascript

var fileUpload = document.querySelector('input[type=file]');
var file    = fileUpload.files[0];
var preview = $('.uploaded_file') // img tag
var reader  = new FileReader();
reader.onload = function() {
   preview.src = reader.result // it will set the base64 src to img tag

// Be-Aware of browser supports (

AWS S3 – Pre-signed URL uploads

RUBY (create a pre-signed & public url from server side)

s3 =
obj = s3.bucket('bucket-name').object('files/hello.text')

put_url = obj.presigned_url(:put, acl: 'public-read', expires_in: 3600 * 24, content_type: 'multipart/form-data')
#=> ""

#=> ""

You can fetch pre-signed URL from server side either directly while landing on the page or via AJAX. Preferred method is do a AJAX to server side with the param (filename) and in the server generate a pre-signed url using file name and time-stamp. 

JAVASCRIPT (Trigger a PUT call to AWS S3 using pre-signed url)

$.ajax( {
    url: url, //presinged-url which you get from server side
    type: 'PUT',
    data: file,
    processData: false,
    contentType: false,
    headers: {'Content-Type': 'multipart/form-data'},
    success: function(){
        console.log('Image successfully uploaded. Now the object (image/pdf/text/whatever-it-is now can be downloaded using public url received from server side');
    error: function(){
        console.log('Something went wrong');

ADD CORS ON AWS S3 (do this only for a particular bucket, avoid doing it globally)