Upload: improve code examples

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
+<code-group>
+
+<code-block title="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>
 ```
 
+</code-block>
+
+<code-block title="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)
+});
+```
+
+</code-block>
+
+</code-group>
+
 :::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,36 @@ 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.