[RINNE]: Test deplot deelo.cloud

src/Pages/Lab/DropzoneArea/DropzoneAreaDemo.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Dropzone, DropzoneArea } from "../../../mega-dropzone-ui/components/dropzone";
+import { FileValidated } from "../../../mega-dropzone-ui/utils/file-validation/validation.types";
+import { makeFileList } from "../makeFilelList";
+
+const DropzoneAreaDemo = (props: any) => {
+  const [filesValidated, setFilesValidated] = React.useState<FileValidated[]>([]);
+  const handleChange = async(fileValidatedList: FileValidated[]) => {
+    setFilesValidated(fileValidatedList);
+    const myFileArray: File[] = fileValidatedList.map(
+      (f: FileValidated) => f.file
+    );
+    //let otherFiles: FileList = new FileList();
+    //makeFileList(myFileArray)
+    let myFileList: FileList = await makeFileList(myFileArray);
+    console.log("FileList from Array of Files", myFileList); 
+  };
+  // .... more code
+
+  return (
+    <div>
+      <DropzoneArea value={filesValidated} onChange={handleChange}>
+        Drag'drop files
+      </DropzoneArea>
+      <Dropzone>
+        Dropzone
+      </Dropzone>
+      <ul>
+        {filesValidated.map((f: FileValidated) => (
+          <li key={f.id}>{`${f.file.name} - ${f.valid}`}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+export default DropzoneAreaDemo;

src/Pages/Lab/Lab.jsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import IconList from "../../Components/Dui_IconsList/IconList";
 import Previews from "../../Components/Dui_Previews/Previews";
+import { DropzoneArea } from "../../mega-dropzone-ui/components/dropzone";
+import DropzoneAreaDemo from "./DropzoneArea/DropzoneAreaDemo";
 
 const Lab = (props) => {
   return (
@@ -26,6 +28,7 @@ const Lab = (props) => {
       <h2>Avatar:</h2>
       <br />
       <h2>Dropzone:</h2>
+      <DropzoneAreaDemo/>
       <br />
     </div>
   );

src/Pages/Lab/makeFilelList.js

@@ -0,0 +1,56 @@
+export const makeFileList = (myFileArray) => {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.style.display="none";
+    const label = document.createElement("label");
+    label.style.display="none";
+    const text = document.createTextNode("click to set files\n");
+    const form = document.createElement("form");
+    const data = myFileArray;
+    // https://github.com/w3c/clipboard-apis/issues/33
+    class _DataTransfer {
+      constructor() {
+        return new ClipboardEvent("").clipboardData || new DataTransfer();
+      }
+    }
+    input.type = "file";
+    input.name = "files[]";
+    input.multiple = true;
+    input.id = "files";
+    text.textContent = text.textContent.concat(
+      data.map(({ name }) => name).join(", "),
+      "\n"
+    );
+
+    label.appendChild(text);
+    form.appendChild(label);
+    form.appendChild(input);
+    document.body.appendChild(form);
+    // https://github.com/whatwg/html/issues/3222
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
+    label.onclick = (e) => {
+      const dt = new _DataTransfer();
+      for (let file of data) {
+        dt.items.add(file);
+      }
+      if (dt.files.length) {
+        input.files = dt.files;
+      }
+      const fd = new FormData(form);
+      for (const file of input.files) {
+        //console.log(file); // `File` objects set at `data`
+      }
+      for (const [key, prop] of fd) {
+       // console.log(key, prop);
+      }
+      //console.log(input.files);
+      resolve(input.files);
+    };
+    // not dispatched at Firefox 57 when set using `input.files = dt.files`
+    input.onchange = (e) => {
+      console.log("onchange", e, input.files);
+      //resolve("onchange", input.files);
+    };
+    label.click();
+  });
+};

src/Pages/Lab/makeFilelList.txt

@@ -0,0 +1,56 @@
+export const makeFileList = (myFileArray) => {
+  return new Promise((resolve, reject) => {
+    const input = document.createElement("input");
+    input.style.display="none";
+    const label = document.createElement("label");
+    label.style.display="none";
+    const text = document.createTextNode("click to set files\n");
+    const form = document.createElement("form");
+    const data = myFileArray;
+    // https://github.com/w3c/clipboard-apis/issues/33
+    class _DataTransfer {
+      constructor() {
+        return new ClipboardEvent("").clipboardData || new DataTransfer();
+      }
+    }
+    input.type = "file";
+    input.name = "files[]";
+    input.multiple = true;
+    input.id = "files";
+    text.textContent = text.textContent.concat(
+      data.map(({ name }) => name).join(", "),
+      "\n"
+    );
+
+    label.appendChild(text);
+    form.appendChild(label);
+    form.appendChild(input);
+    document.body.appendChild(form);
+    // https://github.com/whatwg/html/issues/3222
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1416488
+    label.onclick = (e) => {
+      const dt = new _DataTransfer();
+      for (let file of data) {
+        dt.items.add(file);
+      }
+      if (dt.files.length) {
+        input.files = dt.files;
+      }
+      const fd = new FormData(form);
+      for (const file of input.files) {
+        //console.log(file); // `File` objects set at `data`
+      }
+      for (const [key, prop] of fd) {
+       // console.log(key, prop);
+      }
+      //console.log(input.files);
+      resolve(input.files);
+    };
+    // not dispatched at Firefox 57 when set using `input.files = dt.files`
+    input.onchange = (e) => {
+      console.log("onchange", e, input.files);
+      //resolve("onchange", input.files);
+    };
+    label.click();
+  });
+};

src/Router/MainRouter.js

@@ -8,20 +8,13 @@ import FileItemApi from "../Pages/Api/FileItemApi";
 import Lab from "../Pages/Lab/Lab";
 import MainPage from "../Pages/MainPage/MainPage";
 const Main = (props) => {
-
-
-
-
-
-
-
   return (
     <BrowserRouter>
       <Routes>
-        {/* <Route path="/" element={<MainPage />} />
-        <Route path="/code-generator" element={<InteractiveCode />} /> */}
-        <Route path="/" element={<Lab/>} />
-        <Route path="/icons" element={<IconList/>} />
+        <Route path="/" element={<MainPage />} />
+        <Route path="/code-generator" element={<InteractiveCode />} />
+        {/* <Route path="/" element={<Lab />} /> */}
+        <Route path="/icons" element={<IconList />} />
         <Route path="/api" element={<Api />}>
           <Route path="dropzone" element={<DropzoneApi />} />
           <Route path="fileitem" element={<FileItemApi />} />

src/dropzone-ui/components/dropzone/components/Dropzone/Dropzone.scss

@@ -0,0 +1,140 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
+
+.dropzone-ui {
+  .dropzone-ui-ripple {
+    position: absolute;
+    width: 0%;
+    height: 0%;
+    //background-color: aqua;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    //padding-left: 15px;
+    //z-index: -1;
+    span.ripple {
+      // width: 100%;
+      //height: 100%;
+      // overflow: hidden;
+      position: absolute;
+      border-radius: 50%;
+      transform: scale(0);
+      animation: ripple 500ms linear;
+      background-color: rgba(255, 255, 255, 0.7);
+    }
+
+    @keyframes ripple {
+      to {
+        transform: scale(4);
+        opacity: 0;
+      }
+    }
+  }
+  color: #646c7f;
+  position: relative;
+  min-height: 280px;
+  border-radius: 4px;
+  //margin: 4%;
+  //width: calc(100% - 4px);
+  width: calc(100% - 2px);
+  //width: 100%;
+  //min-width: 500px;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  //overflow: hidden;
+ // padding: 24px 0;
+  &.drag {
+    border: none;
+  }
+  &.clickable {
+    cursor: pointer;
+  }
+/*   span.ripple {
+    // width: 100%;
+    //height: 100%;
+    // overflow: hidden;
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple 500ms linear;
+    background-color: rgba(255, 255, 255, 0.7);
+  }
+
+  @keyframes ripple {
+    to {
+      transform: scale(4);
+      opacity: 0;
+    }
+  } */
+
+  //verflow: hidden;
+  .dz-ui-header {
+    height: 22px;
+
+    position: absolute;
+    cursor: text;
+    top: 0;
+    display: flex;
+    width: calc(100% - 10px);
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    //height: 30px;
+    //font-weight: 300;
+    font-family: "Poppins", sans-serif;
+    padding-right: 10px;
+    //border-bottom: 1px dotted #646c7f;
+    font-size: 0.9em;
+  }
+  .dz-ui-footer {
+    //margin-left: 5px;
+    height: 23px;
+    position: absolute;
+    cursor: text;
+    bottom: 0;
+    width: calc(100% - 10px);
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    border-top: 1px dotted grey;
+    background-color: #80808021;
+    //height: 30px;
+    font-family: "Poppins", sans-serif;
+    padding-left: 10px;
+    font-size: 1em;
+  }
+}
+
+.dropzone-ui-layer {
+  width: 0%;
+  height: 0%;
+  z-index: 20;
+  &.drag {
+    position: absolute;
+    left: 0;
+    top: 0;
+    //width: calc(100% - 4px);
+    //height: calc(100% - 4px);
+    width: 100%;
+    height: 100%;
+  }
+}
+.dz-ui-label {
+  text-rendering: optimizeLegibility;
+  font-size: 1.5em;
+  font-family: "Poppins", sans-serif;
+  text-align: center;
+  font-weight: 500;
+  letter-spacing: 0.02857em;
+  @media (max-width: 600px) {
+    font-size: 1.3em;
+  }
+  word-break: normal;
+  //font-family: "Poppins", sans-serif;
+  //font-weight: 600;
+}