How to save an image locally with ionic 2

Ionic Framework ionic-v3
1

I’m trying to save an image from an external url on the web to the local app using ionic 2 but I cannot get the job done, I’ve added already the plugin cordova-plugin-file and cordova-plugin-file-transfer but when I try the following code example I get the error “FileTransfer is not defined”, It should be globally defined from the plugin correct?
I use typescript.

Could someone explain me how to get the job done? Any help would be appreciated, thank you!

var fileTransfer = new FileTransfer();
var uri = encodeURI(“http://some.server.com/download.php”);

fileTransfer.download(
uri,
fileURL,
function(entry) {
console.log("download complete: " + entry.toURL());
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log(“upload error code” + error.code);
},
false
}
);

2

You need type definition for FileTransfer. Try find or write it :slight_smile:

3

I’ve added the type definition now on the editor and now it is not shown as error but when compiled the problem is still the same ORIGINAL EXCEPTION: ReferenceError: FileTransfer is not defined

This is what is written in the plugin info:

This plugin defines global FileTransfer, FileUploadOptions constructors. Although in the global scope, they are not available until after the deviceready event

So FileTransfer it should be already available, or not? My question is why FileTransfer is not available, the code I posted is inside the block

platform.ready().then(() => {…
so it should be already available.

I shouldn’t have to import anything to make the plugin to work so I can’t figure out why it doesn’t work and it’s the same problem I have with other plugins then I guess there is a lack of knowledge on my side but I cannot find any info about it, any suggestions?

.

4

Didn’t it?
ionic plugin add cordova-plugin-file-transfer
Yes, FileTransfer it should be already available.

5

That’s the problem I’m facing here: I have both the plugins intalled and available under the plugins folder
cordova-plugin-file and
cordova-plugin-file-transfer

and even using

console.log(cordova.file);

I get the same problem with “cordova not defined” even this should be already available since I call them inside platform.ready

It seems like they are present in the plugin folder but they are not loaded, should I import and injecting something to make them to work?

Thank you

6

Cordova only works on mobile device (with ionic). How do you test your apps?

7

Have you already checked your typings folder? The references for cordova or your filetransfer plugin should be there. If they’re not, add them first before building

8

Hi sorry for the delay but I didn’t get the notification of the new reply…

xr0master:
Well I’m testing the app using Chrome on my pc, I thought it could be possible to test it in this way… as I do for other section of the app, I will try on my device and let you know.

luukschoen;
I’m using Atom as editor and I have a folder “typing” where I’ve added manually cordova.d.ts and FileTransfer.d.ts the only error I see now is on console.log(cordova.file); where it says “file it does not exist on type cordova”.

by the way now I’m moving on other topics since I’m testing different functionalities of ionic 2 and angular 2 I dont want to get stuck too long on one thing, I will wait for a tutorial or some more info on this topic in the coming weeks, I don’t know what to try more…

9

Did you also include the manually added folders in your build step? I.e. your typings config

10

No I didnt add any folder in build, only 2 files on “typing” folder, nothing else, why those folders should be present in the build step? Eventually how should I add those folders in the build step?

11

If you check your typings folder, does it include the typings for the filetransfer plugin? And in your main.d.ts file, does it include the reference to the right typing folder? Like this: /// <reference path="file-transfer-plugin-or-something/name-of-typings.d.ts" />

12

no, I missed this step, do you think it is the reason why I cannot get to save an image locally on the app using chrome? I tried even on my device “Android”, it doesn’t work as well but I cannot know for which reason since I cannot debug from device, I thought to be able to debug it using Chrome and ionic serve…

I’ve added now the reference I will try if it does change something, thank you!.

Update:
I’ve added all the d.ts references, I’ve changed main.d.ts adding the correct path, I’ve changes the tsconfig.json… and everything is exactly the same as before… cordova is not defined.

Unfortunately I cannot find a complete tutorial that works with ionic/angular 2 in the current release, for one reason or another in every tutorial there is always something broken, except one with geolocation that didn’t require and special configuration of typings folder or anything else to work.

If someone could share a link to a good tutorial using some plugin I would love to keep testing functionalities with other plugins…

13

hi, I’ve created a basic example using the cordova-file-transfer plugin, hope it helps: https://github.com/dsgriffin/Ionic-2-File-Transfer-Example

14

Just add after your imports
declare var cordova:any;