Got working with nested forms #79

Open
wants to merge 3 commits into
from

Projects

None yet

10 participants

@anark
anark commented Apr 10, 2013

A solution for #74

This allows you to use s3 direct upload without requiring a separate form. To use with just an input tag within an existing form you will need to do a couple things.

Set the url for s3 uploader since it can no longer get it from the form

  $("#myS3Uploader").S3Uploader(
    {
    url: '<%=S3DirectUpload.config.url%>'
  });

This requires a url to be set in your uploader config

You can then include a file input tag using the following helpers

<%= s3_uploader_hidden_fields%>
<%= s3_uploader_field callback_url: model_url, callback_param: "model[param_name]", id: "myS3Uploader"%>

However this will not work with the IE9 fix and I do not know anything about making it IE9 compatable

@waynehoover
Owner

Thank you for this, but I would rather not break ie 8 compatibility just yet. I'll keep this pull open in case we can figure out a solution.

@lacco
lacco commented Apr 16, 2013

When I understand it correctly, we need forms to keep this gem compatible with IE <= 9? What are our options? I was thinking about inserting a hidden form somewhere on the page on the fly (e.g. as a child of the body tag). This way we don't have to nest forms anymore, but still keep the IE compatibility. Would this be possible?

@waynehoover waynehoover commented on the diff Apr 21, 2013
lib/s3_direct_upload/form_helper.rb
@@ -72,7 +98,6 @@ def policy_data
{
expiration: @options[:expiration],
conditions: [
- ["starts-with", "$utf8", ""],
@waynehoover
waynehoover Apr 21, 2013 Owner

Why was this removed? If you use a Rails' form_tag it will create a hidden input element with this attribute by default.

@waynehoover waynehoover commented on the diff Apr 21, 2013
app/assets/javascripts/s3_direct_upload.js.coffee
content = {}
if result # Use the S3 response to set the URL to avoid character encodings bugs
content.url = $(result).find("Location").text()
content.filepath = $('<a />').attr('href', content.url)[0].pathname
- else # IE <= 9 return a null result object so we use the file object instead
- domain = $uploadForm.attr('action')
- content.filepath = settings.path + $uploadForm.find('input[name=key]').val().replace('/${filename}', '')
- content.url = domain + content.filepath + '/' + encodeURIComponent(file.name)
+ #else # IE <= 9 return a null result object so we use the file object instead
+ #domain = $uploaderElement.attr('action')
@waynehoover
waynehoover Apr 21, 2013 Owner

These three lines seem to work with IE, did you have problems here?

@waynehoover
Owner

After looking over the code, I actually don't think we will have problems with IE here. What issues did you run up against with IE?

@anark
anark commented Apr 21, 2013

We dont have problems with IE if we still use the form as the s3_uploader. However if you us a file_field then it will not work. If we use a file field $uploadForm will have not attribute action.

@maletor
maletor commented May 31, 2013

I found another neat workaround. Use a label for="id" where the input is in another form, the s3_upload_form and is positioned absolutely -9999px on the left. It works great in every browser except Firefox. Here's a crappy workaround for that though.

# Hack for Mozilla to click label for file inputs.
if $.browser.mozilla
  $(document).on "click", "label", (e) ->
    $(@control).click() if e.currentTarget is this and e.target.nodeName isnt "INPUT"
@AfzalMasood11

Hi,

I need lil help. I am facing an error:
undefined local variable or method `s3_uploader_hidden_fields'

@lacco
lacco commented Jun 25, 2013

Any progress on this topic? It would be so great if we come up with a solution for this topic... If we can't solve the IE issue at the moment, what about a temporary if($uploaderElement.is('form')){...} switch so that we can at least use @anark changes in non-IE browsers?

@ldenman
ldenman commented Jul 1, 2013

Just showing interest here. I'd like to see support for nested forms.

Thanks @waynehoover and @anark

@sheerun
sheerun commented Jul 4, 2013

I'd like to see this feature too. Btw. @maletor solution is not working for me.

@sheerun
sheerun commented Jul 4, 2013

OK, I made it work for IE7-10, probably 6 too:
https://github.com/sheerun/s3_direct_upload/tree/field-form

@nathany
Contributor
nathany commented Jul 5, 2013

I'd also like a built-in/documented way of handling file upload(s) in the context of a larger form. (likely setting a hidden field in the parent form, disabling submission while uploading...).

@forrest
forrest commented Jul 5, 2013

+1

@waynehoover
Owner

@sheerun would you be willing to send a pull based on your work?

@sheerun
sheerun commented Jul 5, 2013

Well, I don't think it should be merged, it totally changes the way this plugin works (form -> field).

It's rather proof of concept for new gem like s3_upload_field or something.

@nathany
Contributor
nathany commented Jul 9, 2013

@sheerun Wouldn't it make sense to have s3_uploader_form and s3_uploader_fields in the same gem?

@sheerun
sheerun commented Jul 10, 2013

That's more likely, but I need find time to rewrite the code :) I'll try to do it in a week or so. Also I don't like that gem doesn't provide success, start, error, and progress callbacks (in constructor), they would be helpful. Maybe implement them too? I'd like to make some use of promises too.

@sheerun
sheerun commented Jul 12, 2013

I've re-written gem and released it under https://github.com/sheerun/s3_file_field

@gbenz
gbenz commented Jul 22, 2013

@sheerun can you clarify this section? specifically...how would a form look that uses the s3_upload_form helper and the code snippet below? thank you!

Create a new view that uses the form helper s3_uploader_form:

= form_for :user do |form|
= form.s3_file_field :scrapbook, :class => 'js-s3_file_field'
.progress
.meter{ :style => "width: 0%" }

@sheerun
sheerun commented Jul 22, 2013

@gbenz Only data attributes on <input type="file">

@gbenz
gbenz commented Jul 22, 2013

sorry, I'm missing something...my form looks like this:

<%= form_for @post, :html => {:multipart => true} do |f| %>
<%= f.s3_file_field :avatar, :class=>"js-s3_file_field" %>
<%= f.submit button_label %>
<% end %>

...and I get the uninitialized constant: "NameError (uninitialized constant ActionView::Helpers::Tags)" for the s3_file_field

Thank you!

@sheerun
sheerun commented Jul 22, 2013

Uh. I tested it mainly on Rails 4. Please wait a while for fix.

@gbenz
gbenz commented Jul 22, 2013

ok, thanks!

@sheerun
sheerun commented Jul 22, 2013

@gbenz Thank you so much for report. As it turned out I tested it against Rails 4 two times ;/ I've just released 1.0.2. Could you report if it works with Rails 3? I made little testing, so it should be all right.

https://github.com/sheerun/s3_file_field

@gbenz
gbenz commented Jul 23, 2013

works now. thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment