mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
262 lines
9.9 KiB
262 lines
9.9 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Upload - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>Upload</h1>
|
|
|
|
<h2>Select</h2>
|
|
|
|
<div class="js-upload" uk-form-custom>
|
|
<input type="file" multiple>
|
|
<button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
|
|
</div>
|
|
|
|
<h2>Drop Area</h2>
|
|
|
|
<div class="js-upload uk-placeholder uk-text-center">
|
|
<span uk-icon="icon: cloud-upload"></span>
|
|
<span class="uk-text-middle">Attach binaries by dropping them here or</span>
|
|
<div uk-form-custom>
|
|
<input type="file" multiple>
|
|
<span class="uk-link">selecting one</span>
|
|
</div>
|
|
</div>
|
|
|
|
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
|
|
|
|
<script>
|
|
|
|
var bar = document.getElementById('js-progressbar');
|
|
|
|
UIkit.upload('.js-upload', {
|
|
|
|
url: '',
|
|
multiple: true,
|
|
|
|
beforeSend: function () {
|
|
console.log('beforeSend', arguments);
|
|
},
|
|
beforeAll: function () {
|
|
console.log('beforeAll', arguments);
|
|
},
|
|
load: function () {
|
|
console.log('load', arguments);
|
|
},
|
|
error: function () {
|
|
console.log('error', arguments);
|
|
},
|
|
complete: function () {
|
|
console.log('complete', arguments);
|
|
},
|
|
|
|
loadStart: function (e) {
|
|
console.log('loadStart', arguments);
|
|
|
|
bar.removeAttribute('hidden');
|
|
bar.max = e.total;
|
|
bar.value = e.loaded;
|
|
},
|
|
|
|
progress: function (e) {
|
|
console.log('progress', arguments);
|
|
|
|
bar.max = e.total;
|
|
bar.value = e.loaded;
|
|
},
|
|
|
|
loadEnd: function (e) {
|
|
console.log('loadEnd', arguments);
|
|
|
|
bar.max = e.total;
|
|
bar.value = e.loaded;
|
|
},
|
|
|
|
completeAll: function () {
|
|
console.log('completeAll', arguments);
|
|
|
|
setTimeout(function () {
|
|
bar.setAttribute('hidden', 'hidden');
|
|
}, 1000);
|
|
|
|
alert('Upload Completed');
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<h2>JavaScript Options</h2>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Value</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>url</code></td>
|
|
<td>String</td>
|
|
<td>''</td>
|
|
<td>The request url.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>multiple</code></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>Allow multiple files to be uploaded.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>name</code></td>
|
|
<td>String</td>
|
|
<td>'files[]'</td>
|
|
<td>The name parameter.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>type</code></td>
|
|
<td>String</td>
|
|
<td>POST</td>
|
|
<td>The request type.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>params</code></td>
|
|
<td>Object</td>
|
|
<td>{}</td>
|
|
<td>Additional parameters.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>allow</code></td>
|
|
<td>String</td>
|
|
<td>false</td>
|
|
<td>File name filter. (eg. *.png)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>mime</code></td>
|
|
<td>String</td>
|
|
<td>false</td>
|
|
<td>File MIME type filter. (eg. images/*)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>maxSize</code></td>
|
|
<td>Number</td>
|
|
<td>0</td>
|
|
<td>The maximum file size per file. (kB)</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>concurrent</code></td>
|
|
<td>Number</td>
|
|
<td>1</td>
|
|
<td>Number of files that will be uploaded simultaneously.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>type</code></td>
|
|
<td>String</td>
|
|
<td>(xml, json, script, or html)</td>
|
|
<td>The expected response data type.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>msg-invalid-mime</code></td>
|
|
<td>String</td>
|
|
<td>Invalid File Type: %s</td>
|
|
<td>Invalid MIME type message.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>msg-invalid-name</code></td>
|
|
<td>String</td>
|
|
<td>Invalid File Name: %s</td>
|
|
<td>Invalid name message.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>cls-dragover</code></td>
|
|
<td>String</td>
|
|
<td>'uk-dragover'</td>
|
|
<td>File name filter.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>abort</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The abort callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>before-all</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The beforeAll callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>before-send</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The beforeSend callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>complete</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The complete callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>complete-all</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The completeAll callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>error</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The error callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>load</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The load callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>load-end</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The loadEnd callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>load-start</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The loadStart callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>progress</code></td>
|
|
<td>Function</td>
|
|
<td>null</td>
|
|
<td>The progress callback.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>fail</code></td>
|
|
<td>Function</td>
|
|
<td>alert</td>
|
|
<td>The fail callback. If name or MIME type are invalid.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|