Any working examples of getting metadata from form fields?

Uppy
1

I’m trying to bring form data into my metadata object. I’m looking at the bundled example and it claims to use a form with inputs of names yo, bla, and check_test. However, the main.js file (should it be a bundle.js?) has a metafields object:

metaFields: [
  { id: 'license', name: 'License', placeholder: 'specify license' },
  { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
]

which doesn’t make sense because {‘license’, ‘caption’} =/= {‘yo’, ‘bla’, ‘check_test’}

Are there any working examples of doing this? I’m struggling a lot with figuring out how the names convert to id’s.

2

Hi! In that example all of those fields will end up passed in the upload. They come from two different places:

  1. Form plugin Form | Uppy, it extracts metadata from a element that you pass to it.
  2. metaFields is a Dashboard plugin’s option for your users to be able to edit files before upload and specify the metadata themselves: Dashboard | Uppy. But those will only be specified if user actually edits the file:

    Note that this meta data will only be set to a file if it’s entered by user. If you want to set certain default meta field to each file regardless of user actions, set meta in Uppy options.

So, you can pass meta to Uppy uploads: 1. via meta object in Uppy settings, 2. via setMeta() method, 3. via Form plugin or 4. via metaFields in Dashboard.

Plenty of options, which leads to some confusion, sorry about that.

2 Likes
3

Hi. How Exactly would this work on uppy-server then? I want to be able to save the meta-data to a database.

4

The metadata gets sent to uppy-server, and uppy-server adds it as part of its upload form fields

5

Um okay… And how do we get access to the upload form fields, so that they can be saved into a database?

6

all this data is sent as form fields to the target multipart server, so you can read on your multipart server. Does this make sens to you?

7

Hi Artur, I’m interested in option #3, the Form plugin.
I have a form in which users fill in their email address and I want the files uploaded to s3 to have that email in their path. for example: mymail@gmail.com/2018-09-12_09-41-11/image_name.jpg
How can I reach the form’s fields from within uppy/examples/aws-companion/server.js?
I managed to add the datetime, but how do I reach form.email?
I have a form object in the index.html:

<form name="form" method="post">
First name:
<br>
<input type="text" name="firstname" value="">
<br>
Last name:
 <br>
<input type="text" name="lastname" value="">
<br>
Email address:
 <br>
<input type="text" name="email" value="" id="email">
 <br>
<br>
<input type="submit" value="Submit">
</form>

I have a Form in the main.js:

const Form = require('@uppy/form')
...
uppy.use(Form, {
target: 'form',
getMetaFromForm: true,
addResultToForm: true,
resultName: 'uppyResult',
submitOnSuccess: false
}