diff --git a/src/components/MainMenu/MainMenuSideBar.tsx b/src/components/MainMenu/MainMenuSideBar.tsx
index 23f2928b325fbe52b9a6ee3550d203e0a178b30c..5b9eda571112a5c3e98681e6b24da545fea92e70 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 a2a51fe92bc17f20b223a029ddbb86ec076dbafc..91ea19f3d85f98237d3f31320a6623a34a94dff3 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 c19ee9dda053552cb2f6b072f26b07cdc2bbf169..c4c96d3f8c74a5093e7d432fd78e9ec2a2ab64a2 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 9ee43d9fdda93304c1229f5e4245358ee58c4329..a2b4910aedd4a60775591822b06731064e1d0ad4 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 d58b9999ac90e93923fb4ef1176c02b3134e49e8..526488aaf1c7c5c93d004bd6fa2af970819c58b2 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 ecc323b2c87a2721516a5e863cf5746ba0a7cc86..947e27d9145c3ce37df06930fe3a5ee983953780 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 />,