CODEWITHSUNDEEP
typescriptfileionic-frameworkionic-native
Ioan Moldovan
Ioan Moldovan

Reputation: 2412

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?

Upvotes: 12

Views: 34671

Answers (6)

Ihor
Ihor

Reputation: 726

To be able to download and see files via ionic-native File I had to add additional settings inside Xcode:

confing.xml

<preference name="iosPersistentFileLocation" value="Library" />

info.plist

<key>UIFileSharingEnabled</key> <true/>
<key>LSSupportsOpeningDocumentsInPlace</key> <true/>

Download path should be File.documentsDirectory

Upvotes: 0

tomloprod
tomloprod

Reputation: 7862

You can use simply HttpClient class (@angular/common/http) as follow:

const downloadPath = (
   this.platform.is('android')
) ? this.file.externalDataDirectory : this.file.documentsDirectory;


let vm = this;

/** HttpClient - @angular/common/http */
this.http.get(
   uri, 
   {
      responseType: 'blob', 
      headers: {
         'Authorization': 'Bearer ' + yourTokenIfYouNeed,
      }
   }
).subscribe((fileBlob: Blob) => {
   /** File - @ionic-native/file/ngx */
   vm.file.writeFile(downloadPath, "YourFileName.pdf", fileBlob, {replace: true});
});

Imports you will need:

import { HttpClient } from '@angular/common/http';
import { File } from '@ionic-native/file/ngx';

Upvotes: 1

Alexander Ferreras
Alexander Ferreras

Reputation: 1718

This is the solution I used for react, downloading files MP4 and save in the cache or documents, Filesystem is for capacitor.

const bob = await fetch(url).then((x) => x.blob());
       const base64 = await convertBlobToBase64(bob);

    const resultSaveFile = await Filesystem.writeFile({
        data: base64,
        path: 'video-edit.mp4',
        directory: directory || Directory.Cache,
        recursive: true,
      });

Upvotes: 1

Pouria Moosavi
Pouria Moosavi

Reputation: 730

You can just open the url with window. But this will open a browser and download the file there. It will do the trick although it is not pretty:

your.page.ts:

function download(url){
  window.open(url, "_blank");
}

your.html:

<a href="javascript:void(0)" (click)="download(yourUrl)">Your file name</>

Upvotes: 1

Arup Bhattacharya
Arup Bhattacharya

Reputation: 856

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

Upvotes: 12

Omkar Tondawalkar
Omkar Tondawalkar

Reputation: 225

You can Achieve this in the following steps :

Step 1: A download function to download from URL

downloadFile(path: string, body: Object = {}): Observable<any> {
  let headers = {} // add authentication headers and other headers as per your requirement
  return this.http.post/get( 
    `${path}`, body, { headers: headers, withCredentials: true }
  )
  .catch((err) =>console.log(err))
  .map((res:Response) => res)
  .finally( () => { });
}

Step 2: Use the download function to convert it into an appropriate Blob.

this.downloadFile(`url`, postData).subscribe(
 res => {
   let options = { type: ‘filetype’ };
   let filename = ‘filename.type’;
   Util.createAndDownloadBlobFile(res._body, options, filename);
 },
 err => {
   // show the error
 }
);

Step 3: Save the Blob Data on Device using following plugin https://github.com/apache/cordova-plugin-file

Upvotes: -1

Related Questions