From bf29a64d1f23ab54b95827ee6a2a14503a4adf42 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 21 Mar 2023 16:51:04 -0500
Subject: [PATCH] [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.
---
src/components/MainMenu/MainMenuSideBar.tsx | 4 +--
src/files-ui/core/reader/readers.ts | 35 ++++++++++++++++----
src/pages/demo/FileCardDemoPage.jsx | 4 +--
src/pages/demo/FileMosaicDemoPage.jsx | 4 +--
src/pages/download-page/FileDownloadPage.jsx | 10 +++---
src/routes/MainRouter.jsx | 4 +--
6 files changed, 43 insertions(+), 18 deletions(-)
diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 23f2928..5b9eda5 100644
--- a/src/components/MainMenu/MainMenuSideBar.tsx
+++ b/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,
diff --git a/src/files-ui/core/reader/readers.ts b/src/files-ui/core/reader/readers.ts
index a2a51fe..91ea19f 100644
--- a/src/files-ui/core/reader/readers.ts
+++ b/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);
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index c19ee9d..c4c96d3 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/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">
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index 9ee43d9..a2b4910 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/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>
diff --git a/src/pages/download-page/FileDownloadPage.jsx b/src/pages/download-page/FileDownloadPage.jsx
index d58b999..526488a 100644
--- a/src/pages/download-page/FileDownloadPage.jsx
+++ b/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",
},
];
diff --git a/src/routes/MainRouter.jsx b/src/routes/MainRouter.jsx
index ecc323b..947e27d 100644
--- a/src/routes/MainRouter.jsx
+++ b/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 />,
--
GitLab