Skip to content

Commit

Permalink
Docs(web): FileUploader - Support for crop image #DS-954
Browse files Browse the repository at this point in the history
  • Loading branch information
literat authored and pavelklibani committed Oct 18, 2023
1 parent 3dc077e commit 3ae0a35
Showing 1 changed file with 35 additions and 0 deletions.
35 changes: 35 additions & 0 deletions packages/web/src/scss/components/FileUploader/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down

0 comments on commit 3ae0a35

Please sign in to comment.