-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
178 lines (165 loc) · 9.97 KB
/
Copy pathindex.html
File metadata and controls
178 lines (165 loc) · 9.97 KB
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1000">
<title>PrestoTools - presto.js</title>
<meta name="description" content="JavaScript library for simultaneous file upload." />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" />
<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="screen" />
<link rel="apple-touch-icon" sizes="180x180" href="/icon.png" />
<link rel="apple-touch-icon-precomposed" href="/icon.png" />
<link rel="shortcut icon" href="/icon.png" />
<link rel="icon" sizes="192x192" href="/icon.png" />
</head>
<body>
<header class="header">
<div class="header_inner">
<div class="header_left">
<h2 class="header_title">
<a href="/">
<img class="header_title_logo" src="/icon.png" width="60" height="60" alt="" />
<span class="header_title_text">PrestoTools</span>
</a>
</h2>
</div>
<div class="header_right">
<nav class="hdNav">
<ul class="hdNav_items">
<li class="hdNav_item"><a href="#features">Features</a></li>
<li class="hdNav_item"><a href="#example">Example</a></li>
<li class="hdNav_item"><a href="#documentation">Documentation</a></li>
<li class="hdNav_item"><a href="#license">License</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section class="topHero">
<div class="topHero_inner">
<h1 class="topHero_title">presto.js</h1>
<p class="topHero_subTitle">presto.js is a small JavaScript library for splitting and transferring files</p>
<div class="topHero_links">
<a href="https://github.com/PrestoTools/presto.js/releases/download/v1.0.0/presto.js-v1.0.0.zip" target="_blank">
<i class="fas fa-download"></i> Download
</a>
<a href="https://github.com/PrestoTools/presto.js" target="_blank">
<i class="fab fa-github"></i> View on GitHub
</a>
</div>
</div>
</section>
<div class="topDescription">
<p class="topDescription_text">
The basic idea is to split files into small chunks, send them simultaneously and rebuild them into files again on the server side.
</p>
<p class="topDescription_text">
File data is cut out in chunks of 1MB each and sent in parallel to achieve a faster transfer rate than the standard function. The chunk size and number of parallel transfers can be changed by the user.
</p>
</div>
<section id="features" class="pageSection topFeatures">
<h2 class="pageSection_title">Features</h2>
<ul class="topFeatures_items">
<li class="topFeatures_item">
<p class="topFeatures_title">Faster</p>
<p class="topFeatures_description">Faster than web browsers' default file transfer implementation.</p>
</li>
<li class="topFeatures_item">
<p class="topFeatures_title">Easy to integrate</p>
<p class="topFeatures_description">Works without dependent libraries on all modern browsers. See minimal example below!</p>
</li>
<li class="topFeatures_item">
<p class="topFeatures_title">Effective for transferring huge size files</p>
<p class="topFeatures_description">You can upload hundreds of GB of files at a time with presto.</p>
</li>
<li class="topFeatures_item">
<p class="topFeatures_title">Save memory</p>
<p class="topFeatures_description">presto.js doesn't suppress computer memory even if the user sends hundreds of GB files for hours..</p>
</li>
</ul>
<div class="topFigure"></div>
</section>
<section id="example" class="pageSection topExample">
<h2 class="pageSection_title">Example</h2>
<div class="topExample_codepen">
<p data-height="265" data-theme-id="dark" data-slug-hash="NOWgJG" data-default-tab="js" data-user="yuw27b" data-pen-title="presto.js minimal example" class="codepen">See the Pen <a href="https://codepen.io/yuw27b/pen/NOWgJG/">presto.js minimal example</a> by Yu Watanabe (<a href="https://codepen.io/yuw27b">@yuw27b</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</div>
<div class="topExample_footer">
<a class="topExample_link" href="https://github.com/PrestoTools/presto.js" target="_blank">
<i class="fas fa-external-link-alt"></i> More examples are on GitHub
</a>
</div>
</section>
<section id="documentation" class="pageSection topDocumentation">
<h2 class="pageSection_title">Documentation</h2>
<div class="documentation_body">
<h3>Configuration</h3>
<pre><code>const presto = new Presto({ url: '/api/upload', ... });</code></pre>
<h4>Configuration options</h4>
<ul>
<li><code>url</code>: [string] URL of upload destination. (Default: <code>''</code>)</li>
<li><code>chunkSize</code>: [integer] Size (byte) of each chunk (Default: <code>1048576 //1MB</code>)</li>
<li><code>simultaneous</code>: [integer] Number of chunks to send abreast. 6 is recommended for HTTP/1.1 and 10 is recommended for HTTP/2. (Default: <code>6</code>)</li>
<li><code>element</code>: [HTMLFormElement] If specified, the upload will start automatically when the form is submitted. The element must have a HTMLFormInput[type="file"] as a child. (Default: <code>null</code>)</li>
<li><code>uniqueIdGenerator</code>: [function] A custom function that defines a unique ID for each file. The ID is sent with each chunk. (Default: <code>fileObject => {return `presto_${UUID_V4_STRING}`; }</code>)</li>
<li><code>httpHeaders</code>: [function] A custom function to add HTTP headers to each chunk send request. (Default: <code>PrestoFile => {return {}; }</code>)</li>
<li><code>withCredentials</code>: [boolean] This value is used as the withCredentials option of the chunk send request(XMLHttpRequest). Set <code>true</code> to send cookies with cross domain request. (Default: <code>false</code>)</li>
</ul>
<h3>Properties</h3>
<ul>
<li><code>Presto.fileList</code>: [array] Array of PrestoFile.</li>
<li><code>PrestoFile.prestoId</code>: [string] Unique ID of PrestoFile.</li>
<li><code>PrestoFile.name</code>: [string] File name.</li>
<li><code>PrestoFile.size</code>: [integer] File size (byte).</li>
<li><code>PrestoFile.displaySize</code>: [string] Human readable file size.</li>
</ul>
<h3>Methods</h3>
<ul>
<li><code>Presto.on(string eventName, function callback)</code>: Add event listener to Presto.</li>
<li><code>Presto.off(string eventName, function callback)</code>: Remove event listener from Presto.</li>
<li><code>Presto.add(HTML5 FileList object, object optional form data)</code>: Add file(s) to Presto.</li>
<li><code>Presto.remove(string prestoId)</code>: Remove file from Presto. If nothing is specified, remove all files.</li>
<li><code>Presto.reset(HTML5 FileList object, object optional form data)</code>: Replace <code>Presto.fileList</code> with specified file list. If nothing is specified, remove all files.</li>
<li><code>Presto.send(string prestoId)</code>: Start file upload of the specified file. If nothing is specified, upload all files.</li>
<li><code>Presto.abort(string prestoId)</code>: Abort file upload of the specified file. If nothing is specified, abort all files.</li>
<li><code>Presto.progress(string prestoId)</code>: Return upload progress (float number between 0 - 1) of the specified file. If nothing is specified, return progress for all files.</li>
</ul>
<h3>Events</h3>
<p><code>Presto</code> offers the following events:</p>
<ul>
<li><code>added</code>: Fires when file is added. Returns array of <code>PrestoFile</code>.</li>
<li><code>removed</code>: Fires when file(s) is removed. Returns array of removed file ID.</li>
<li><code>reset</code>: Fires when <code>Presto.fileList</code> is reset.</li>
<li><code>start</code>: Fires when uploading is started.</li>
<li><code>abort</code>: Fires when uploading is aborted.</li>
<li><code>complete</code>: Fires when uploading is completed. Returns duration of uploading(msec).</li>
<li><code>progress</code>: Fires whenever chunk upload succeeds. Returns progress for all files(float number between 0 - 1).</li>
<li><code>fileStart</code>: Fires whenever uploading of each file is started. Returns <code>PrestoFile</code>.</li>
<li><code>fileAbort</code>: Fires whenever uploading of each file is aborted. Returns <code>PrestoFile</code>.</li>
<li><code>fileComplete</code>: Fires whenever uploading of each file is completed. Returns <code>PrestoFile</code>.</li>
<li><code>fileProgress</code>: Fires whenever chunk upload succeeds. Returns <code>fileProgress</code>(float number between 0 - 1), <code>PrestoFile</code>.</li>
<li><code>fileError</code>: Fires when chunk upload fails. Returns <code>chunkIndex</code>, <code>HTTP status code</code>, <code>HTTP status text</code>, <code>PrestoFile</code>.</li>
</ul>
<p><code>PrestoFile</code> offers the following events:</p>
<ul>
<li><code>start</code>: Fires when upload started. Returns <code>PrestoFile</code>.</li>
<li><code>abort</code>: Fires when upload aborted. Returns <code>PrestoFile</code>.</li>
<li><code>complete</code>: Fires when upload completed. Returns <code>PrestoFile</code>.</li>
<li><code>progress</code>: Fires whenever chunk upload succeed. Returns <code>fileProgress</code>(float number between 0 - 1), <code>PrestoFile</code>.</li>
<li><code>error</code>: Fires when chunk upload failed. Returns <code>chunkIndex</code>, <code>XMLHttpRequest.status</code>, <code>XMLHttpRequest.statusText</code>, <code>PrestoFile</code>.</li>
</ul>
</div>
</section>
<section id="license" class="pageSection topLisence">
<h2 class="pageSection_title">License</h2>
<div class="topLicense_body">
<p><a href="https://github.com/PrestoTools/presto.js/blob/master/LISENCE" target="_blank">MIT</a></p>
</div>
</section>
<footer class="footer">
<p class="footer_copy">© 2018 Yu Watanabe</p>
</footer>
</body>
</html>