diff --git a/packages/web/src/scss/components/FileUploader/README.md b/packages/web/src/scss/components/FileUploader/README.md index bacbaacc51..d95d0e3182 100644 --- a/packages/web/src/scss/components/FileUploader/README.md +++ b/packages/web/src/scss/components/FileUploader/README.md @@ -463,6 +463,38 @@ document.addEventListener('unqueueFile.fileUploader', () => { 👉 Read more about [fileUploader JavaScript events](#javascript-events). +### Passing additional metadata + +When you need to send additional data along with the image you can do it with the `meta` argument on `addToQueue` and `updateQueue` methods of the `FileUploader` JS plugin. +If any data in `meta` option will be present, the FileUploader adds an additional hidden input with JSON stringified data to the form. +The identification of this input (`name`) will be the name of the file. +Thus you can pass to the server any additional text data you need. + +```javascript +const customAddToQueue = (key: string, file: File) => { + // passing additional data using the `meta` argument + return FileUploader.addToQueue(key, file, { fileDescription: 'custom file description' }); +}; + +const customUpdate = (_event: MouseEvent, file: File) => { + return FileUploader.updateQueue(file.name, file, { fileDescription: 'changing the custom description' }); +}; +``` + +#### Updating Image Preview with cropped image + +When you are using FileUploader with some kind of image cropper you want to also update the image preview on FileUploader attachment when image changes. +You can do this by passing a specific object in shape of coordinates (`{ x: number, y: number, width: number, height: number }`) to the `meta` argument. +Then the coordinates will be applied to the preview image in the attachment. + +```javascript +const customUpdate = (event: MouseEvent, file: File) => { + const meta = { x: 30, y: 30, width: 150, height: 150 }; + + return FileUploader.updateQueue(file.name, file, meta); +}; +``` + ## Composition This is how all subcomponents build up the complete FileUploader: @@ -544,6 +576,9 @@ This is how all subcomponents build up the complete FileUploader: | `getInstance` | _Static_ method which allows you to get the FileUploader instance associated with a DOM element. | | `getOrCreateInstance` | _Static_ method which allows you to get the FileUploader instance associated with a DOM element, or create a new one in case it wasn’t initialized. | | `getFileQueue` | Returns a list of files in the queue. | +| `addToQueue` | Adds file to the queue. | +| `updateQueue` | Updates file in the queue. | +| `removeFromQueue` | Removes file from the queue. | | `clearFileQueue` | Deletes all the files in the queue. | ```js