[REF]: Commented file reader page. DIscuss relevance, maybe example with CSV but functions are not the best for reading. Missing to override all reader properties. Download page missing to structure better like same host with filemosaic, another host with file mosaic and with onDownload fucntion.

Author: JinSSJ3

src/components/MainMenu/MainMenuSideBar.tsx

@@ -143,12 +143,12 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
       index: 6,
       onClick: () => navigate("/server-side"),
     },
-    {
+   /*  {
       label: "File readers",
       index: 8,
       onClick: () => navigate("/file-reader"),
     },
-
+ */
     {
       label: "File download",
       index: 9,

src/files-ui/core/reader/readers.ts

@@ -1,15 +1,20 @@
 /**
  * Reads an image (or other type) file as data URL in a promise way, 
  * so you can use await.
- * If other kind of file is sent, this function will read it anyway
- * and will return a string that contains the URL representation
+ * It will return a string that contains the URL representation
  * @param file File or Blob object
  * @returns data URL of the file
  */
-export const readAsDataURL = (file: File | Blob): Promise<string | undefined> => {
+export const readAsDataURL = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
     return new Promise<string | undefined>((resolve, reject) => {
         try {
             const reader = new FileReader();
+            reader.onprogress = () => {
+                onProgress?.();
+            }
+            reader.onerror = function () {
+                onError?.();
+            }
             reader.onload = function () {
                 resolve(reader.result as string);
             }
@@ -30,13 +35,19 @@ export const readAsDataURL = (file: File | Blob): Promise<string | undefined> =>
  * @param encoding The type of encoding such as "base64"
  * @returns data text of the file
  */
-export const readAsText = (file: File | Blob, encoding?: string): Promise<string | undefined> => {
+export const readAsText = (file: File | Blob, encoding?: string, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
     return new Promise<string | undefined>((resolve, reject) => {
         try {
             const reader = new FileReader();
             reader.onload = function () {
                 resolve(reader.result as string);
             }
+            reader.onprogress = () => {
+                onProgress?.();
+            }
+            reader.onerror = function () {
+                onError?.();
+            }
             reader.readAsText(file, encoding ? encoding : "base64");
         } catch (error) {
             reject(undefined);
@@ -52,13 +63,19 @@ export const readAsText = (file: File | Blob, encoding?: string): Promise<string
  * @param encoding The type of encoding such as "base64"
  * @returns raw binary data of the file
  */
-export const readAsBinaryString = (file: File | Blob): Promise<string | undefined> => {
+export const readAsBinaryString = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
     return new Promise<string | undefined>((resolve, reject) => {
         try {
             const reader = new FileReader();
             reader.onload = function () {
                 resolve(reader.result as string);
             }
+            reader.onprogress = () => {
+                onProgress?.();
+            }
+            reader.onerror = function () {
+                onError?.();
+            }
             reader.readAsBinaryString(file);
         } catch (error) {
             reject(undefined);
@@ -72,13 +89,19 @@ export const readAsBinaryString = (file: File | Blob): Promise<string | undefine
  * @param encoding The type of encoding such as "base64"
  * @returns ArrayBuffer representation of the file
  */
-export const readAsArrayBuffer = (file: File | Blob): Promise<string | undefined> => {
+export const readAsArrayBuffer = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
     return new Promise<string | undefined>((resolve, reject) => {
         try {
             const reader = new FileReader();
             reader.onload = function () {
                 resolve(reader.result as string);
             }
+            reader.onprogress = () => {
+                onProgress?.();
+            }
+            reader.onerror = function () {
+                onError?.();
+            }
             reader.readAsArrayBuffer(file);
         } catch (error) {
             reject(undefined);

src/pages/demo/FileCardDemoPage.jsx

@@ -74,7 +74,7 @@ const FileCardDemoPage = (props) => {
             <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
             component for allowing the user to select files. For further
             information of this component check out the{" "}
-            <a href="/components/fileinputbutton">FileInputButton</a> page.
+            <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
           </Alert>
           <br />
           <Alert severity="info">
@@ -87,7 +87,7 @@ const FileCardDemoPage = (props) => {
             <strong>Javascript</strong> example for handling the metadata that
             makes possible the information exchange between components. For
             further information about this data type check out the{" "}
-            <a href="/types#extfile">ExtFile-API. </a>
+            <AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
           </Alert>
         </section>
         <section id="image-preview">

src/pages/demo/FileMosaicDemoPage.jsx

@@ -79,7 +79,7 @@ const FileMosaicDemoPage = (props) => {
             <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
             component for allowing the user to select files. For further
             information of this component check out the{" "}
-            <a href="/components/fileinputbutton">FileInputButton</a> page.
+            <AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
           </Alert>
           <br />
           <Alert severity="info">
@@ -92,7 +92,7 @@ const FileMosaicDemoPage = (props) => {
             <strong>Javascript</strong> example for handling the metadata that
             makes possible the information exchange between components. For
             further information about this data type check out the{" "}
-            <a href="/types#extfile">ExtFile-API. </a>
+            <AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
           </Alert>
         </section>
 

src/pages/download-page/FileDownloadPage.jsx

@@ -18,7 +18,9 @@ const FileDownloadPage = (props) => {
           </MainParagraph>
         </MainContentContainer>
       </MainLayoutPage>
+<section>
 
+</section>
       <RightMenuContainer>
         <RightMenu width="240px" items={rightMenuItems} />
       </RightMenuContainer>
@@ -30,13 +32,13 @@ export default FileDownloadPage;
 const rightMenuItems = [
   {
     id: 0,
-    label: "From Same host",
-    referTo: "/types#extfile",
+    label: "Same host",
+    referTo: "/file-download#samehost",
   },
   {
     id: 1,
-    label: "From Another host",
-    referTo: "/types#validatefileresponse",
+    label: "Another host",
+    referTo: "/file-download#anotherhost",
   },
 
 ];

src/routes/MainRouter.jsx

@@ -142,10 +142,10 @@ const router = createBrowserRouter([
     path: "/types",
     element: <TypesPage />,
   },
-  {
+/*   {
     path: "/file-reader",
     element: <FileReaderPage />,
-  },
+  }, */
   {
     path: "/file-download",
     element: <FileDownloadPage />,