upload.html 30.9 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Upload | Quick Apps</title>
    <meta name="generator" content="VuePress 1.9.5">
    
    <meta name="description" content="Quick App reference guide for developers">
    <meta name="theme-color" content="#38b5ff">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/developers/assets/css/0.styles.f297bc98.css" as="style"><link rel="preload" href="/developers/assets/js/app.4b1167ed.js" as="script"><link rel="preload" href="/developers/assets/js/2.0c90b5ef.js" as="script"><link rel="preload" href="/developers/assets/js/107.0984490c.js" as="script"><link rel="prefetch" href="/developers/assets/js/10.2156cdfe.js"><link rel="prefetch" href="/developers/assets/js/100.038af2fc.js"><link rel="prefetch" href="/developers/assets/js/101.315bea04.js"><link rel="prefetch" href="/developers/assets/js/102.151e66a2.js"><link rel="prefetch" href="/developers/assets/js/103.9ba01750.js"><link rel="prefetch" href="/developers/assets/js/104.e04d6157.js"><link rel="prefetch" href="/developers/assets/js/105.03af8b7d.js"><link rel="prefetch" href="/developers/assets/js/106.fdbb7328.js"><link rel="prefetch" href="/developers/assets/js/108.2234eb4c.js"><link rel="prefetch" href="/developers/assets/js/109.e15c5ad7.js"><link rel="prefetch" href="/developers/assets/js/11.dc71520b.js"><link rel="prefetch" href="/developers/assets/js/110.7e092174.js"><link rel="prefetch" href="/developers/assets/js/111.1b1d57da.js"><link rel="prefetch" href="/developers/assets/js/112.e590539f.js"><link rel="prefetch" href="/developers/assets/js/113.cf4827c6.js"><link rel="prefetch" href="/developers/assets/js/12.107ffb2e.js"><link rel="prefetch" href="/developers/assets/js/13.5d658c48.js"><link rel="prefetch" href="/developers/assets/js/14.64254d8f.js"><link rel="prefetch" href="/developers/assets/js/15.9a04fe04.js"><link rel="prefetch" href="/developers/assets/js/16.82d55f37.js"><link rel="prefetch" href="/developers/assets/js/17.fdc401b5.js"><link rel="prefetch" href="/developers/assets/js/18.aa734709.js"><link rel="prefetch" href="/developers/assets/js/19.a3bddb91.js"><link rel="prefetch" href="/developers/assets/js/20.898f80cd.js"><link rel="prefetch" href="/developers/assets/js/21.b5f4ba1a.js"><link rel="prefetch" href="/developers/assets/js/22.6999e8ff.js"><link rel="prefetch" href="/developers/assets/js/23.bb7a4ae1.js"><link rel="prefetch" href="/developers/assets/js/24.cf493e39.js"><link rel="prefetch" href="/developers/assets/js/25.eed84f79.js"><link rel="prefetch" href="/developers/assets/js/26.a3822e1c.js"><link rel="prefetch" href="/developers/assets/js/27.c9926129.js"><link rel="prefetch" href="/developers/assets/js/28.910aab3f.js"><link rel="prefetch" href="/developers/assets/js/29.f0f3da68.js"><link rel="prefetch" href="/developers/assets/js/3.98a25a7a.js"><link rel="prefetch" href="/developers/assets/js/30.4dc87f81.js"><link rel="prefetch" href="/developers/assets/js/31.d6c51da3.js"><link rel="prefetch" href="/developers/assets/js/32.9b6a5d46.js"><link rel="prefetch" href="/developers/assets/js/33.f9a34b67.js"><link rel="prefetch" href="/developers/assets/js/34.1be5ed49.js"><link rel="prefetch" href="/developers/assets/js/35.92bad26a.js"><link rel="prefetch" href="/developers/assets/js/36.4269943c.js"><link rel="prefetch" href="/developers/assets/js/37.e67e3e2b.js"><link rel="prefetch" href="/developers/assets/js/38.95710002.js"><link rel="prefetch" href="/developers/assets/js/39.4a27013e.js"><link rel="prefetch" href="/developers/assets/js/4.c45fc624.js"><link rel="prefetch" href="/developers/assets/js/40.f3b3b2c9.js"><link rel="prefetch" href="/developers/assets/js/41.f5a3fb56.js"><link rel="prefetch" href="/developers/assets/js/42.9a1bdcad.js"><link rel="prefetch" href="/developers/assets/js/43.9267a3df.js"><link rel="prefetch" href="/developers/assets/js/44.151a0e89.js"><link rel="prefetch" href="/developers/assets/js/45.6b0cec03.js"><link rel="prefetch" href="/developers/assets/js/46.df37048f.js"><link rel="prefetch" href="/developers/assets/js/47.9fe86222.js"><link rel="prefetch" href="/developers/assets/js/48.77de4866.js"><link rel="prefetch" href="/developers/assets/js/49.1a12d589.js"><link rel="prefetch" href="/developers/assets/js/5.71cdc252.js"><link rel="prefetch" href="/developers/assets/js/50.50213a02.js"><link rel="prefetch" href="/developers/assets/js/51.ac4a08c7.js"><link rel="prefetch" href="/developers/assets/js/52.f54921c8.js"><link rel="prefetch" href="/developers/assets/js/53.8ea79d5f.js"><link rel="prefetch" href="/developers/assets/js/54.194cf5af.js"><link rel="prefetch" href="/developers/assets/js/55.a5b418b9.js"><link rel="prefetch" href="/developers/assets/js/56.ec8192ea.js"><link rel="prefetch" href="/developers/assets/js/57.4b7ea8cb.js"><link rel="prefetch" href="/developers/assets/js/58.6cb47b2e.js"><link rel="prefetch" href="/developers/assets/js/59.44b4341e.js"><link rel="prefetch" href="/developers/assets/js/6.44988a9b.js"><link rel="prefetch" href="/developers/assets/js/60.55f344f0.js"><link rel="prefetch" href="/developers/assets/js/61.0444b094.js"><link rel="prefetch" href="/developers/assets/js/62.856dc838.js"><link rel="prefetch" href="/developers/assets/js/63.09799600.js"><link rel="prefetch" href="/developers/assets/js/64.cc45f664.js"><link rel="prefetch" href="/developers/assets/js/65.9c451be5.js"><link rel="prefetch" href="/developers/assets/js/66.bf2ee7a5.js"><link rel="prefetch" href="/developers/assets/js/67.25ee9554.js"><link rel="prefetch" href="/developers/assets/js/68.44671807.js"><link rel="prefetch" href="/developers/assets/js/69.ba08ab7e.js"><link rel="prefetch" href="/developers/assets/js/7.2f94e492.js"><link rel="prefetch" href="/developers/assets/js/70.30349711.js"><link rel="prefetch" href="/developers/assets/js/71.a36522f9.js"><link rel="prefetch" href="/developers/assets/js/72.8b6101f2.js"><link rel="prefetch" href="/developers/assets/js/73.ba6b048d.js"><link rel="prefetch" href="/developers/assets/js/74.5abf265c.js"><link rel="prefetch" href="/developers/assets/js/75.867935fc.js"><link rel="prefetch" href="/developers/assets/js/76.c444a096.js"><link rel="prefetch" href="/developers/assets/js/77.2c1c557c.js"><link rel="prefetch" href="/developers/assets/js/78.5f7b1c3e.js"><link rel="prefetch" href="/developers/assets/js/79.a680e3f9.js"><link rel="prefetch" href="/developers/assets/js/8.d9a74d5e.js"><link rel="prefetch" href="/developers/assets/js/80.03770288.js"><link rel="prefetch" href="/developers/assets/js/81.cbe2c473.js"><link rel="prefetch" href="/developers/assets/js/82.1c6ac4bf.js"><link rel="prefetch" href="/developers/assets/js/83.d08419a1.js"><link rel="prefetch" href="/developers/assets/js/84.1505c4c2.js"><link rel="prefetch" href="/developers/assets/js/85.b464c282.js"><link rel="prefetch" href="/developers/assets/js/86.e0df47a8.js"><link rel="prefetch" href="/developers/assets/js/87.abcd802c.js"><link rel="prefetch" href="/developers/assets/js/88.07faba71.js"><link rel="prefetch" href="/developers/assets/js/89.9dc9eba0.js"><link rel="prefetch" href="/developers/assets/js/9.21e12ace.js"><link rel="prefetch" href="/developers/assets/js/90.fc31e508.js"><link rel="prefetch" href="/developers/assets/js/91.f5bd9acd.js"><link rel="prefetch" href="/developers/assets/js/92.0572caf1.js"><link rel="prefetch" href="/developers/assets/js/93.544a3b6b.js"><link rel="prefetch" href="/developers/assets/js/94.377a31bf.js"><link rel="prefetch" href="/developers/assets/js/95.27737fb7.js"><link rel="prefetch" href="/developers/assets/js/96.9655a8bb.js"><link rel="prefetch" href="/developers/assets/js/97.345971d4.js"><link rel="prefetch" href="/developers/assets/js/98.6dabc14b.js"><link rel="prefetch" href="/developers/assets/js/99.6d4060bc.js">
    <link rel="stylesheet" href="/developers/assets/css/0.styles.f297bc98.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/developers/" class="home-link router-link-active"><!----> <span class="site-name">Quick Apps</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link">
  UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link router-link-active">
  API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Quick App Initiative
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/developers/guide/" class="nav-link">
  Guide
</a></div><div class="nav-item"><a href="/developers/components/" class="nav-link">
  UI Components
</a></div><div class="nav-item"><a href="/developers/services/" class="nav-link router-link-active">
  API &amp; Services
</a></div><div class="nav-item"><a href="https://quick-app-initiative.ow2.io" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Quick App Initiative
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guide</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>UI Components</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>API &amp; Services</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/services/" aria-current="page" class="sidebar-link">Summary of APIs</a></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Basic Services</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>UI Interaction</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading open"><span>Network</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/developers/services/fetch.html" class="sidebar-link">Fetch</a></li><li><a href="/developers/services/download.html" class="sidebar-link">Download</a></li><li><a href="/developers/services/network-status.html" class="sidebar-link">Network Status</a></li><li><a href="/developers/services/request.html" class="sidebar-link">Request</a></li><li><a href="/developers/services/upload.html" aria-current="page" class="active sidebar-link">Upload</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/developers/services/upload.html#manifest-declaration" class="sidebar-link">Manifest Declaration</a></li><li class="sidebar-sub-header"><a href="/developers/services/upload.html#module-import" class="sidebar-link">Module Import</a></li><li class="sidebar-sub-header"><a href="/developers/services/upload.html#methods" class="sidebar-link">Methods</a></li><li class="sidebar-sub-header"><a href="/developers/services/upload.html#events" class="sidebar-link">Events</a></li></ul></li><li><a href="/developers/services/upload-download.html" class="sidebar-link">Upload and Download</a></li><li><a href="/developers/services/websocket.html" class="sidebar-link">WebSockets</a></li></ul></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Files and Data Management</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>System Services</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable is-sub-group depth-1"><p class="sidebar-heading"><span>Multimedia</span> <span class="arrow right"></span></p> <!----></section></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="upload"><a href="#upload" class="header-anchor">#</a> Upload</h1> <p><strong>File upload management.</strong></p> <h2 id="manifest-declaration"><a href="#manifest-declaration" class="header-anchor">#</a> Manifest Declaration</h2> <p>You need to declare the use of this API in the <a href="/developers/guide/manifest.html#features">manifest's <code>features</code></a> member:</p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span><span class="token property">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;system.uploadtask&quot;</span><span class="token punctuation">}</span>
</code></pre></div><h2 id="module-import"><a href="#module-import" class="header-anchor">#</a> Module Import</h2> <p>Before using this service in a component, you need to <a href="/developers/guide/scripting.html#import-and-export-modules">import the module</a> in the script section of the <a href="../guide/ux-documents">UX document</a>.</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">import</span> uploadtask <span class="token keyword">from</span> <span class="token string">'@system.uploadtask'</span> 
</code></pre></div><p>Or</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> uploadtask <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;@system.uploadtask&quot;</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="methods"><a href="#methods" class="header-anchor">#</a> Methods</h2> <p>This service has the following methods:</p> <ul><li><a href="#uploadfile-url-files-header-method-data-timeout-success-fail-complete"><code>uploadFile({url,files,header,method,data,timeout,success,fail,complete})</code></a></li> <li><a href="#abort"><code>abort()</code></a></li></ul> <h3 id="uploadfile-url-files-header-method-data-timeout-success-fail-complete"><a href="#uploadfile-url-files-header-method-data-timeout-success-fail-complete" class="header-anchor">#</a> <code>uploadFile({url,files,header,method,data,timeout,success,fail,complete})</code></h3> <p><strong>Creates an upload request</strong>.</p> <p>Every time this method is called, a new <code>object</code> is returned.</p> <h4 id="arguments"><a href="#arguments" class="header-anchor">#</a> Arguments</h4> <p>This method requires an <code>object</code> with the following attributes:</p> <ul><li><code>url</code> (<code>string</code>). Mandatory attribute with the URL of the resource.</li> <li><code>files</code> (<code>array</code>). Mandatory attribute with the list of files to be uploaded, submitted as <code>multipart/form-data</code>. The array include <code>object</code>s with the following members:
<ul><li><code>uri</code> (<code>string</code>). Mandatory attribute with the local path of the files to be uploaded.</li> <li><code>filename</code> (<code>string</code>). Optional attribute with the file name in the header (when submitting <code>multipart</code>). If the file name is not specified here, the file name is obtained from the URI by default.</li> <li><code>name</code> (<code>string</code>). Optional attribute with the name of the form when <code>multipart</code> is submitted. The default value is <code>file</code>.</li> <li><code>type</code> (<code>string</code>). Optional attribute with the <code>Content-Type</code> of the files to be uploaded. If this parameter is not specified, the system will select a <code>Content-Type</code> based on the filename or URI extension. The system will show an error if <code>Content-Type</code> cannot be obtained, indicating that the parameter is invalid.</li></ul></li> <li><code>header</code> (<code>object</code>). Optional attribute with the headers of the request. User agent header is automatic specified.</li> <li><code>method</code> (<code>string</code>). Optional attribute with the HTTP method: <code>POST</code> (default value) and <code>PUT</code>.</li> <li><code>data</code> (<code>array</code>). Optional attribute with additional form data in an HTTP request. The array contains objects with the following members:
<ul><li><code>name</code> (<code>string</code>). Mandatory attribute with the name of the form field.</li> <li><code>value</code> (<code>string</code>). Mandatory attribute with the value of the form field.</li></ul></li> <li><code>timeout</code> (<code>number</code>). Optional attribute that specifies the connection timeout (not the read/write timeout interval) in millisecond  (by default <code>10000</code>).</li> <li><code>success</code>	(<code>function(res)</code>). Optional callback function corresponding to the successful execution. The argument of the callback function is an <code>object</code> with the following members:
<ul><li><code>statusCode</code> (<code>number</code>). Server status code.</li> <li><code>data</code> (<code>string</code>). If the value of type in the header returned by the server is <code>text/*</code>, <code>application/json</code>, <code>application/javascript</code>, or <code>application/xml</code>, the value is textual. Otherwise, the value is the URI of a temporary file.</li> <li><code>headers</code> (<code>object</code>). HTTP headers in the response from the server.</li></ul></li> <li><code>fail</code> (<code>function(msg,code)</code>). Optional callback function corresponding to a failed execution. The arguments of the callback function are:
<ul><li><code>msg</code> (<code>object</code>) Message with information about the error (text in <code>msg.errMsg</code>).</li> <li><code>code</code> (<code>number</code>) Error code.</li></ul></li> <li><code>complete</code> (<code>function</code>). Optional callback function corresponding to the end of the execution.</li></ul> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>mytask <span class="token operator">=</span> uploadtask<span class="token punctuation">.</span><span class="token function">uploadFile</span><span class="token punctuation">(</span><span class="token punctuation">{</span> 
    url<span class="token operator">:</span> <span class="token string">&quot;https://example.org/upload&quot;</span><span class="token punctuation">,</span> 
    header<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">&quot;Accept-Encoding&quot;</span><span class="token operator">:</span> <span class="token string">&quot;gzip, deflate&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;Accept-Language&quot;</span><span class="token operator">:</span> <span class="token string">&quot;fr-FR,en-US;q=0.8,en;q=0.6&quot;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> 
    files<span class="token operator">:</span> <span class="token punctuation">[</span> 
        <span class="token punctuation">{</span> 
            uri<span class="token operator">:</span> <span class="token string">&quot;internal://mass/videoupload.mp4&quot;</span><span class="token punctuation">,</span> 
            name<span class="token operator">:</span> <span class="token string">&quot;file1&quot;</span><span class="token punctuation">,</span> 
            type<span class="token operator">:</span> <span class="token string">&quot;video&quot;</span> 
        <span class="token punctuation">}</span> 
    <span class="token punctuation">]</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">[</span> 
        <span class="token punctuation">{</span> 
            name<span class="token operator">:</span> <span class="token string">&quot;key1&quot;</span><span class="token punctuation">,</span> 
            value<span class="token operator">:</span> <span class="token string">&quot;value1&quot;</span> 
        <span class="token punctuation">}</span> 
    <span class="token punctuation">]</span><span class="token punctuation">,</span> 
    <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;handling success:&quot;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token punctuation">}</span><span class="token punctuation">,</span> 
    <span class="token function-variable function">fail</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span> code</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> 
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;handling fail, data =&quot;</span> <span class="token operator">+</span> data<span class="token punctuation">.</span>statusText<span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token punctuation">}</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span> 
</code></pre></div><h3 id="abort"><a href="#abort" class="header-anchor">#</a> <code>abort()</code></h3> <p><strong>Method to cancel an upload task.</strong></p> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>mytask<span class="token punctuation">.</span><span class="token function">abort</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="events"><a href="#events" class="header-anchor">#</a> Events</h2> <p>This service provides the following listeners:</p> <ul><li><a href="#onprogressupdate-function-progress-totalbytessent-totalbytesexpectedtosend"><code>onProgressUpdate(function({progress,totalBytesSent,totalBytesExpectedToSend}))</code></a></li> <li><a href="#offprogressupdate"><code>offProgressUpdate()</code></a></li> <li><a href="#onheadersreceived-function-header"><code>onHeadersReceived(function({header}))</code></a></li> <li><a href="#offheadersreceived"><code>offHeadersReceived()</code></a></li></ul> <h3 id="onprogressupdate-function-progress-totalbytessent-totalbytesexpectedtosend"><a href="#onprogressupdate-function-progress-totalbytessent-totalbytesexpectedtosend" class="header-anchor">#</a> <code>onProgressUpdate(function({progress,totalBytesSent,totalBytesExpectedToSend}))</code></h3> <p><strong>Method to listen to upload progress change events</strong>.</p> <p>Every time this method is called, a new <code>object</code> is returned.</p> <h4 id="arguments-2"><a href="#arguments-2" class="header-anchor">#</a> Arguments</h4> <p>This method requires a callback <code>function</code> with an <code>object</code> as argument that has the following members:</p> <ul><li><code>progress</code> (<code>number</code>). Upload progress, in percentage.</li> <li><code>totalBytesSent</code> (<code>number</code>). Size of the uploaded data, in bytes.</li> <li><code>totalBytesExpectedToSend</code> (<code>number</code>). Expected size of data to be uploaded, in bytes.</li></ul> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>mytask<span class="token punctuation">.</span><span class="token function">onProgressUpdate</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Upload onProgressUpdate = &quot;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="offprogressupdate"><a href="#offprogressupdate" class="header-anchor">#</a> <code>offProgressUpdate()</code></h3> <p><strong>Method to cancel a listener of upload progress change events</strong>.</p> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>mytask<span class="token punctuation">.</span><span class="token function">offProgressUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="onheadersreceived-function-header"><a href="#onheadersreceived-function-header" class="header-anchor">#</a> <code>onHeadersReceived(function({header}))</code></h3> <p><strong>Method to listen to HTTP response header events</strong>.</p> <p>This method needs to be called before the file upload is completed.</p> <h4 id="arguments-3"><a href="#arguments-3" class="header-anchor">#</a> Arguments</h4> <p>This method requires a callback <code>function</code> with an <code>object</code> as argument that has the following member:</p> <ul><li><code>header</code> (<code>object</code>). HTTP response headers returned by the server.</li></ul> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>mytask<span class="token punctuation">.</span><span class="token function">onHeadersReceived</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span> 
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;Upload onHeaderReceived = &quot;</span> <span class="token operator">+</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span> 
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h3 id="offheadersreceived"><a href="#offheadersreceived" class="header-anchor">#</a> <code>offHeadersReceived()</code></h3> <p><strong>Method to cancel a listener of HTTP response headers events</strong>.</p> <p>Example:</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>mytask<span class="token punctuation">.</span><span class="token function">offHeadersReceived</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitlab.ow2.org/quick-app-initiative/quick-app-initiative/edit/master/technology-guides/developer-docs/content/services/upload.md" target="_blank" rel="noopener noreferrer">Help us improve this document!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">11/22/2021, 3:27:27 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">

      <a href="/developers/services/request.html" class="prev">
        Request
      </a></span> <span class="next"><a href="/developers/services/upload-download.html">
        Upload and Download
      </a>

    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/developers/assets/js/app.4b1167ed.js" defer></script><script src="/developers/assets/js/2.0c90b5ef.js" defer></script><script src="/developers/assets/js/107.0984490c.js" defer></script>
  </body>
</html>