Merge pull request #12 from files-ui/25-feat-add-dropzone-component-missing-features-and-finish-dropzone-demo-page

25 feat add dropzone component missing features and finish dropzone demo page

Author: JinSSJ3

bugs.md

@@ -4,21 +4,21 @@
 
 - [SOLVED]on change progress the loader is reredered again and again, I think that the 3 states or layers must be there from the begining
   "preparing", "uploading", "result" - on cancel, the 2nd layer will dissapear, it will not be any big deal
-- After uploading, progress must be reiitialized to 0
+- [SOLVED] After uploading, progress must be reiitialized to 0
 - [SOLVED] FileItemMainLayer WORKS STRANGE AT THE TIME NEW fILEiTEM IS ADDED
 
 
 ## Dropzone
-- When no validation, upload removes all files.
+- [SOLVED] When no validation, upload removes all files.
 
 - [SOLVED]: action buttons rendered again and again since they were created again every time "value" prop changed
 - [SOLVED]: Uploading works in 2 times (first time stops after setting progress = UPLOADING.progrss), but fails to recover from the manager. [UPDATED]: Problem is at `useDropzoneFileListUpdater.ts` file. The problem is that hook for updating when user wants to interrupt preparing, is called at the begining of the upload process, with value of undefined in all files. It is probably the last update on localFiles outside Dropzone component.
 
-- When file is set from preparing to undefined it can be deleted, however, will appear again if onDelete is called. It would be great to add a reconciliation procedure to support different array sizes in updater hook. Or "canceled" upload status could be added and file Item should not show the "X" button when uploading and canceled. After Upload process, all files with "canceled" upload status should be set to "undefined" again. This can be a workaround.
+- [DONE] When file is set from preparing to undefined it can be deleted, however, will appear again if onDelete is called. It would be great to add a reconciliation procedure to support different array sizes in updater hook. Or "canceled" upload status could be added and file Item should not show the "X" button when uploading and canceled. After Upload process, all files with "canceled" upload status should be set to "undefined" again. This can be a workaround. (`Using the extraData for keeping track if a Filemosaic was deleted`)
 
-- [SOLVED] Dropzpne is afected by adding more files as children
+- [SOLVED] Dropzone is afected by adding more files as children
 - offset should not be used, instead a padding, given header or footer
-- When layer is visible, border in the root container must dissapear
+- [SOLVED] When layer is visible, border in the root container must dissapear
 
 ## Tooltip
 

features.md

@@ -14,6 +14,7 @@
 - Validate with accept prop
 - Validate with maxFileSize prop
 - Validate with maxFiles prop
+- custom validation
 
 ## Read
 
@@ -31,6 +32,6 @@
 - ImagePreview
 - VideoPreview
 - PDFPreview
-- JsonPreview fix rc-highlight
-- FullScreenPreview
+- JsonPreview [DONE]fix rc-highlight
+- FullScreenPreview => FullScreen
 - DropLayer

future-features.md

@@ -1,12 +1,17 @@
 # Future Possible Features
 
+## DROP
+
+WHen data transfer only text or iimage in string, event
+files dissapear in "replace". create a text file in memoory
+
 ## UTILS
 
 - custom icons
 - menu icon for FileItem ( FileOptions (menu collapsed from click in option icon) )
 - [DONE]: Outside actions or buttons for Dropzone
-- [WIP]:header and footer custom props
-- FileItem: checkbox support
+- [DONE]:header and footer custom props
+- [NOT_YET]: FileItem: checkbox support
 - [DONE] FileItem: ( smart prop ) detect when width of image is greater than height or viceversa in order to decide the orientation
 
 ## Upload

ideas.md

@@ -8,11 +8,12 @@
 
 ## Phrases
 
-- Stop pain with developing a complex widget, don't need to create a file upload component from scratch
-- If you need to do it from scratch, there is an example [show some basic code] Bellow main page component
+- Stop pain with developing a complex widget, don't need to create a file upload component from scratch [landingpage_section_3]
+- If you need to do it from scratch, there is an example [show some basic code] Bellow main page component[landing_sec_3_pat_2]
 
 
 
 ## MIgrating from dropzone-ui
+[landing_Sec_3_or_4]
 
 ## Migrating from react-dropzone

src/components/demo-components/desc-paragraph/DescParagraphProps.ts

@@ -1,6 +1,6 @@
 export type DescParagraphProps = {
-    content?:string;
-    children?:React.ReactNode;
-    margin?:string;
-    darkMode?:boolean;
+    content?: string;
+    children?: React.ReactNode;
+    margin?: string;
+    darkMode?: boolean;
 }

src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx

@@ -6,7 +6,6 @@ import {
   FullScreen,
   ImagePreview,
   VideoPreview,
-  
 } from "../../../files-ui";
 import { useEffect, useState } from "react";
 import axios from "axios";
@@ -20,13 +19,14 @@ export default function AdvancedDropzoneDemo() {
   const [videoSrc, setVideoSrc] = React.useState(undefined);
 
   const updateFiles = (incommingFiles) => {
-    console.log("incomming extFiles", incommingFiles);
-   const arrExtFIleInstances = incommingFiles.map(
+    console.log("incomming extFiles outside", incommingFiles.map(x=>x.uploadStatus));
+
+    const arrExtFIleInstances = incommingFiles.map(
       (extFile) => new ExtFileInstance(extFile)
     );
-    
+
     console.log("incomming arrExtFIleInstances", arrExtFIleInstances);
-   /*   const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
+    /*   const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
       extFileInstance.toExtFile()
     );
    
@@ -40,11 +40,12 @@ export default function AdvancedDropzoneDemo() {
   const handleSee = (imageSource) => {
     setImageSrc(imageSource);
   };
-/*   const onClean = () => {
-    setExtFiles(extFiles.filter((ef) => ef.valid !== false));
-  }; */
+
+  const handleStart = (res) => {
+    console.log("advanced demo start upload", res);
+  };
   const handleFinish = (res) => {
-    console.log("finish", res);
+    console.log("advanced demo finish upload", res);
   };
   const handleWatch = (videoSource) => {
     console.log(
@@ -106,6 +107,7 @@ export default function AdvancedDropzoneDemo() {
           //url: "http://localhost:2800/file/28048465460",
           cleanOnUpload: true,
         }}
+        onUploadStart={handleStart}
         onUploadFinish={handleFinish}
         //fakeUpload
         actionButtons={{

src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx

@@ -47,7 +47,6 @@ export default function BasicDemoDropzone() {
   };
   return (
     <Dropzone
-      style={{ minWidth: "505px" }}
       onChange={updateFiles}
       value={files}
     >
@@ -74,7 +73,6 @@ export default function BasicDemoDropzone() {
   };
   return (
     <Dropzone
-      style={{ minWidth: "505px" }}
       onChange={updateFiles}
       value={files}
     >

src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx

@@ -1,5 +1,4 @@
-import { Dropzone } from "../../../files-ui";
-import { FileMosaic } from "../../../files-ui/components/file-mosaic";
+import { Dropzone, FileMosaic } from "../../../files-ui";
 import * as React from "react";
 export default function BasicDemoDropzone() {
   const [files, setFiles] = React.useState([]);

src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx

@@ -0,0 +1,125 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneActionButtons = ({ splittedOnly = false }) => {
+  return (
+    <ShowDemoCode
+      splittedOnly={splittedOnly}
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDropzoneActionButtons;
+
+const splittedCodeJS = `<Dropzone
+    onChange={updateFiles}
+    value={files}
+    autoClean
+    uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+    fakeUpload
+    actionButtons={{
+      position: "bottom",
+      uploadButton: { style: { textTransform: "uppercase" } },
+      abortButton: {},
+      cleanButton: {},
+      deleteButton: {},
+    }}
+>
+  {files.length > 0 &&
+    files.map((file) => (
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+    ))}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone
+    onChange={updateFiles}
+    value={files}
+    autoClean
+    uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+    fakeUpload
+    actionButtons={{
+      position: "bottom",
+      uploadButton: { style: { textTransform: "uppercase" } },
+      abortButton: {},
+      cleanButton: {},
+      deleteButton: {},
+    }}
+>
+  {files.length > 0 &&
+    files.map((file: ExtFile) => (
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+    ))}
+</Dropzone>`;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone, FileMosaic } from "@files-ui/react";
+
+export default function App() {
+  const [files, setFiles] = React.useState([]);
+  const updateFiles = (incommingFiles) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  return (
+    <Dropzone
+        onChange={updateFiles}
+        value={files}
+        autoClean
+        uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+        fakeUpload
+        actionButtons={{
+            position: "bottom",
+            uploadButton: { style: { textTransform: "uppercase" } },
+            abortButton: {},
+            cleanButton: {},
+            deleteButton: {},
+        }}
+    >
+      {files.length > 0 &&
+        files.map((file) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+};`;
+
+const completeCodeTS = `import * as React from "react";
+import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+
+export default function App() {
+  const [files, setFiles] = React.useState<ExtFile[]>([]);
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id: string | number | undefined) => {
+    setFiles(files.filter((x: ExtFile) => x.id !== id));
+  };
+  return (
+    <Dropzone
+        onChange={updateFiles}
+        value={files}
+        autoClean
+        uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+        fakeUpload
+        actionButtons={{
+            position: "bottom",
+            uploadButton: { style: { textTransform: "uppercase" } },
+            abortButton: {},
+            cleanButton: {},
+            deleteButton: {},
+        }}
+    >
+      {files.length > 0 &&
+        files.map((file:ExtFile) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+}`;