diff --git a/src/pages/credentials/index.tsx b/src/pages/credentials/index.tsx index 1c20f5861..cfd124b7a 100644 --- a/src/pages/credentials/index.tsx +++ b/src/pages/credentials/index.tsx @@ -11,11 +11,7 @@ import { useRouter } from 'next/router'; import * as Yup from 'yup'; import { keyAttributes } from 'types'; import { setKey, SESSION_KEYS, getKey } from 'utils/storage/sessionStorage'; -import * as Comlink from 'comlink'; - -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); +import CryptoWorker from 'utils/crypto/cryptoWorker'; const Image = styled.img` width: 200px; diff --git a/src/pages/gallery/components/AddCollection.tsx b/src/pages/gallery/components/AddCollection.tsx index b697c32a1..9a3cce2d1 100644 --- a/src/pages/gallery/components/AddCollection.tsx +++ b/src/pages/gallery/components/AddCollection.tsx @@ -42,7 +42,6 @@ export default function AddCollection(props) {
diff --git a/src/pages/gallery/components/CollectionDropZone.tsx b/src/pages/gallery/components/CollectionDropZone.tsx index 5f3baed8e..e9a59b728 100644 --- a/src/pages/gallery/components/CollectionDropZone.tsx +++ b/src/pages/gallery/components/CollectionDropZone.tsx @@ -33,13 +33,7 @@ function CollectionDropZone({ setProgressView(false); } }; - return ( - - ); + return ; } export default CollectionDropZone; diff --git a/src/pages/generate/index.tsx b/src/pages/generate/index.tsx index e68656b89..c83d947ba 100644 --- a/src/pages/generate/index.tsx +++ b/src/pages/generate/index.tsx @@ -11,12 +11,8 @@ import { putAttributes } from 'services/userService'; import { getData, LS_KEYS, setData } from 'utils/storage/localStorage'; import { useRouter } from 'next/router'; import { getKey, SESSION_KEYS, setKey } from 'utils/storage/sessionStorage'; -import * as Comlink from 'comlink'; import { B64EncryptionResult } from 'services/uploadService'; - -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); +import CryptoWorker from 'utils/crypto/cryptoWorker'; const Image = styled.img` width: 200px; diff --git a/src/services/collectionService.ts b/src/services/collectionService.ts index b75812b59..26fe9e974 100644 --- a/src/services/collectionService.ts +++ b/src/services/collectionService.ts @@ -4,14 +4,11 @@ import { file } from './fileService'; import localForage from 'localforage'; import HTTPService from './HTTPService'; -import * as Comlink from 'comlink'; import { B64EncryptionResult } from './uploadService'; import { getActualKey, getToken } from 'utils/common/key'; import { user } from './userService'; +import CryptoWorker from 'utils/crypto/cryptoWorker'; -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); const ENDPOINT = getEndpoint(); enum CollectionType { diff --git a/src/services/downloadManager.ts b/src/services/downloadManager.ts index 2652b8b02..30e3947ff 100644 --- a/src/services/downloadManager.ts +++ b/src/services/downloadManager.ts @@ -2,13 +2,11 @@ import { getToken } from 'utils/common/key'; import { file } from './fileService'; import HTTPService from './HTTPService'; import { getEndpoint } from 'utils/common/apiUtil'; -import * as Comlink from 'comlink'; import { getFileExtension } from 'utils/common/utilFunctions'; +import CryptoWorker from 'utils/crypto/cryptoWorker'; const ENDPOINT = getEndpoint(); -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); + const heic2any = typeof window !== 'undefined' && require('heic2any'); const TYPE_HEIC = 'heic'; diff --git a/src/services/fileService.ts b/src/services/fileService.ts index add87f5cc..8a27b4d7d 100644 --- a/src/services/fileService.ts +++ b/src/services/fileService.ts @@ -1,13 +1,10 @@ import { getEndpoint } from 'utils/common/apiUtil'; import HTTPService from './HTTPService'; -import * as Comlink from 'comlink'; import localForage from 'localforage'; import { collection } from './collectionService'; import { MetadataObject } from './uploadService'; +import CryptoWorker from 'utils/crypto/cryptoWorker'; -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); const ENDPOINT = getEndpoint(); const DIFF_LIMIT: number = 2500; diff --git a/src/services/uploadService.ts b/src/services/uploadService.ts index 58445746d..23c8889db 100644 --- a/src/services/uploadService.ts +++ b/src/services/uploadService.ts @@ -1,15 +1,12 @@ import { getEndpoint } from 'utils/common/apiUtil'; import HTTPService from './HTTPService'; -import * as Comlink from 'comlink'; import EXIF from 'exif-js'; import { fileAttribute } from './fileService'; import { collection, CollectionAndItsLatestFile } from './collectionService'; import { FILE_TYPE } from 'pages/gallery'; import { checkConnectivity } from 'utils/common/utilFunctions'; import { ErrorHandler } from 'utils/common/errorUtil'; -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); +import CryptoWorker from 'utils/crypto/cryptoWorker'; const ENDPOINT = getEndpoint(); const THUMBNAIL_HEIGHT = 720; @@ -135,6 +132,7 @@ class UploadService { uploadProcesses.push( this.uploader( await new CryptoWorker(), + new FileReader(), this.filesToBeUploaded.pop(), collectionAndItsLatestFile.collection, token @@ -150,25 +148,38 @@ class UploadService { throw e; } } - private async uploader(worker, rawFile, collection, token) { + private async uploader( + worker: any, + reader: FileReader, + rawFile: File, + collection: collection, + token: string + ) { try { - let file: FileinMemory = await this.readFile(rawFile); - - let encryptedFile: EncryptedFile = await this.encryptFile( + let file: FileinMemory = await this.readFile(reader, rawFile); + let { + file: encryptedFile, + fileKey: encryptedKey, + }: EncryptedFile = await this.encryptFile( worker, file, collection.key ); + file = null; let backupedFile: BackupedFile = await this.uploadtoBucket( - encryptedFile.file, + encryptedFile, token ); + encryptedFile = null; let uploadFile: uploadFile = this.getuploadFile( collection, backupedFile, - encryptedFile.fileKey + encryptedKey ); + encryptedKey = null; + backupedFile = null; await this.uploadFile(uploadFile, token); + uploadFile = null; this.filesCompleted++; this.changeProgressBarProps(); } catch (e) { @@ -177,11 +188,11 @@ class UploadService { `Uploading Failed for File - ${rawFile.name}` ); this.uploadErrors.push(error); - this.setUploadErrors(this.uploadErrors); } if (this.filesToBeUploaded.length > 0) { await this.uploader( worker, + reader, this.filesToBeUploaded.pop(), collection, token @@ -196,14 +207,19 @@ class UploadService { total: this.totalFileCount, }); setPercentComplete(this.filesCompleted * this.perFileProgress); + this.setUploadErrors(this.uploadErrors); } - private async readFile(recievedFile: File) { + private async readFile(reader: FileReader, recievedFile: File) { try { const filedata: Uint8Array = await this.getUint8ArrayView( + reader, + recievedFile + ); + const thumbnail = await this.generateThumbnail( + reader, recievedFile ); - const thumbnail = await this.generateThumbnail(recievedFile); let fileType: FILE_TYPE; switch (recievedFile.type.split('/')[0]) { @@ -218,6 +234,7 @@ class UploadService { } const { location, creationTime } = await this.getExifData( + reader, recievedFile ); const metadata = Object.assign( @@ -389,7 +406,10 @@ class UploadService { this.setUploadErrors(this.uploadErrors); } } - private async generateThumbnail(file: File): Promise { + private async generateThumbnail( + reader: FileReader, + file: File + ): Promise { try { let canvas = document.createElement('canvas'); let canvas_CTX = canvas.getContext('2d'); @@ -469,7 +489,10 @@ class UploadService { thumbnailBlob.size > MIN_THUMBNAIL_SIZE && attempts <= MAX_ATTEMPTS ); - const thumbnail = await this.getUint8ArrayView(thumbnailBlob); + const thumbnail = await this.getUint8ArrayView( + reader, + thumbnailBlob + ); return thumbnail; } catch (e) { console.log('Error generating thumbnail ', e); @@ -477,11 +500,12 @@ class UploadService { } } - private async getUint8ArrayView(file): Promise { + private async getUint8ArrayView( + reader: FileReader, + file: Blob + ): Promise { try { return await new Promise((resolve, reject) => { - const reader = new FileReader(); - reader.onabort = () => reject('file reading was aborted'); reader.onerror = () => reject('file reading has failed'); reader.onload = () => { @@ -548,10 +572,9 @@ class UploadService { } } - private async getExifData(recievedFile) { + private async getExifData(reader: FileReader, recievedFile: File) { try { const exifData: any = await new Promise((resolve, reject) => { - const reader = new FileReader(); reader.onload = () => { resolve(EXIF.readFromBinaryFile(reader.result)); }; diff --git a/src/utils/common/key.ts b/src/utils/common/key.ts index 12c122af2..eab610eda 100644 --- a/src/utils/common/key.ts +++ b/src/utils/common/key.ts @@ -1,10 +1,6 @@ +import CryptoWorker from 'utils/crypto/cryptoWorker'; import { getData, LS_KEYS } from 'utils/storage/localStorage'; import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage'; -import * as Comlink from 'comlink'; - -const CryptoWorker: any = - typeof window !== 'undefined' && - Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); export const getActualKey = async () => { const session = getData(LS_KEYS.SESSION); diff --git a/src/utils/crypto/cryptoWorker.ts b/src/utils/crypto/cryptoWorker.ts new file mode 100644 index 000000000..c5e37f8bb --- /dev/null +++ b/src/utils/crypto/cryptoWorker.ts @@ -0,0 +1,7 @@ +import * as Comlink from 'comlink'; + +const CryptoWorker: any = + typeof window !== 'undefined' && + Comlink.wrap(new Worker('worker/crypto.worker.js', { type: 'module' })); + +export default CryptoWorker;