Got working with nested forms

[anark]

A solution for https://github.com/waynehoover/s3_direct_upload/issues/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]

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]

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]

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]

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]

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]

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]

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

Thanks @waynehoover and @anark

[sheerun]

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

[sheerun]

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

[nathany]

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]

+1

[waynehoover]

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

[sheerun]

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]

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

[sheerun]

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]

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

[ghost]

@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]

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

[ghost]

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]

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

[ghost]

ok, thanks!

[sheerun]

@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

[ghost]

works now. thanks!