Search code examples
typescriptfileionic-frameworkionic-native

How to download file from url in Ionic 5 without using FileTransfer


I'm currently developing Ionic app now and stuck at file download part. I saw many posts that FileTransfer cordova library is now deprecated in favor of XHR request.

Even though I saw many posts that the library is deprecated, I can't find any sample code (for downloading file from URL).

Could anyone please suggest me good way to download file from url without using FileTransfer plugin?


Solution

  • Downloading files from another server may cause annoying CORS error which is mostly beyond our control. The safest way is to bypass the Webview and download the file natively. You may use Native HTTP plugin

    Use in Ionic 4 or above will look like:

    import { Component } from '@angular/core';
    import { HTTP } from '@ionic-native/http/ngx';
    import { File } from '@ionic-native/file/ngx';
            
    @Component({
       selector: 'app-home',
       templateUrl: './you-file.html',
       styleUrls: ['./your-file.scss'],
    })
    
    export class HomePage {
        constructor(private nativeHTTP: HTTP, private file: File) {}
            
         private downloadFileAndStore() {
            //
            const filePath = this.file.dataDirectory + fileName; 
                             // for iOS use this.file.documentsDirectory
            
            this.nativeHTTP.downloadFile('your-url', {}, {}, filePath).then(response => {
               // prints 200
               console.log('success block...', response);
            }).catch(err => {
                // prints 403
                console.log('error block ... ', err.status);
                // prints Permission denied
                console.log('error block ... ', err.error);
            })
         }
      }
    }