lupine.components 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lupine.components",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "license": "MIT",
   "author": "uuware.com",
   "homepage": "https://uuware.com/",

package/src/lib/download-file.ts

@@ -0,0 +1,118 @@
+import { NotificationColor, NotificationMessage } from 'lupine.components';
+import { getRenderPageProps } from 'lupine.web';
+
+const _saveChunkSize = {
+  downloadSize: 1024 * 200,
+};
+export const setDownloadChunkSize = (chunkSize: number) => {
+  _saveChunkSize.downloadSize = chunkSize;
+};
+export const getDownloadChunkSize = () => {
+  return _saveChunkSize.downloadSize;
+};
+
+// should return { chunkNumber: number }
+export const downloadFileChunk = async (
+  downloadUrl: string,
+  rangeStart: number,
+  rangeLength: number,
+  retryCount = 3,
+  retryMessage = '' // can have ${tryCount}
+) => {
+  let url = downloadUrl + (downloadUrl.indexOf('?') === -1 ? '?' : '');
+  url += `&start=${rangeStart.toString()}`;
+  url += `&length=${rangeLength.toString()}`;
+  let tryCount = 0;
+  while (tryCount < retryCount) {
+    try {
+      const rawData = (await getRenderPageProps().renderPageFunctions.fetchData(
+        url,
+        undefined,
+        true,
+        true
+      )) as Response;
+      // console.log('downloadFileChunk', rawData);
+      const fileSize = rawData.headers.get('file-size');
+      const partSize = rawData.headers.get('part-size');
+      if (!fileSize || !partSize) {
+        console.log(`downloadFileChunk error`, rawData);
+        return null;
+      }
+      return {
+        fileSize: parseInt(fileSize, 10),
+        partSize: parseInt(partSize, 10),
+        arrayBuffer: await rawData.arrayBuffer(),
+      };
+    } catch (error) {
+      console.log(`downloadFileChunk error, try: ${tryCount}`, error);
+    }
+    tryCount++;
+    if (retryMessage) {
+      NotificationMessage.sendMessage(
+        retryMessage.replace('${tryCount}', tryCount.toString()),
+        NotificationColor.Warning
+      );
+    }
+  }
+  return null;
+};
+
+export interface DownloadFileProps {
+  fileSize: number;
+  partSize: number;
+  arrayBuffer: ArrayBuffer;
+}
+
+/*
+A sample for text result:
+const decoder = new TextDecoder('utf-8');
+    const chunks: string[] = [];
+    let downloadSize = 0;
+    const processResponse = (result: DownloadFileProps) => {
+      if (!result || result.fileSize <= 0 || result.partSize < 0) {
+        NotificationMessage.sendMessage('加载数据失败', NotificationColor.Error);
+        return false;
+      }
+      const fileSize = result.fileSize;
+      downloadSize += result.partSize;
+      progressUpdate?.onProgress?.(Math.round((downloadSize / fileSize) * 100) / 100, downloadSize, fileSize);
+      chunks.push(decoder.decode(result.arrayBuffer));
+      return true;
+};
+*/
+
+export const downloadFile = async (
+  downloadUrl: string,
+  processResponse: (result: DownloadFileProps) => boolean | undefined, // true: success, false: failed, undefined: continue
+  chunkSize = 0,
+  retryCount = 3,
+  retryMessage = 'Downloading failed, try: ${tryCount}' // can have ${tryCount}
+) => {
+  if (chunkSize < 1) {
+    chunkSize = _saveChunkSize.downloadSize;
+  }
+  let downloadSize = 0;
+  let expectedFileSize: number | null = null;
+  while (true) {
+    const start = downloadSize;
+    const length = chunkSize;
+    const downloadResult = await downloadFileChunk(downloadUrl, start, length, retryCount, retryMessage);
+    if (!downloadResult) {
+      return false;
+    }
+    if (expectedFileSize === null) {
+      expectedFileSize = downloadResult.fileSize;
+    }
+    downloadSize += downloadResult.partSize;
+    // console.log(`downloadSize: ${downloadSize}, downloadFileChunk:`, downloadResult);
+    const result = processResponse(downloadResult);
+    if (result !== undefined) {
+      // success or failed
+      return result;
+    }
+    if (downloadSize >= expectedFileSize) {
+      break;
+    }
+  }
+  return true;
+};

package/src/lib/index.ts

@@ -2,6 +2,7 @@ export * from './dom';
 export * from './date-utils';
 export * from './deep-merge';
 export * from './document-ready';
+export * from './download-file';
 export * from './drag-util';
 export * from './dynamical-load';
 export * from './format-bytes';

package/src/lib/upload-file.ts

@@ -1,21 +1,19 @@
-import { getRenderPageProps } from "lupine.web";
+import { getRenderPageProps } from 'lupine.web';
+import { NotificationColor, NotificationMessage } from '../components';
 
 const _saveChunkSize = {
-  size: 1024 * 500,
+  size: 1024 * 200,
 };
-export const setChunkSize = (chunkSize: number) => {
+export const setUploadChunkSize = (chunkSize: number) => {
   _saveChunkSize.size = chunkSize;
 };
-export const getChunkSize = () => {
+export const getUploadChunkSize = () => {
   return _saveChunkSize.size;
 };
 export const checkUploadedFileSize = async (uploadUrl: string) => {
-  // const response = await fetch(uploadUrl + '?check-size=1', {
-  //   method: 'POST',
-  // });
-  // const json = await response.json();
-  const json = await getRenderPageProps().renderPageFunctions.fetchData(uploadUrl + '?check-size=1');
-  return json && json.size ? json.size : 0;
+  let url = uploadUrl + (uploadUrl.indexOf('?') === -1 ? '?' : '') + '&check-size=1';
+  const json = await getRenderPageProps().renderPageFunctions.fetchData(url);
+  return json && json.json.size ? json.json.size : 0;
 };
 
 // should return { chunkNumber: number }
@@ -24,22 +22,39 @@ export const uploadFileChunk = async (
   chunkNumber: number,
   totalChunks: number,
   uploadUrl: string,
-  key: string
+  key: string,
+  retryCount = 3,
+  retryMessage = '' // can have ${tryCount}
 ) => {
-  // this must be the FE so we can use fetch
   let url = uploadUrl + (uploadUrl.indexOf('?') === -1 ? '?' : '');
   url += `&chunkNumber=${chunkNumber.toString()}`;
   url += `&totalChunks=${totalChunks.toString()}`;
   if (key) {
     url += `&key=${key}`;
   }
-  // const response = await fetch(url, {
-  //   method: 'POST',
-  //   body: chunk,
-  // });
-  // const json = await response.json();
-  console.log(`uploadFileChunk, ${uploadUrl}, index: ${chunkNumber}, total: ${totalChunks}, len: ${chunk.length}`);
-  const json = await getRenderPageProps().renderPageFunctions.fetchData(url, chunk);
+  let tryCount = 0;
+  let json;
+  while (tryCount < retryCount) {
+    try {
+      json = await getRenderPageProps().renderPageFunctions.fetchData(url, chunk);
+      if (json && json.json) {
+        json = json.json;
+      }
+      if (json && json.status) {
+        // ok or error
+        break;
+      }
+    } catch (error) {
+      console.log(`uploadFileChunk error, try: ${tryCount}`, error);
+    }
+    tryCount++;
+    if (retryMessage) {
+      NotificationMessage.sendMessage(
+        retryMessage.replace('${tryCount}', tryCount.toString()),
+        NotificationColor.Warning
+      );
+    }
+  }
   return json;
 };
 
@@ -47,13 +62,22 @@ export const uploadFile = async (
   file: File | string,
   uploadUrl: string,
   progressFn?: (percentage: number, chunkNumber: number, totalChunks: number) => void,
-  chunkSize = _saveChunkSize.size
+  chunkSize = 0,
+  retryCount = 3,
+  retryMessage = '' // can have ${tryCount}
 ) => {
   // const uploadedSize = await checkUploadedFileSize(uploadUrl);
   let key = '';
   const len = file instanceof File ? file.size : file.length;
+  if (!chunkSize) {
+    chunkSize = _saveChunkSize.size;
+  }
   if (len <= chunkSize) {
-    return await uploadFileChunk(file, 0, 1, uploadUrl, key);
+    const uploaded = await uploadFileChunk(file, 0, 1, uploadUrl, key, retryCount, retryMessage);
+    if (!uploaded || uploaded.status !== 'ok') {
+      return false;
+    }
+    return true;
   }
 
   const totalChunks = Math.ceil(len / chunkSize);
@@ -61,8 +85,8 @@ export const uploadFile = async (
     const start = i * chunkSize;
     const end = Math.min((i + 1) * chunkSize, len);
     const chunk = file.slice(start, end);
-    const uploaded = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key);
-    if (!uploaded || uploaded.chunkNumber === i.toString() || !uploaded.key) {
+    const uploaded = await uploadFileChunk(chunk, i, totalChunks, uploadUrl, key, retryCount, retryMessage);
+    if (!uploaded || uploaded.status !== 'ok') {
       return false;
     }
     key = uploaded.key;