Form plugin requires a <form> target element passed in options to operate, none was found

Uppy
#1

I want Uppy Dashboard’s upload data to be sent to a nested hidden field in a Rails form helper. I am stuck on two things.

  1. The inspector error Form plugin requires a <form> target element passed in options to operate, none was found occurs even though the selector is applied to the <form> element.

    js file

    uppy.use(Form, {
 target: 'upload-data'
})

    erb file
    <%= form_for @item, html: { class: "upload-data" } %>

    upload-data is the css selector on the form element. Why is it doing giving me that error? Additionally, this option does not save, because the data is not going to the nested form element I need it to go to. (see #2 below)

  2. If I add the upload-data selector to the nested hidden field like so…

    <%= f.fields_for :photos do |p| %>
 <%= p.hidden_field :image, value: @photo&.cached_image_data, class: "upload-data" %>
<% end %>

    …the form saves the image and everything else, as desired. I get the Form plugin requires a <form> target element passed in options to operate, none was found error here as well, but this time it makes sense.

#2

The selector syntax for the target parameter follows jquery selector syntax. So if it’s a class it should be.

uppy.use(Form, {
  target: '.upload-data'
})

instead of target: 'upload-data'

1 Like
#3

Thank you! Is it a requirement that the target be a form? It’s working just fine as a nested hidden field.

1 Like
#4

It looks like it might not be a hard requirement. Here’s the relevant code in the plugin itself.

Essentially the plugin will append a child element to whichever parent element you are targeting. So if it would make sense to append a hidden file input to a given element within your form then you should be in the clear.

I would be careful though because the developers could make more exact assumptions in the future that would break this.

As it is right now the requirement seems to be that the element you’re setting the target to must be the form or a suitable child element of the form.

1 Like
#5

got it. it appears that appending the image data to a hidden field with a nested model relationship (instead of directly to a <form> as suggested in that source) prevents multipleResults: true from behaving properly!:face_with_monocle:hmmm…how to append to nested field…