Cant download file properly to a user accessible location

[RyanSMurphy]

I am using the HTTP library to attempt to download a file.

In short, I want to download a file, from a URL, to my device in a place where the user can access it easily.

For simplicity in getting it working the first time I am using the example from the docs.

This is the code I am using:

download (id) {
        console.log('Download Started');
        getFile("https://raw.githubusercontent.com/NativeScript/NativeScript/master/apps/tests/logo.png").then(function (r) {
            console.log(r.path);
        }, function (e) {
            //// Argument (e) is Error!
        });
    }

This outputs the path it was saved at as being:

/data/user/0/com.myapp.example/files/logo.png

When I try to go to this location on a file browser from the play store It is nowhere to be found.

Can anyone shed anymore light on this?

Obviously, I want this to work the same on ios and Android but I am testing on Android atm.

Thanks

[RyanSMurphy]

Note: Preferably going to the downloads folder

[NickIliev]

Once you got you file you should save it locally to the desired directory. In your case with Downloads folder you can do the following:

// grabs the  path for Downloads (string value)
var androidDownloadsPath = android.os.Environment.getExternalStoragePublicDirectory(
            android.os.Environment.DIRECTORY_DOWNLOADS).toString(); 

// creates PATH for folder called MyFolder in /Downloads (string value)
var myFolderPath = fileSystem.path.join(androidDownloadsPath, "MyFolder");

// creates the folder itself in Downloads/MyFolder
var folder = fileSystem.Folder.fromPath(myFolderPath);

// creates a path of kind ../Downloads/MyFolder/my-file-name.jpg
var path = fileSystem.path.join(cosmosFolderPath, fileName);
var exists = fileSystem.File.exists(path);

if (!exists) {
    // finally saves the file to to created path with the passed extension - saved is of kind boolean
    var saved = res.saveToFile(path, enums.ImageFormat.jpeg);
}

Based on this example app here

[RyanSMurphy]

@NickIliev This doesn't work with the file type. that is an example using image source. I believe this in invalid here. The file type which the nativescript getFile method exposes doesn't have a saveToFile method. Also, this might not be just an image. It could be anyfile. Excel, Word, Image, PDF etc.

[RyanSMurphy]

On another note, I believe the app you pointed to uses Nativescript not nativescript angular which Im not sure can take advantage of android.os.Environment methods.

[matt4446]

You should be able to get at everything like that. Its still NativeScripts environment after all. Using TypeScript may throw errors if you are missing the Typings, which is fairly easily overcome whether they exist or not.
Have you given it a go?

[NickIliev]

@RyanSMurphy perhaps you can create/save a file using the file-system and its class File. You can write text or binary data with the methods provided. Some example here

If you want to implement some native logic you can use the native APIs (both iOS and Android )in NativeScript+Angular-2 application but as @matt4446 noticed you will need some TypeScript declarations. You can find them here but notice that for Angular project you should also cast some additional DOM related properties like done here

[RyanSMurphy]

So if I am correct, there is no easy way and definite 100% working way that anyone can tell me of downloading files to the device in an easily accessible location by the user?

[NickIliev]

Hey @RyanSMurphy quite the opposite,!The method getFile has optional parameter which is destinationDownloadPath

getFile
e.g. with destinationPath

    var documents = fs.knownFolders.documents();
    var path = fs.path.join(documents.path, "FILE.txt");
    http.getFile("http://httpbin.org/robots.txt", path).then(res => {
        var savedFile = fs.File.fromPath(path);
        savedFile.readText().then(content => {
            console.log(content);
        })
        console.log(savedFile.path);  
    })

Or alternatively, you can save text or binary content accessed from a remote location
.e.g. with saving content

    import * as http from "http";
    import * as fs from "file-system"

   ....

    http.getFile("http://httpbin.org/robots.txt").then(downloadedFile => {

        var documents = fs.knownFolders.documents();
        var path = fs.path.join(documents.path, "FILE.txt");
        mySavedFile = fs.File.fromPath(path);

        // if your file content is not text you can use readSync and WriteSync for binary data
        downloadedFile .readText().then(content => {
            mySavedFile.writeText(content).then(() => {
                console.log("Succsess!");
                mySavedFile.readText().then(content => {
                    console.log("saved content: " + content);
                })
            })
        })
    })

[valentinstoychev]

@NickIliev - I think this is a good candidate for the code samples?

[RyanSMurphy]

@NickIliev
Thanks for coming back to me.

Unfortunately, the examples you posted are both invalid and only strengthen my point that there is currently no way on Nativescript / Angular to save a file to a device in a user accessible location.

The examples are invalid because the premise of them is this method:

fs.knownFolders.documents();

This method does NOT save the file to a user accessible location. It saves it to a location that neither users or external applications can access. We need a way to save them to a user accessible location,

So as no one has been able to prove otherwise I am right in saying in Nativescript angular there is currently no easy way/way at all to save a file in a user accessible location on a device? Which is a HUGE limitation.

@valentinstoychev
This information is relatively simple to come across with a google search and doesn't address the larger issue and therefore I wouldn't suggest is a good addition in regards to what is already there.

[RyanSMurphy]

@matt4446 How would you suggest this be done?

[NickIliev]

@RyanSMurphy I see your point and indeed the example above is valid for the in-app folders which are not accessible from "outside" and you want the file to be stored in user accessible folder a,k,a, some of the external storage folders (e.g. Download, or custom folders in the SD cards). Indeed this can not be achieved our-of-the-box however, you can use the native API to get access to public folders.

Note that for Android 6.x and above runtime permissions are required as well (setting WRITE_EXTERNAL_STORAGE from AndroidManifest is not enough you will need to require those permissions runtime)

Here is an example of how to save robots.txt text file in custom folder created in the public Download folder (for Android Nexus 5x in Storate>>Explore>>Download>>customFolder but this path will be different depending on the device and if it is using SD card or not)

We need runtime permissions for Andoird API23+

tns plugin add nativescript-permissions

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.INTERNET"/>

    permissions.requestPermission([
        "android.permission.INTERNET",
        "android.permission.READ_EXTERNAL_STORAGE",
        "android.permission.WRITE_EXTERNAL_STORAGE",
    ], "I need these permissions")
        .then(function (res) {
            console.log("Permissions granted!");
        })
        .catch(function () {
            console.log("No permissions - plan B time!");
        });
}

Then creating the file in the user accessible folder Download/customFolder and saving the file robots.txt with the content get from the http request.

    var file: fs.File;
    var fileName = "robots.txt";
    var androidDownloadsPath = android.os.Environment.getExternalStoragePublicDirectory(android.os.Environment.DIRECTORY_DOWNLOADS).toString();
    var customFolderPath = fs.path.join(androidDownloadsPath, "customFolder");

    var folder = fs.Folder.fromPath(customFolderPath );
    var path = fs.path.join(customFolderPath , fileName);
    var exists = fs.File.exists(path);

    file = fs.File.fromPath(path);

    httpModule.getFile("http://httpbin.org/robots.txt").then(res => {
        console.log(res);
        var content = res.readTextSync(e=> { console.log(e); });
        return content;
    }).then(cn => {
        file.writeText(cn.toString()).then(() => {
            console.log("content saved!");
        })
    })

[NickIliev]

@RyanSMurphy based on the same code as the one above but using binary data with readSync and writeSync you can save any kind of file not only text