From d74979d42faf2e9e474f0a67bca7d7c9332b3825 Mon Sep 17 00:00:00 2001
From: literat <tomas@litera.me>
Date: Wed, 18 Oct 2023 10:57:49 +0200
Subject: [PATCH] Docs(web-react): FileUploader - Support for crop image
 #DS-954

---
 .../src/components/FileUploader/README.md     | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/packages/web-react/src/components/FileUploader/README.md b/packages/web-react/src/components/FileUploader/README.md
index 61d48a54d5..6e05434f2f 100644
--- a/packages/web-react/src/components/FileUploader/README.md
+++ b/packages/web-react/src/components/FileUploader/README.md
@@ -298,6 +298,50 @@ const resetStateHandler = () => {
 </form>;
 ```
 
+### 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` callbacks.
+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 addToQueue(key, file, { fileDescription: 'custom file description' });
+};
+
+const customUpdate = (_event: MouseEvent, file: File) => {
+  return updateQueue(file.name, file, { fileDescription: 'changing the custom description' });
+};
+
+// …
+<FileUploader
+  addToQueue={customAddToQueue}
+  // …
+  updateQueue={updateQueue}
+>
+  // …
+</FileUploader>;
+// …
+```
+
+#### 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 FileUploaderAttachment 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 updateQueue(file.name, file, meta);
+};
+// …
+```
+
 ## FileUploader Props
 
 | Name                                  | Type                                                                 | Default | Required | Description                                                         |