Visit the free getting started tutorials on nativescript.org for JavaScript, Angular, or Vue.js.
Kindly note that we filter out plugins that:
package.json
$ tns plugin add nativescript-background-http-cancelable
@nativescript/background-http
~5.0.0
A cross platform plugin for the NativeScript framework, that provides background upload for iOS and Android.
There is a stock NativeScript http module that can handle GET/POST requests that work with strings and JSONs. It however comes short in features when it comes to really large files.
http
The plugin uses NSURLSession with background session configuration for iOS; and a fork of the gotev/android-upload-service library for Android.
tns plugin add nativescript-background-http
The below attached code snippets demonstrate how to use nativescript-background-http to upload single or multiple files.
nativescript-background-http
Sample code for configuring the upload session. Each session must have a unique id, but it can have multiple tasks running simultaneously. The id is passed as a parameter when creating the session (the image-upload string in the code bellow):
id
image-upload
// file path and url var file = "/some/local/file/path/and/file/name.jpg"; var url = "https://some.remote.service.com/path"; var name = file.substr(file.lastIndexOf("/") + 1); // upload configuration var bghttp = require("nativescript-background-http"); var session = bghttp.session("image-upload"); var request = { url: url, method: "POST", headers: { "Content-Type": "application/octet-stream" }, description: "Uploading " + name };
For a single file upload, use the following code:
var task = session.uploadFile(file, request);
For multiple files or to pass additional data, use the multipart upload method. All parameter values must be strings:
var params = [ { name: "test", value: "value" }, { name: "fileToUpload", filename: file, mimeType: "image/jpeg" } ]; var task = session.multipartUpload(params, request);
In order to have a successful upload, the following must be taken into account:
The request object parameter has the following properties:
string
https://some.remote.service.com/path
POST
object
boolean
number
androidAutoClearNotification
The task object has the following properties and methods, that can be used to get information about the upload:
error
uploading
complete
pending
cancelled
void
After the upload task is created you can monitor its progress using the following events:
task.on("progress", progressHandler); task.on("error", errorHandler); task.on("responded", respondedHandler); task.on("complete", completeHandler); task.on("cancelled", cancelledHandler); // Android only
Each event handler will receive a single parameter with event arguments:
// event arguments: // task: Task // currentBytes: number // totalBytes: number function progressHandler(e) { alert("uploaded " + e.currentBytes + " / " + e.totalBytes); } // event arguments: // task: Task // responseCode: number // error: java.lang.Exception (Android) / NSError (iOS) // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS) function errorHandler(e) { alert("received " + e.responseCode + " code."); var serverResponse = e.response; } // event arguments: // task: Task // responseCode: number // data: string function respondedHandler(e) { alert("received " + e.responseCode + " code. Server sent: " + e.data); } // event arguments: // task: Task // responseCode: number // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS) function completeHandler(e) { alert("received " + e.responseCode + " code"); var serverResponse = e.response; } // event arguments: // task: Task function cancelledHandler(e) { alert("upload cancelled"); }
In order to test the plugin, you must have a server instance to accept the uploads. There are online services that can be used for small file uploads - e.g. http://httpbin.org/post However, these cannot be used for large files. The plugin repository comes with a simple server you can run locally. Here is how to start it:
http://httpbin.org/post
cd demo-server npm i node server 8080
The above commands will start a server listening on port 8080. Remember to update the URL in your app to match the address/port where the server is running.
Note: If you are using the iOS simulator then http://localhost:8080 should be used to upload to the demo server. If you are using an Android emulator, http://10.0.2.2:8080 should be used instead.
http://localhost:8080
http://10.0.2.2:8080
We love PRs! Check out the contributing guidelines. If you want to contribute, but you are not sure where to start - look for issues labeled help wanted.
help wanted
Please, use github issues strictly for reporting bugs or requesting features. For general questions and support, check out Stack Overflow or ask our experts in NativeScript community Slack channel.
Apache License Version 2.0, January 2004
Popularity metric based on:
Quality metric based on:
Maintenance metric based on: