question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Append uppy Dashboard files on existing form data

See original GitHub issue

This may be the silliest question ever but I’m struggling for hours now and thought to give it a shot:

I’m using Rails and have a simple form with the following input fields:

  • Name
  • Email
  • Attachments

My question is this: Is it possible to attach uppy (with its cool-looking Dashboard) in my existing form and submit all data at once using the parent form’s submit button?

I think I currently can’t do this; If I use XHRUpload and let a user submit attachments asynchronously I’d have to do lots of “housekeeping” since I won’t have a user model id on the server to attach the files to.

Using a regular form field instead, I do get all the files on form submission but I don’t get to use the awesome Dashboard. Is there a middle ground?

Is there a way to use uppy and let users select and remove files through its Dashboard but only upload on my form’s submit?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:6
  • Comments:7

github_iconTop GitHub Comments

6reactions
arturicommented, Mar 14, 2018

Hi! What you can do:

  1. In Dashboard optionally set inline: true to show Dashboard inline with your form, and then hideUploadButton: true to hide the upload button, so you can use your own from the form. See https://uppy.io/docs/dashboard/ for details.
  2. Use Form plugin https://uppy.io/docs/form/ to attach <form> input key/values to file uploads. Use Uppy’s upload button or uppy.upload() to trigger the upload.

Or intercept your form’s submit event and call uppy.upload() so that Uppy will send the files along with metadata to your server. You could also get files that user selected from Uppy by iterating over uppy.state.files object. There’s currently no way to just use the Dashboard as file picker that will add actual files to your form’s input, but there is a way to upload those files first, and then append results (urls) to your form.

I am not sure which of those would help the most, but I think this is a valid use case which we were hoping to cover with Form plugin, and I’d be happy to add more options to it.

1reaction
andrew-oko-odioncommented, Oct 28, 2018

please how did you resolve this issue, I am challenged with the same problem

Read more comments on GitHub >

github_iconTop Results From Across the Web

Form - Uppy
It collects user-specified metadata from form fields, right before Uppy begins uploading/processing files. It can append upload results back to the form as ......
Read more >
Dashboard - Uppy
Dashboard. @uppy/dashboard is a universal UI plugin for Uppy, offering several useful features: Drag and drop, paste, select from local disk / my...
Read more >
const - Uppy
Uppy internally uses file objects that abstract over local files and files from remote providers, and that contain extra data like user-specified metadata...
Read more >
XHR Upload - Uppy
Configures whether to use a multipart form upload, using FormData. ... All files will be appended to the provided fieldName field in the...
Read more >
File Input - Uppy
Import general Core styles from @uppy/core/dist/style.css first, then add the File Input styles from @uppy/file-input/dist/style.css . A minified version is ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found