Merge branch 'UploadFiles' of https://github.com/joaojmendes/sp-dev-fx-controls-react into joaojmendes-UploadFiles

Author: joelfmrodrigues

docs/documentation/docs/assets/UploadFiles.gif

@@ -0,0 +1,49 @@
+# UploadFiles
+
+This control allows to drag and drop files and manage files before upload.
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the following modules to your component:
+
+```TypeScript
+import {
+  UploadFiles,
+} from '@pnp/spfx-controls-react/lib/UploadFiles';
+```
+
+- Use the UploadFiles control in your code as follows:
+
+```jsx
+ <UploadFiles
+          pageSize={20}
+          context={context}
+          title="Upload Files"
+          onUploadFiles={(files) => {
+            console.log("files", files);
+          }}
+          themeVariant={themeVariant}
+        />
+```
+
+ 
+![uploadFiles](../assets/UploadFiles.gif)
+![uploadFiles](../assets/UploadFiles02.png)
+![uploadFiles](../assets/UploadFiles01.png)
+ 
+## Implementation
+
+The `UploadFiles` can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| pageSize | number  | no | number of files to show per page base on this value the height of control is calculate, default 15 |
+| context | WebPartContext | yes | webPartContext |
+| title | string | yes | title |
+| onUploadFiles | (files: File[]) => void; | yes | Method that returns all Files[]     |
+| themeVariant | IReadonlyTheme | no |Theme Variant |
+
+
+
+![](https://telemetry.sharepointpnp.com/sp-dev-fx-controls-react/wiki/controls/UploadFiles)

docs/documentation/docs/assets/UploadFiles01.png

@@ -20,6 +20,7 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fluentui/react-file-type-icons": "^8.8.3",
     "@fluentui/react-hooks": "^8.2.6",
     "@fluentui/react-northstar": "0.51.3",
     "@fluentui/react-theme-provider": "^0.18.5",
@@ -48,6 +49,7 @@
     "color": "3.1.2",
     "date-fns": "^2.22.1",
     "he": "^1.2.0",
+    "jotai": "^1.11.0",
     "lodash": "4.17.21",
     "markdown-it": "^12.3.2",
     "moment": "2.29.4",