Skip to content

Commit bf29a64

Browse files
JinSSJ3JinSSJ3
committed
[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.
1 parent a97adf3 commit bf29a64

File tree

6 files changed

+43
-18
lines changed

6 files changed

+43
-18
lines changed

‎src/components/MainMenu/MainMenuSideBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,12 @@ export default function MainMenuSideBar(props: MainMenuSideBarProps) {
143143
index: 6,
144144
onClick: () => navigate("/server-side"),
145145
},
146-
{
146+
/* {
147147
label: "File readers",
148148
index: 8,
149149
onClick: () => navigate("/file-reader"),
150150
},
151-
151+
*/
152152
{
153153
label: "File download",
154154
index: 9,

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

Lines changed: 29 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
/**
22
* Reads an image (or other type) file as data URL in a promise way,
33
* so you can use await.
4-
* If other kind of file is sent, this function will read it anyway
5-
* and will return a string that contains the URL representation
4+
* It will return a string that contains the URL representation
65
* @param file File or Blob object
76
* @returns data URL of the file
87
*/
9-
export const readAsDataURL = (file: File | Blob): Promise<string | undefined> => {
8+
export const readAsDataURL = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
109
return new Promise<string | undefined>((resolve, reject) => {
1110
try {
1211
const reader = new FileReader();
12+
reader.onprogress = () => {
13+
onProgress?.();
14+
}
15+
reader.onerror = function () {
16+
onError?.();
17+
}
1318
reader.onload = function () {
1419
resolve(reader.result as string);
1520
}
@@ -30,13 +35,19 @@ export const readAsDataURL = (file: File | Blob): Promise<string | undefined> =>
3035
* @param encoding The type of encoding such as "base64"
3136
* @returns data text of the file
3237
*/
33-
export const readAsText = (file: File | Blob, encoding?: string): Promise<string | undefined> => {
38+
export const readAsText = (file: File | Blob, encoding?: string, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
3439
return new Promise<string | undefined>((resolve, reject) => {
3540
try {
3641
const reader = new FileReader();
3742
reader.onload = function () {
3843
resolve(reader.result as string);
3944
}
45+
reader.onprogress = () => {
46+
onProgress?.();
47+
}
48+
reader.onerror = function () {
49+
onError?.();
50+
}
4051
reader.readAsText(file, encoding ? encoding : "base64");
4152
} catch (error) {
4253
reject(undefined);
@@ -52,13 +63,19 @@ export const readAsText = (file: File | Blob, encoding?: string): Promise<string
5263
* @param encoding The type of encoding such as "base64"
5364
* @returns raw binary data of the file
5465
*/
55-
export const readAsBinaryString = (file: File | Blob): Promise<string | undefined> => {
66+
export const readAsBinaryString = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
5667
return new Promise<string | undefined>((resolve, reject) => {
5768
try {
5869
const reader = new FileReader();
5970
reader.onload = function () {
6071
resolve(reader.result as string);
6172
}
73+
reader.onprogress = () => {
74+
onProgress?.();
75+
}
76+
reader.onerror = function () {
77+
onError?.();
78+
}
6279
reader.readAsBinaryString(file);
6380
} catch (error) {
6481
reject(undefined);
@@ -72,13 +89,19 @@ export const readAsBinaryString = (file: File | Blob): Promise<string | undefine
7289
* @param encoding The type of encoding such as "base64"
7390
* @returns ArrayBuffer representation of the file
7491
*/
75-
export const readAsArrayBuffer = (file: File | Blob): Promise<string | undefined> => {
92+
export const readAsArrayBuffer = (file: File | Blob, onProgress?: Function, onError?: Function): Promise<string | undefined> => {
7693
return new Promise<string | undefined>((resolve, reject) => {
7794
try {
7895
const reader = new FileReader();
7996
reader.onload = function () {
8097
resolve(reader.result as string);
8198
}
99+
reader.onprogress = () => {
100+
onProgress?.();
101+
}
102+
reader.onerror = function () {
103+
onError?.();
104+
}
82105
reader.readAsArrayBuffer(file);
83106
} catch (error) {
84107
reject(undefined);

‎src/pages/demo/FileCardDemoPage.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ const FileCardDemoPage = (props) => {
7474
<CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
7575
component for allowing the user to select files. For further
7676
information of this component check out the{" "}
77-
<a href="/components/fileinputbutton">FileInputButton</a> page.
77+
<AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
7878
</Alert>
7979
<br />
8080
<Alert severity="info">
@@ -87,7 +87,7 @@ const FileCardDemoPage = (props) => {
8787
<strong>Javascript</strong> example for handling the metadata that
8888
makes possible the information exchange between components. For
8989
further information about this data type check out the{" "}
90-
<a href="/types#extfile">ExtFile-API. </a>
90+
<AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
9191
</Alert>
9292
</section>
9393
<section id="image-preview">

‎src/pages/demo/FileMosaicDemoPage.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const FileMosaicDemoPage = (props) => {
7979
<CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
8080
component for allowing the user to select files. For further
8181
information of this component check out the{" "}
82-
<a href="/components/fileinputbutton">FileInputButton</a> page.
82+
<AnchorToTab href="/components/fileinputbutton">FileInputButton</AnchorToTab> page.
8383
</Alert>
8484
<br />
8585
<Alert severity="info">
@@ -92,7 +92,7 @@ const FileMosaicDemoPage = (props) => {
9292
<strong>Javascript</strong> example for handling the metadata that
9393
makes possible the information exchange between components. For
9494
further information about this data type check out the{" "}
95-
<a href="/types#extfile">ExtFile-API. </a>
95+
<AnchorToTab href="/types#extfile">ExtFile-API. </AnchorToTab>
9696
</Alert>
9797
</section>
9898

‎src/pages/download-page/FileDownloadPage.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ const FileDownloadPage = (props) => {
1818
</MainParagraph>
1919
</MainContentContainer>
2020
</MainLayoutPage>
21+
<section>
2122

23+
</section>
2224
<RightMenuContainer>
2325
<RightMenu width="240px" items={rightMenuItems} />
2426
</RightMenuContainer>
@@ -30,13 +32,13 @@ export default FileDownloadPage;
3032
const rightMenuItems = [
3133
{
3234
id: 0,
33-
label: "From Same host",
34-
referTo: "/types#extfile",
35+
label: "Same host",
36+
referTo: "/file-download#samehost",
3537
},
3638
{
3739
id: 1,
38-
label: "From Another host",
39-
referTo: "/types#validatefileresponse",
40+
label: "Another host",
41+
referTo: "/file-download#anotherhost",
4042
},
4143

4244
];

‎src/routes/MainRouter.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,10 @@ const router = createBrowserRouter([
142142
path: "/types",
143143
element: <TypesPage />,
144144
},
145-
{
145+
/* {
146146
path: "/file-reader",
147147
element: <FileReaderPage />,
148-
},
148+
}, */
149149
{
150150
path: "/file-download",
151151
element: <FileDownloadPage />,

0 commit comments

Comments
 (0)