如何在Rails中使用Ajax和Jquery将图像上传到Amazon AWS（S3）？

Question

I want the user to upload their image from the site. I've done most of the things but now, I'm facing difficulties while uploading the image to the server. How do I solve this issue?

HTML -

<div>
  <div style="height: 80px; position: relative;">
   <div id="target1">
    <% if !@aws_url3.nil? %>
     <img id="user_dl3" src="<%= @aws_url3 %>">
    <% end %>
  </div>
  <div id="close1" style="display: none;">
    <button id="closebtn1" class="closebtn">X</button>
  </div>
  <div id="closemsg1" style="display: none;  position: relative;">
    <button  id="deletebtn1" class="deletebtn">
        <p class="deletebtnstyle">Delete</p>
    </button>
    <button id="cancelbtn1" class="cancelbtn">
        <p class="cancelbtnstyle">Cancel</P>
    </button>
  </div>
  <div class="file_browser1" id="file_browser1">
    <label for="file-upload1" class="custom-file-upload z-depth-1">
        <i class="material-icons">&#xE147;</i>
        <p class="button-text"> Upload Here</p>
    </label>
  <form id="user_id1_form" action="">
    <input type="hidden" name="user_id1_key" value="<%= @aws_urls[0][:key] %>"/>
    <input id="file-upload1" type="file" accept="image/*" name="user_id1"/>
 </form>
 </div>
 </div>
 </div>
 <%= form_tag(user_url("#{@current_user.id}"), method: :put, id: "aws_key_form") do |f| %>
   <%= hidden_field_tag "aws_key1", @aws_urls[0][:key] %>
 <% end %>

Coffee Script -

$ ->

    if $('#target1 img').length == 1
        $('#file_browser1').addClass 'none'
        $('#close1').addClass 'delete1'
        $('#closebtn1').on 'click', (e) ->
                $('#closemsg1').addClass 'msg1'     
        $('#cancelbtn1').click ->
                $('#closemsg1').removeClass 'msg1'
        $('#deletebtn1').click ->
                $('#close1').removeClass 'delete1'
                $('#closemsg1').removeClass 'msg1'
                $('#target1 > img').hide()
                $('#file_browser1').removeClass 'none'
                $('#file-upload1').val('')
                return

    $('#file-upload1').on 'change', (event) ->
        files = event.target.files
        image = files[0]
        console.log image.size
        reader = new FileReader
        $.ajax({
            type: "GET",
            url: "http://localhost:3000/users/get_url/13",
            success :(data) ->
                console.log data[0].url
                $.ajax({ 
                    url: data[0].url,
                    type: 'PUT',
                    xhr: -> 
                        myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload)
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                        return myXhr;
                    ,
                    success: (data) ->
                        alert "abcd",
                    error: (data) ->
                        alert data[0],
                    data: $('#file-upload1')[0].files[0],
                    cache: $.param(false),
                    contentType: "binary/octet-stream",
                    processData: $.param(false)
                }, 'json');
        })

        reader.onload = (file) ->

            img = new Image
            img.src = file.target.result
            $('#target1').html img
            $('#file_browser1').addClass 'none'
            $('#close1').addClass 'delete1'
            $('#closebtn1').on 'click', (e) ->
                    $('#closemsg1').addClass 'msg1'     
            $('#cancelbtn1').click ->
                    $('#closemsg1').removeClass 'msg1'
            $('#deletebtn1').click ->
                    $('#close1').removeClass 'delete1'
                    $('#closemsg1').removeClass 'msg1'
                    $('#target1 > img').hide()
                    $('#file_browser1').removeClass 'none'
                    $('#file-upload1').val('')
                    return
            return

        reader.readAsDataURL image
        console.log files
        return

PS - I've used Json to get the URL from the AWS-URL and the Image should be uploaded asynchronously as soon as the file is selected from the browser as there is no upload button available.

Answer 1

Heroku have a detailed instruction how to do it. I recommend using direct upload to S3. In case you miss it there is autoUpload option.