# Upload and Download
Upload and download files.
# Manifest Declaration
You need to declare the use of this API in the manifest's features
member:
{"name": "system.request"}
# Module Import
Before using this service in a component, you need to import the module in the script section of the UX document.
import request from '@system.request'
Or
let request = require("@system.request")
# Methods
This service has the following methods:
upload({url,files,header,method,data,success,fail,complete})
download({url,header,description,filename,success,fail,complete})
# upload({url,files,header,method,data,success,fail,complete})
Method to upload a resource.
Timeout configuration
You can configure the network timeout in the config.network
member of the manifest.
# Arguments
This method requires an object
with the following attributes:
url
(string
). Mandatory attribute with the URL of the resource.files
(array
). Mandatory attribute with the list of files to be uploaded, submitted asmultipart/form-data
. The array includeobject
s with the following members:uri
(string
). Mandatory attribute with the local path of the files to be uploaded.filename
(string
). Optional attribute with the file name in the header (when submittingmultipart
). If the file name is not specified here, the file name is obtained from the URI by default.name
(string
). Optional attribute with the name of the form whenmultipart
is submitted. The default value isfile
.type
(string
). Optional attribute with theContent-Type
of the files to be uploaded. If this parameter is not specified, the system will select aContent-Type
based on the filename or URI extension. The system will show an error ifContent-Type
cannot be obtained, indicating that the parameter is invalid.
header
(object
). Optional attribute with the headers of the request. User agent header is automatic specified.method
(string
). Optional attribute with the HTTP method:POST
(default value) andPUT
.data
(array
). Optional attribute with additional form data in an HTTP request. The array contains objects with the following members:name
(string
). Mandatory attribute with the name of the form field.value
(string
). Mandatory attribute with the value of the form field.
success
(function(res)
). Optional callback function corresponding to the successful execution. The argument of the callback function is anobject
with the following members:code
(number
). Server status code.data
(string
). If the value of type in the header returned by the server istext/*
,application/json
,application/javascript
, orapplication/xml
, the value is textual. Otherwise, the value is the URI of a temporary file.headers
(object
). HTTP headers in the response from the server.
fail
(function(msg,code)
). Optional callback function corresponding to a failed execution. The arguments of the callback function are:msg
(object
) Message with information about the error (text inmsg.errMsg
).code
(number
) Error code.
complete
(function
). Optional callback function corresponding to the end of the execution.
TIP
If you want to use the application/octet-stream
mode, use the fetch.
Example:
request.upload({
url: "https://www.example.com",
header: { "Accept-Encoding": "gzip, deflate", "Accept-Language": "es-ES,en-US;q=0.8,en;q=0.6" },
files: [
{
uri: "internal://xxx/xxx/test",
name: "file1",
type: "test.png"
}
], data: [
{
name: "key1",
value: "value1"
}
],
success: function (data) {
console.log("handling success");
},
fail: function (data, code) {
console.log("handling fail, code=" + code);
}
})
# download({url,header,description,filename,success,fail,complete})
Method to download resources.
The downloaded file is stored locally on the device, until the user cleans the data of the quick app.
# Arguments
This method requires an object
with the following attributes:
url
(string
). Mandatory attribute with the URL of the resource to download.header
(object
). Optional attribute with the headers of the request. User agent header is automatic specified.description
(string
). Optional attribute that specifies a description for the download that can be used as the title on the notification bar. The default value is the filename of the resource.filename
(string
). Optional attribute with the filename of the resource to download. By default is obtained from the network request or the URL.success
(function(res)
). Optional callback function corresponding to the successful execution. The argument of the callback function is anobject
with the member:token
(string
). Download token, based on which the download status.
fail
(function(msg,code)
). Optional callback function corresponding to a failed execution.complete
(function
). Optional callback function corresponding to the end of the execution.
Example:
request.download({
url: "https://www.example.com/file.mp4",
success: function (data) {
console.log("handling success" + data.token);
},
fail: function (data, code) {
console.log("handling fail, code=" + code);
}
})
# Events
This service provides the following listener:
# onDownloadComplete({token,success,fail,complete})
Listener for download processes.
# Arguments
This method requires an object
with the following attributes:
token
(string
). Download token.success
(function(res)
). Optional callback function corresponding to the successful execution. The argument of the callback function is anobject
with the member:uri
(string
). URI of the file downloaded in the local file system.
fail
(function(msg,code)
). Optional callback function corresponding to a failed execution. The possible codes are:1000
: Download fails.1001
: The download task doesn't exist.
complete
(function
). Optional callback function corresponding to the end of the execution.
Example:
request.onDownloadComplete({
token: "123",
success: function (data) {
console.log("handling success" + data.uri);
},
fail: function (data, code) {
console.log("handling fail, code=" + code);
}
})
# Example
<template>
<div>
<div>
<text>{{componentName}}</text>
</div>
<div>
<div>
<text>Download file: {{fileDownloadData}}</text>
</div>
<input type="button" onclick="downloadFile" value="Download file"/>
<div>
<text>Download file path: {{fileDownloadUri}}</text>
</div>
<input type="button" onclick="downloadFileComplete" value="File download status"/>
<div>
<text>Upload file: {{fileUploadData}}</text>
</div>
<input type="button" onclick="uploadFile" value="Upload file"/>
</div>
</div>
</template>
<style>
@import '../Common/css/common.css';
.item-container {
margin-bottom: 50px;
margin-right: 60px;
margin-left: 60px;
flex-direction: column;
}
.item-content {
flex-direction: column;
background-color: #ffffff;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 30px;
align-items: flex-start;
}
.txt {
lines: 5;
padding-top: 15px;
padding-bottom: 15px;
}
</style>
<script>
import request from '@system.request'
import prompt from '@system.prompt'
export default {
data: {
componentName: 'request',
fileDownloadData: '',
fileUploadData: '',
fileDownloadUri:""
},
onInit: function () {
this.$page.setTitleBar({ text: 'request' })
},
downloadFile: function () {
var self = this;
// Download a file and save it to the local host.
request.download({
url: 'https://www.huawei.com/Assets/CBG/img/logo.png',
description: 'This is description.',
filename: 'HuaweiLogo.png',
success: function (ret) {
self.fileDownloadData = ret.token;
console.log('file_download_data--------' + JSON.stringify(ret.token));
prompt.showToast({
message: 'file_download_data--------' + JSON.stringify(ret.token)
})
},
fail: function (errmsg, errcode) {
prompt.showToast({
message: "Download failure: "+errcode + ':' + errmsg
})
}
})
},
downloadFileComplete: function () {
var self = this;
// Download a file and save it to the local host.
console.log('Download a file');
request.onDownloadComplete({
token:self.fileDownloadData,
success: function (ret) {
self.fileDownloadUri = ret.uri;
console.log('fileDownloadUri--------' + JSON.stringify(ret.uri));
prompt.showToast({
message: 'fileDownloadUri--------' + JSON.stringify(ret.uri)
})
},
fail: function (errmsg, errcode) {
prompt.showToast({
message: "Download failure: "+errcode + ': ' + errmsg
})
}
})
},
uploadFile() {
var self = this;
request.upload({
url: "https://example.org/uploadDemo/api/uploadFile",
header:{"Accept-Encoding": "gzip, deflate","Accept-Language": "es-ES,en-US;q=0.8,en;q=0.6"},
files: [
{
uri: self.fileDownloadUri,
name: "component_test.png",
type:"multipart/form-data"
}
],
success: function (ret) {
self.fileUploadData = ret.data;
}
})
}
}
</script>
← Upload WebSockets →