mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-21 01:15:35 +00:00
6f80ea709c
This PR adds support for extracting metadata from `<form>` elements. This was asked #153 and came up elsewhere too, I believe. You can use it like this: ```html <form class="MyForm" action="/"> <input type="file" /> <input type="hidden" name="bla" value="12333"> <input type="text" name="yo" value="1"> <button type="submit">Upload</button> </form> ``` ```js uppy.use(DragDrop, { target: '.MyForm', locale: { strings: {chooseFile: 'Выберите файл'} }, setMetaFromTargetForm: true }) ``` Then UI acquire type plugins, like Dashboard, FileInput and DragDrop, before mounting themselves or doing anything else, extract FormData from the `target` `<form>` element (it must be a form currently), and merge the object with the global `state.meta`. This is done via `setMeta` method on core. Then, when a file is added, `state.meta` is merged to that file’s meta right away. The ability to add more fields via UI plugin MetaData is also still there, though probably needs an update. In addition a new `meta` option is added in core: ```js const uppy = Uppy({ debug: true, autoProceed: true, meta: { username: 'Artur' } }) ``` This way some data can be set right away, it becomes the initial `state.meta` object.
25 lines
658 B
HTML
25 lines
658 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>uppy</title>
|
|
</head>
|
|
<body>
|
|
<h1>Uppy is here</h1>
|
|
<button id="uppyModalOpener">Choose Files</button>
|
|
|
|
<div class="Uppy">
|
|
<form class="MyForm" action="/">
|
|
<input type="file" />
|
|
<input type="hidden" name="bla" value="12333">
|
|
<input type="text" name="yo" value="1">
|
|
<button type="submit">Upload</button>
|
|
<input type="submit">
|
|
</form>
|
|
</div>
|
|
|
|
<link href="uppy.min.css" rel="stylesheet">
|
|
<script src="bundle.js"></script>
|
|
</body>
|
|
</html>
|