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

Issue

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);
        })
     }
  }
}

Answered By – Arup Bhattacharya

Answer Checked By – David Goodson (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published