readme with a simplified use

Author: mikocot

README.md

@@ -17,67 +17,102 @@ React mui fileuploader is a React component based on @mui v5 that allows you to
 ## [DEMO](https://eb6ie7.csb.app/)
 
 ## 🚀 Installation
+
 ```nodejs
   npm install react-mui-fileuploader
 ```
 
 ## 💻 Usage
+
+```javascript 
+const handleFileUploadError = (error) => {
+  // Do something...
+}
+
+const handleFilesChange = (files) => {
+  // Do something...
+  setUploadedFiles([...files]);
+}
+
+return (
+  <FileUpload 
+    getBase64={false}
+    multiFile={true}
+    disabled={false}
+    title="My awesome file uploader"
+    header="[Drag to drop]"
+    leftLabel="or"
+    rightLabel="to select files"
+    buttonLabel="click here"
+    buttonRemoveLabel="Remove all"
+    maxFileSize={10}
+    maxUploadFiles={0}
+    maxFilesContainerHeight={357}
+    acceptedType={'image/*'}
+    errorSizeMessage={'fill it or remove it to use the default error message'}
+    allowedExtensions={['jpg', 'jpeg']}
+    onFilesChange={handleFilesChange}
+    onError={handleFileUploadError}
+    imageSrc={'path/to/custom/image'}
+    BannerProps={{ elevation: 0, variant: "outlined" }}
+    onContextReady={context => {
+      // access to component context here
+    }}
+    ContainerProps={{
+      elevation: 0,
+      variant: "outlined",
+      sx: { p: 1 }
+    }}
+    PlaceholderImageDimension={{
+      xs: { width: 128, height: 128 },
+      sm: { width: 128, height: 128 },
+      md: { width: 164, height: 164 },
+      lg: { width: 256, height: 256 }
+    }}
+  />
+)
+
+```
+
+## 🎨 Possible application
+
 ```javascript
-import React from 'react'
-import ReactDOM from 'react-dom'
-import FileUpload from "react-mui-fileuploader"
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import FileUpload from "react-mui-fileuploader";
 
 function Wrapper() {
-  
-  const handleFileUploadError = (error) => {
-    // Do something...
-  }
-  
+  const [filesToUpload, setFilesToUpload] = useState([]);
+
   const handleFilesChange = (files) => {
-    // Do something...
-  }
+    // Update chosen files
+    setFilesToUpload([...files]);
+  };
+
+  const uploadFiles = () => {
+    // Create a form and post it to server
+    let formData = new FormData();
+    filesToUpload.forEach((file) => formData.append("files", file));
+
+    fetch("/file/upload", {
+      method: "POST",
+      body: formData
+    });
+  };
 
   return (
-    <FileUpload 
-      getBase64={false}
-      multiFile={true}
-      disabled={false}
-      title="My awesome file uploader"
-      header="[Drag to drop]"
-      leftLabel="or"
-      rightLabel="to select files"
-      buttonLabel="click here"
-      buttonRemoveLabel="Remove all"
-      maxFileSize={10}
-      maxUploadFiles={0}
-      maxFilesContainerHeight={357}
-      acceptedType={'image/*'}
-      errorSizeMessage={'fill it or remove it to use the default error message'}
-      allowedExtensions={['jpg', 'jpeg']}
-      onFilesChange={handleFilesChange}
-      onError={handleFileUploadError}
-      imageSrc={'path/to/custom/image'}
-      BannerProps={{ elevation: 0, variant: "outlined" }}
-      onContextReady={context => {
-        // access to component context here
-      }}
-      ContainerProps={{
-        elevation: 0,
-        variant: "outlined",
-        sx: { p: 1 }
-      }}
-      PlaceholderImageDimension={{
-        xs: { width: 128, height: 128 },
-        sm: { width: 128, height: 128 },
-        md: { width: 164, height: 164 },
-        lg: { width: 256, height: 256 }
-      }}
-    />
-  )
+    <>
+      <FileUpload
+        multiFile={true}
+        onFilesChange={handleFilesChange}
+        onContextReady={(context) => {}}
+      />
+      <button onClick={uploadFiles}>Upload</button>
+    </>
+  );
 }
 
-ReactDOM.render(<Wrapper />, document.querySelector('#root'))
-
+ReactDOM.render(<Wrapper />, document.querySelector("#root"));
 ```
 
 ## Data structure