[GitHub] [cordova-plugin-file] digaus edited a comment on issue #364: Large file save freeze app for seconds

[GitBox <gi...@apache.org>]

digaus edited a comment on issue #364: Large file save freeze app for seconds
URL: https://github.com/apache/cordova-plugin-file/issues/364#issuecomment-597328356
 
 
   @breautek 
   
   We can convert the blob into chunks and write the file in parts:
   
    ```
       private async convertToBase64Chunks(blob: Blob, size: 3 | 6 | 9 | 12 | 15 | 18, writeChunk: (value: string, first?: boolean) => Promise<void>): Promise<void> {
           const chunkSize: number = 1024 * 1024 * size;
           const blobSize: number = blob.size;
           while (blob.size > chunkSize) {
               const value: string = await this.convertToBase64(blob.slice(0, chunkSize));
               await writeChunk(blobSize === blob.size ? value : value.split(',')[1], blobSize === blob.size);
               blob = blob.slice(chunkSize);
           }
           const lastValue: string = await this.convertToBase64(blob.slice(0, blob.size));
           await writeChunk(lastValue.split(',')[1], blobSize === blob.size);
           blob = blob.slice(blob.size);
       }
   
   
       private convertToBase64(blob: Blob): Promise<string> {
           return new Promise((resolve: (base64: string) => void, reject: () => void): void =>  {
               let reader: FileReader = new FileReader();
               const realFileReader: FileReader = reader['_realReader'];
               if (realFileReader) {
                   reader = realFileReader;
               }
               reader.onerror = (err: any): void => {
                   console.log(err);
                   reject();
               };
               reader.onload = (): void => {
                   resolve(reader.result as string);
               };
               reader.readAsDataURL(blob);
           });
       }
   ```
   
   `writeChunk` is the asynchronus callback where we can call the write method of the plugin. `first` indicates the first part which also has the encoding prefix. 
   
   Implemented this in a Capacitor project which works very nicely:
   
   ```
               await this.convertToBase64Chunks(blob, chunkSize, async (value: string, first: boolean): Promise<void> => {
                   if (first) {
                       await Filesystem.writeFile({
                           path: this.folder + '/' + fileName,
                           directory: FilesystemDirectory.Data,
                           data: value,
                       });
                   } else {
                       await Filesystem.appendFile({
                           path: this.folder + '/' + fileName,
                           directory: FilesystemDirectory.Data,
                           data: value,
                       });
                   }
               });
   ```
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@cordova.apache.org
For additional commands, e-mail: commits-help@cordova.apache.org