Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
File Processing
- Robodog Introduction
- Robodog File Picker
- Image Editor
- Robodog Form
- Robodog Upload
- Robodog Dashboard
- Transloadit
Miscellaneous
React
- Introduction
- Initializing Uppy
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
Form
The @uppy/form
plugin has several features to integrate with HTML <form>
elements.
- 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 a hidden field. The appended result is a stringified version of a
result
returned fromuppy.upload()
orcomplete
event.
import Form from '@uppy/form' uppy.use(Form, { // Options }) |
Installation
This plugin is published as the @uppy/form
package.
Install from NPM:
npm install @uppy/form |
In the CDN package, the plugin class is available on the Uppy
global object:
const { Form } = Uppy |
Options
The @uppy/form
plugin has the following configurable options:
uppy.use(Form, { target: null, resultName: 'uppyResult', getMetaFromForm: true, addResultToForm: true, submitOnSuccess: false, triggerUploadOnSubmit: false, }) |
id: 'Form'
A unique identifier for this plugin. It defaults to 'Form'
.
target: null
DOM element or CSS selector for the form element. This is required for the plugin to work.
resultName: 'uppyResult'
The name
attribute for the <input type="hidden">
where the result will be added.
getMetaFromForm: true
Configures whether to extract metadata from the form. When set to true, the Form
plugin will extract all fields from a <form>
element before upload begins. Those fields will then be added to global uppy.state.meta
and each file’s meta, and appended as (meta)data to the upload in an object with [file input name attribute]
-> [file input value]
key/values.
addResultToForm: true
Configures whether to add upload/encoding results back to the form in an <input name="uppyResult" type="hidden">
element.
triggerUploadOnSubmit: false
Configures whether to start the upload when the form is submitted. When the user presses a submit button, this will prevent form submission, and instead upload files. You can then:
- use
submitOnSuccess: true
if you need the form to actually be submitted once all files have been uploaded. - listen for
uppy.on('complete')
to do something else if the file uploads are all you need. For example, if the form is used for file metadata only.
submitOnSuccess: false
Configures whether to submit the form after Uppy finishes uploading/encoding.