AjaxとJquery in Railsを使用してAmazon AWS（S3）に画像をアップロードする方法は？

Question

私は、ユーザーがサイトから自分のイメージをアップロードしたいと思っています。私はほとんどのことをやったことがありますが、今はイメージをサーバーにアップロードする際に問題が発生しています。この問題をどうやって解決するのですか？

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 %> 

コーヒースクリプト -

$ -> 

    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 - 私はAWS-URLからURLを取得するために使用されるJSONをしたとイメージができるだけ早く非同期にアップロードする必要がありますアップロードボタンがないので、ブラウザからファイルが選択されます。

Answer 1

ヘロクにはdetailed instructionという方法があります。 S3にダイレクトアップロードを使用することをおすすめします。あなたがそれを見逃す場合は、autoUploadオプションがあります。