waynehoover / s3_direct_upload

Direct Upload to Amazon S3 With CORS
MIT License
652 stars 333 forks source link

How to use the `s3_uploader` helper inside an existing form? #227

Open KranthiKishore opened 9 years ago

KranthiKishore commented 9 years ago

Hi All,

I already have a from which submits some data to server from backbone. I want to use this gem in the existing form to upload file to S3 from client side(BackBone). How can I use this? If not, request to suggest any alternative ways to upload file to S3 from client side(by using them inside an existing form).

Thanks in advance.

tarr11 commented 9 years ago

Set the callback-param to the field in the form and then bind the s3_upload_complete event to fill it.

$('#s3-uploader').bind "s3_upload_complete", (e, content) ->
   field_name = $('#s3-uploader').attr("data-callback-param")
   $("input[name='" + field_name + "']").val(content.url)
mcfiredrill commented 8 years ago

@KranthiKishore It should be possible to do on the master branch of this Gem.

cawel commented 7 years ago

I'm trying to have other form elements to be posted to my app server, but it does not work. The key parameter has variables in it which do not get resolved. I know for sure that clicking on the "Choose Files" button properly uploads the file to S3. But after this, clicking on the "Create Video" submit button will post the form to my app server, sending the post data along. According to my app server's log, I can see that the key parameter looks like this:

"key"=>"uploads/{timestamp}-{unique_id}-6de1bb7b6d50eec409b96e7cdbadecdb/${filename}"

I'm loading the jQuery file upload helper like this:

$(function () {
  $("#s3-uploader").S3Uploader();
});

And here is the (haml) code related to the form (notice the absence of the callback_url parameter):

= form_for @video do |f|
  = s3_uploader callback_param: "video[direct_upload_url]", id: "s3-uploader" do
    = f.file_field :file, name: 'file', multiple: true , data: { url: s3_uploader_url }
  = f.text_field :title
  = f.submit

Is that the way to do it?

MrHubble commented 6 years ago

@cawel did you figure this out?