From fa0b05ccbecf433cdfe94bec6109d48671bdd722 Mon Sep 17 00:00:00 2001
From: Gustav Hansen <gustav.hansen@strapi.io>
Date: Fri, 18 Mar 2022 13:09:06 +0100
Subject: [PATCH 1/4] Upload: improve code examples

---
 docs/developer-docs/latest/plugins/upload.md | 104 +++++++++++--------
 1 file changed, 63 insertions(+), 41 deletions(-)

diff --git a/docs/developer-docs/latest/plugins/upload.md b/docs/developer-docs/latest/plugins/upload.md
index ba4b910206..66a468a9d9 100644
--- a/docs/developer-docs/latest/plugins/upload.md
+++ b/docs/developer-docs/latest/plugins/upload.md
@@ -107,13 +107,15 @@ module.exports = ({ env }) => ({
 
 ## Upload files
 
-To upload files into your application.
+To upload files to your application.
 
 ### Parameters
 
 - `files`: The file(s) to upload. The value(s) can be a Buffer or Stream.
 
-### Code example
+:::: tabs card
+
+::: tab Browser
 
 ```html
 <form>
@@ -123,20 +125,48 @@ To upload files into your application.
 </form>
 
 <script type="text/javascript">
-  const formElement = document.querySelector('form');
+  const form = document.querySelector('form');
 
-  formElement.addEventListener('submit', (e) => {
+  form.addEventListener('submit', async (e) => {
     e.preventDefault();
 
-    const request = new XMLHttpRequest();
-
-    request.open('POST', '/upload');
-
-    request.send(new FormData(formElement));
+    await fetch('/api/upload', {
+      method: 'post',
+      body: new FormData(e.target)
+    });
   });
 </script>
 ```
 
+:::
+
+::: tab Node.js
+
+### From Node.js
+
+```js
+import { FormData, Blob } from "formdata-node"
+import { FormDataEncoder } from  "form-data-encoder"
+import { Readable } from "stream"
+import fetch from 'node-fetch';
+import fs from 'fs';
+
+const file = fs.createReadStream('path-to-your-file');
+const form = new FormData();
+
+form.append('files', file);
+
+const encoder = new FormDataEncoder(form);
+
+await fetch('http://localhost:1337/api/upload', {
+    method: "post",
+    headers: encoder.headers,
+    body: Readable.from(encoder)
+});
+```
+
+:::
+
 :::caution
 You have to send FormData in your request body.
 :::
@@ -189,16 +219,15 @@ Code
 </form>
 
 <script type="text/javascript">
-  const formElement = document.querySelector('form');
+  const form = document.querySelector('form');
 
-  formElement.addEventListener('submit', (e) => {
+  form.addEventListener('submit', async (e) => {
     e.preventDefault();
 
-    const request = new XMLHttpRequest();
-
-    request.open('POST', '/upload');
-
-    request.send(new FormData(formElement));
+    await fetch('/api/upload', {
+      method: 'post',
+      body: new FormData(e.target)
+    });
   });
 </script>
 ```
@@ -245,44 +274,37 @@ Code
 </form>
 
 <script type="text/javascript">
-  const formElement = document.querySelector('form');
+  const form = document.querySelector('form');
 
-  formElement.addEventListener('submit', (e) => {
+  form.addEventListener('submit', async (e) => {
     e.preventDefault();
 
-    const request = new XMLHttpRequest();
-
-    const formData = new FormData();
-
-    const formElements = formElement.elements;
-
     const data = {};
+    const formData = new FormData();
 
-    for (let i = 0; i < formElements.length; i++) {
-      const currentElement = formElements[i];
-      if (!['submit', 'file'].includes(currentElement.type)) {
-        data[currentElement.name] = currentElement.value;
-      } else if (currentElement.type === 'file') {
-        for (let i = 0; i < currentElement.files.length; i++) {
-          const file = currentElement.files[i];
-          formData.append(`files.${currentElement.name}`, file, file.name);
+    form.elements
+      .forEach(({ name, type, value, files, ...element }) => {
+        if (!['submit', 'file'].includes(type)) {
+          data[name] = value;
+        } else if (type === 'file') {
+          files.forEach((file) => {
+            formData.append(`files.${name}`, file, file.name);
+          });
         }
-      }
-    }
+      });
 
     formData.append('data', JSON.stringify(data));
 
-    request.open('POST', `${HOST}/restaurants`);
-
-    request.send(formData);
+    await fetch('/api/restaurants', {
+      method: 'post',
+      body: formData
+    });
   });
 </script>
 ```
 
-Your entry data has to be contained in a `data` key. You have to `JSON.stringify` your data object.
-
-And for your files, they have to be prefixed by `files`.
-Example here with cover attribute `files.cover`.
+Your entry data has to be contained in a `data` key and you need to `JSON.stringify` this object. The keys for files, need to
+be prefixed with `files` (example with a cover attribute: `files.cover`).
 
 ::: tip
 If you want to upload files for a component, you will have to specify the index of the item you want to add the file to.

From 80a18e393ffb8d54ceca297d3d0ce3d762cb6088 Mon Sep 17 00:00:00 2001
From: Pierre Wizla <pwizla@users.noreply.github.com>
Date: Wed, 4 May 2022 11:45:44 +0200
Subject: [PATCH 2/4] Remove heading inside tab

---
 docs/developer-docs/latest/plugins/upload.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/developer-docs/latest/plugins/upload.md b/docs/developer-docs/latest/plugins/upload.md
index 66a468a9d9..cd57630db8 100644
--- a/docs/developer-docs/latest/plugins/upload.md
+++ b/docs/developer-docs/latest/plugins/upload.md
@@ -142,7 +142,6 @@ To upload files to your application.
 
 ::: tab Node.js
 
-### From Node.js
 
 ```js
 import { FormData, Blob } from "formdata-node"

From db0bef10b5fd0c4c5203035066cb43420b10a0c0 Mon Sep 17 00:00:00 2001
From: Pierre Wizla <pwizla+github@gmail.com>
Date: Wed, 4 May 2022 11:47:33 +0200
Subject: [PATCH 3/4] Merge 2 lines

---
 docs/developer-docs/latest/plugins/upload.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/docs/developer-docs/latest/plugins/upload.md b/docs/developer-docs/latest/plugins/upload.md
index cd57630db8..cc8b145132 100644
--- a/docs/developer-docs/latest/plugins/upload.md
+++ b/docs/developer-docs/latest/plugins/upload.md
@@ -302,8 +302,7 @@ Code
 </script>
 ```
 
-Your entry data has to be contained in a `data` key and you need to `JSON.stringify` this object. The keys for files, need to
-be prefixed with `files` (example with a cover attribute: `files.cover`).
+Your entry data has to be contained in a `data` key and you need to `JSON.stringify` this object. The keys for files, need to be prefixed with `files` (example with a cover attribute: `files.cover`).
 
 ::: tip
 If you want to upload files for a component, you will have to specify the index of the item you want to add the file to.

From bf62134b0827bb87bb787eb190df7f08468e9b90 Mon Sep 17 00:00:00 2001
From: Pierre Wizla <pwizla+github@gmail.com>
Date: Wed, 4 May 2022 11:51:01 +0200
Subject: [PATCH 4/4] Format examples as code-group

---
 docs/developer-docs/latest/plugins/upload.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/developer-docs/latest/plugins/upload.md b/docs/developer-docs/latest/plugins/upload.md
index cc8b145132..e3729d9ed5 100644
--- a/docs/developer-docs/latest/plugins/upload.md
+++ b/docs/developer-docs/latest/plugins/upload.md
@@ -113,9 +113,9 @@ To upload files to your application.
 
 - `files`: The file(s) to upload. The value(s) can be a Buffer or Stream.
 
-:::: tabs card
+<code-group>
 
-::: tab Browser
+<code-block title="BROWSER">
 
 ```html
 <form>
@@ -138,10 +138,9 @@ To upload files to your application.
 </script>
 ```
 
-:::
-
-::: tab Node.js
+</code-block>
 
+<code-block title="NODE.JS">
 
 ```js
 import { FormData, Blob } from "formdata-node"
@@ -164,7 +163,9 @@ await fetch('http://localhost:1337/api/upload', {
 });
 ```
 
-:::
+</code-block>
+
+</code-group>
 
 :::caution
 You have to send FormData in your request body.