File Upload
Usage notes
File uploads are managing the upload process of multiple files.
Default
Toggle markup
<coral-fileupload name="file" action="http://localhost/~ringel/singlefileupload.php">
<button is="coral-button" coral-fileupload-select="">Upload</button>
</coral-fileupload>
Mime type support
Toggle markup
<coral-fileupload name="file" action="http://localhost/~ringel/singlefileupload.php" accept="image/*, *.txt">
<button is="coral-button" coral-fileupload-select="">Only images and .txt files</button>
</coral-fileupload>
File size support
Toggle markup
<coral-fileupload name="file" action="http://localhost/~ringel/singlefileupload.php" sizelimit="1000000">
<button is="coral-button" coral-fileupload-select="">Only files < 1mb</button>
</coral-fileupload>
With upload on file selection
Toggle markup
<coral-fileupload name="file" action="http://localhost/~ringel/singlefileupload.php" autostart="">
<button is="coral-button" coral-fileupload-select="">Upload</button>
</coral-fileupload>
Disabled by default
Toggle markup
<coral-fileupload name="file" action="http://localhost/~ringel/singlefileupload.php" disabled="">
<button is="coral-button" coral-fileupload-select="">Upload</button>
</coral-fileupload>
Set action with button
Toggle markup
<coral-fileupload action="http://localhost/~ringel/singlefileupload.php" multiple="">
<button coral-fileupload-select="" is="coral-button">Select files..</button>
<button is="coral-button" coral-fileupload-submit="" formaction="/media">Upload to /media</button>
<button is="coral-button" coral-fileupload-submit="" formaction="/files">Upload to /files</button>
<button is="coral-button" coral-fileupload-submit="">Upload to default</button>
</coral-fileupload>
Set method with button
Toggle markup
<coral-fileupload action="http://localhost/~ringel/singlefileupload.php" method="post">
<button is="coral-button" coral-fileupload-select="">Select files..</button>
<button is="coral-button" coral-fileupload-submit="" formmethod="put">Upload as PUT</button>
<button is="coral-button" coral-fileupload-submit="">Upload as default</button>
</coral-fileupload>
Synchronous in a form
Toggle markup
<form method="post" enctype="multipart/form-data" action="http://localhost/~ringel/singlefileupload.php">
<coral-fileupload name="file">
<button type="button" coral-fileupload-select="" coral-fileupload-dropzone="" is="coral-button">Select file...</button>
</coral-fileupload>
<button type="submit" is="coral-button">Submit</button>
</form>
Asynchronous with multiple selection
Drop files...
Toggle markup
<style>
.fileUpload-dropZone {
border: 1px dashed rgb(150, 150, 150);
padding: 10px;
margin-bottom: 10px;
}
</style>
<coral-fileupload name="file" async="" id="fileUpload" action="http://localhost/~ringel/multiplefileupload.php" multiple="">
<div coral-fileupload-dropzone="" class="fileUpload-dropZone">Drop files...</div>
<button coral-fileupload-select="" is="coral-button">Select files...</button>
<button coral-fileupload-submit="" variant="cta" is="coral-button">Upload</button>
<button coral-fileupload-abort="" variant="warning" is="coral-button">Abort</button>
<button coral-fileupload-clear="" variant="quiet" is="coral-button">Clear</button>
<ul id="fileList"></ul>
</coral-fileupload>
<script>
window.addEventListener('load', function() {
var fileUpload = document.getElementById('fileUpload');
// Listen to XHR events
var xhrEventNames = [
'loadstart',
'readystatechange',
'progress',
'timeout',
'load',
'loadend',
'error',
'abort',
'dragenter',
'dragover',
'dragleave',
'drop'
];
xhrEventNames.forEach(function(name) {
fileUpload.on('coral-fileupload:' + name, function(event) {
console.log(name);
if (event.detail && event.detail.item) {
console.log(event.detail.item);
}
})
});
// Listen to fileupload events
fileUpload
.on('change', function(event) {
console.log('change');
})
.on('coral-fileupload:fileadded', function(event) {
console.log('fileadded');
var item = event.detail.item;
var size = Math.round(item.file.size / 1000);
var li = document.createElement('li');
li._filename = item.file.name;
li.innerHTML = '<a class="uploadFile" href="#" coral-fileupload-uploadfile="' + item.file.name + '">upload</a> - <a coral-fileupload-removefile="' + item.file.name + '"class="removeFile" href="#">remove</a><span class="progress"></span>';
li.insertBefore(document.createTextNode(item.file.name + ' - ' + (size === 0 ? item.file.size + ' bytes ' : size + ' kb ')), li.firstChild);
fileList.appendChild(li);
})
.on('coral-fileupload:fileremoved', function(event) {
console.log('fileremoved');
var item = event.detail.item;
Array.prototype.some.call(fileList.querySelectorAll('li'), function(li) {
if (li._filename === item.file.name) {
fileList.removeChild(li);
return true;
}
});
})
.on('coral-fileupload:progress', function(event) {
console.log('progress');
var item = event.detail.item;
Array.prototype.some.call(fileList.querySelectorAll('li'), function(li) {
if (event.detail.lengthComputable && li._filename === item.file.name) {
li.querySelector('.progress').textContent = ' - ' + Math.ceil(event.detail.loaded / event.detail.total * 100) + '%';
return true;
}
});
})
.on('coral-fileupload:load', function(event) {
console.log('load');
var item = event.detail.item;
if (item.status === 200) {
Array.prototype.forEach.call(fileList.querySelectorAll('li'), function(li) {
if (li._filename === item.file.name) {
li.style.color = 'green';
}
});
}
})
.on('coral-fileupload:error', function(event) {
console.log('error');
var item = event.detail.item;
Array.prototype.forEach.call(fileList.querySelectorAll('li'), function(li) {
if (li._filename === item.file.name) {
li.style.color = 'red';
}
});
});
});
</script>