jQurey File Uploadをつかって、AWSのs3にファイルを直接アップロードしたいです。アップロードするときに、プログレスバーも表示したいです。
Ruby on Railsつかってます。
lang
1articles_controller.rb 2 3class ArticlesController < ApplicationController 4def new 5 @article = Article.new 6 @course = Course.find_by_id(params[:course_id]) 7 s3_sts = AWS::S3.new() 8 s3_bucket = s3_sts.buckets[ENV['S3_BUCKET']] 9 10 @s3 = s3_bucket.presigned_post( 11 key:"upload/#{@course.id}/articles/#{@course.articles.count + 1}/${filename}", 12 success_action_redirect: "/courses/{@course.id}/article/#{@course.articles.count + 1}/info", 13 acl: :private 14 ) 15end
lang
1article.js 2 3$(function() { 4 $('.directUpload').find("input:file").each(function(i, elem) { 5 var fileInput = $(elem); 6 var form = $(fileInput.parents('form:first')); 7 var submitButton = form.find('input[type="submit"]'); 8 var progressBar = $("<div class='bar'></div>"); 9 var barContainer = $("<div class='progress'></div>").append(progressBar); 10 fileInput.after(barContainer); 11 fileInput.fileupload({ 12 fileInput: fileInput, 13 url: '<%= @s3.url %>', 14 type: 'POST', 15 autoUpload: false, 16 formData: '<%= @s3.fields.to_json.html_safe %>', 17 paramName: 'file', 18 dataType: 'XML', 19 replaceFileInput: false, 20 progressall: function (e, data) { 21 var progress = parseInt(data.loaded / data.total * 100, 10); 22 progressBar.css('width', progress + '%') 23 }, 24 start: function (e){ 25 submitButton.prop('disabled', true); 26 27 progressBar. 28 css('background', 'green'). 29 css('display', 'block'). 30 css('width', '0%'). 31 text("Loading..."); 32 }, 33 done: function(e, data) { 34 submitButton.prop('disabled', false); 35 progressBar.text("Uploading done"); 36 37 // extract key and generate URL from response 38 var key = $(data.jqXHR.responseXML).find("Key").text(); 39 var url = '//<%= @s3.url.host %>/' + key; 40 41 // create hidden field 42 var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url }) 43 form.append(input); 44 }, 45 fail: function(e, data) { 46 submitButton.prop('disabled', false); 47 48 progressBar. 49 css("background", "red"). 50 text("Failed"); 51 } 52 }); 53 }); 54});
lang
1new.html.erb 2<form class="directUpload"> 3 <input type="file"> 4 <input type="submit" value="UPLOAD"> 5</form>
このサイトを参考にしましたが、うまくいきません。
jQuery UI と jQuery File Uploadは、しっかり入ってることは、確認できました。
よろしくおねがいします。
あなたの回答
tips
プレビュー