Download blob file ionic

Ionic Framework ionic-v3
1

Hello everyone,
I want to download a binary file generated by a webservice .
I have this function :

webservice() {
		this.http.get(url)
			.map(result => result.blob())
			.subscribe(result => {
				var blobURL = window.webkitURL.createObjectURL(result);
				window.open(blobURL);
			}, error => {
				console.error(error);
			});
	}

But the “webkitURL” does not exist on type window… So is there a method to create an URL for download a blob ?
Or maybe another method to achieve this ?

2

You should check out https://ionicframework.com/docs/native/file-transfer/ :slight_smile:

3

Thank you for your fast answer
But I checked this plugin before and the download method use an URL but I dont have it.
I just have the blob (or whatever you want) “result” and no URL to download it.

4

Don’t you need it for this URL? What file type is this and what is your goal exactly? :slight_smile:

5

This URL is the web server URL, and we send an HTTP GET request to that url in order to get a docx/pdf file.

That request is returning a string, and I want to obtain the docx file from that. So I thought I needed to download the file from a certain URL, but i’m not sure about it.

How can I get the file from the string (without using the url of the webservice) ?

6

To me it sounds like you’re wanting to add an extra, unnecessary, step.

Exactly, so use FileTransfer.download on the URL for your web server? :stuck_out_tongue: It saves the file on the device, and you can then e.g. open the file with other apps and what not.

I’m not sure there is a way to do this, though :confused:

7

Hum, I was trying to use FileTransfer.download but I have to add a specific header to my request.
So can I add that header with the FileTransfer Plugin ?

8 
download(source, target, trustAllHosts, { 
    headers: { 
        authorization: "" 
    } 
})

Should do it :slight_smile:

9

Really thank you for your help, but I will need a little more help I guess.
I have a prolem with the “target” property. I want that the user download it into the “Download” repositery. I tryed to use “file.dataDirectory” but dataDictory seems to not exist on type File. I also tryed to use the direct link like “file:///android_asset/storage/emulated/0/Download/” but didn’t work too…

Hav you a solution to dowload directly inside the Download folder ?

10

You’re using https://ionicframework.com/docs/native/file/ for the dataDirectory? What’s your current code?

11

Nevermind, the file plugin seems to work now, I just didn’t have installed the npm part

But, now, when my function is called, I got no return on my console, it seems to not download the file

import { File } from '@ionic-native/file';

constructor(private file: File ...){}

const fileTransfer: FileTransferObject = this.transfer.create();
		fileTransfer.download(url, this.file.dataDirectory + 
                       'file.docx', true , {
			headers: this.getHeaderWithToken()
});
12

.download returns a Promise, you don’t seem to be handling any errors or anything. Also, I believe you need to add your own slash after using dataDirectory: dataDirectory + "/file.txt"

13

True, I added the “/” before file and try to catch an error but nothing… (I added .then() and .catch() and it’s the .then() which is executed)

But Is there a way to find out if my request is correctly executed with this method ? Like the status number ?

14

If the promise is resolved it should be all good, there are several other methods in the File plugin which you can use to e.g. see files in a specific directory :slight_smile:

15

I tryed the window.open(this.file.dataDirectory + ‘/file.docx’) inside the .then() but it seems that there is no file at this path :confused:

16

I’m pretty sure this wouldn’t work anyway, you need to use File Opener

17

Thank you very much Mich356c, it works like a charm now :slight_smile:

18

could you maybe help me too? I have a blob URL that looks something like:
"blob:file:///76684515-dfgd-dfgd-dfgdf"
I’m getting error 2- incorrect URL

is this because download cannot save blob URL’s? because the blob URL needs to be changed or edited? or like what?

      //where i get my blob URL
      var blobURL= document.getElementById('myblob').getAttribute('href');

      const fileTransfer: FileTransferObject = this.transfer.create();
      fileTransfer.download(blobURL, this.file.dataDirectory + '/recording.wav').then((entry) => 
      {
        alert(entry.toURL());
        console.log('download complete: ' + entry.toURL());
        this.nativeAudio.preloadComplex('Vocal',this.file.dataDirectory+'/recording.wav', 1, 1, 0).then(this.loadedFile(), this.onError);
      }, (error) => {
        alert('error '+JSON.stringify(error));
      });
19

Did you get any solution for this? Because I am facing same issue in my app. @AhrenFullStop

20

@mich356c @rushabh28 @AhrenFullStop @fhochmayr
Ia m into the same issue, couldn’t able to open blob url in web, from mobile application.
Any solution or update would definitely be helpful.