<form action="/upload.php" class="upload-form" method="POST">
<label class="btn btn-add-row file-field" for="fileUpload" tabindex="0" role="button">
<span class="link link-strong">Add file</span>
<span class="help">(or drag and drop)</span>
<div class="drop-overlay -nav-padded">
<div class="overlay-inner">
<div class="overlay-content">
<div class="overlay-icon">
<svg viewBox="0 0 45 50">
<use xlink:href="#icon-file"></use>
</svg>
</div>
<h2>Drop to upload file to Coversheet</h2>
<h3>Access your file in Forms & Documents</h3>
<input type="file" id="fileUpload" name="fileUpload" accept=".msg, .pdf, .doc, .wav, .mp3, .xls, .tif, .tiff, .jpg, .jpeg, .mov, .wma, .docx, .xlsx, .rtf, .xml" hidden data-max-size="4" >
</div>
</div>
</div>
</label>
<div class="hidden-group -hidden">
<div class="form-group">
<div class="form-field">
<label for="description">Description</label>
<input type="text" name="description" id="description">
</div>
</div>
<div class="form-group">
<div class="form-field">
<label for="chrFormType">Type</label>
</div>
</div>
<div class="button-group">
<button type="submit" class="btn btn-default">
<span class="text">Submit</span>
</button>
<button type="button" class="btn btn-default js-cancel-file">
<span class="text">Cancel</span>
</button>
</div>
</div>
</form>
<form action="/upload.php" class="upload-form" method="POST">
<label class="btn btn-add-row file-field" for="fileUpload" tabindex="0" role="button">
<span class="link link-strong">Add file</span>
<span class="help">(or drag and drop)</span>
<div class="drop-overlay -nav-padded">
<div class="overlay-inner">
<div class="overlay-content">
<div class="overlay-icon">
<svg viewBox="0 0 45 50">
<use xlink:href="#icon-file"></use>
</svg>
</div>
<h2>Drop to upload file to Coversheet</h2>
<h3>Access your file in Forms & Documents</h3>
<input type="file" id="fileUpload" name="fileUpload" accept=".msg, .pdf, .doc, .wav, .mp3, .xls, .tif, .tiff, .jpg, .jpeg, .mov, .wma, .docx, .xlsx, .rtf, .xml" hidden data-max-size="4" {{!-- size in MB --}}>
</div>
</div>
</div>
</label>
<div class="hidden-group -hidden">
<div class="form-group">
<div class="form-field">
<label for="description">Description</label>
<input type="text" name="description" id="description" >
</div>
</div>
<div class="form-group">
<div class="form-field">
<label for="chrFormType">Type</label>
{{#with dropdown }}
{{> @dropdown }}
{{/with}}
</div>
</div>
<div class="button-group">
<button type="submit" class="btn btn-default">
<span class="text">Submit</span>
</button>
<button type="button" class="btn btn-default js-cancel-file">
<span class="text">Cancel</span>
</button>
</div>
</div>
</form>
/* No context defined for this component. */
.upload-form {
&.-loading {
opacity: 0.5;
pointer-events: none;
.btn-add-row {
&::before {
content: '\f021' !important;
animation: inline-spin 1s infinite;
}
}
.drop-overlay {
display: none;
}
}
}
.drop-overlay {
position: fixed;
top: 20rem;
left: 0;
z-index: 13;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: calc(100% - 20rem);
background: rgba($color-irma-mist, 0.7);
opacity: 0;
visibility: hidden;
// pointer-events: none;
.overlay-inner {
display: flex;
justify-content: center;
align-items: center;
width: calc(100% - 6rem);
height: calc(100% - 6rem);
border: 2px dashed white;
border-radius: 4rem;
filter: drop-shadow(0 0.5rem 1.5rem rgba(black, 0.2));
}
.overlay-content {
color: white;
text-shadow: 0 0.5rem 1rem rgba(black, 0.2);
text-align: center;
.overlay-icon {
width: 15.5rem;
margin: 0 auto;
svg {
fill: white;
}
}
h2 {
margin-top: 8rem;
@include font-size-other(32px);
}
h3 {
margin-top: 4rem;
}
}
input {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
}
}
html.-file-drag {
.drop-overlay {
visibility: visible;
opacity: 1;
}
}
/*
* _upload.js
*/
irma.upload = (function () {
'use strict';
var init = function () {
if (typeof File === undefined || File.length === 0) {
$('html').addClass('js-no-drop');
}
$(document).on('dragover dragenter', 'html:not(.js-no-drop) .js-file-drop', function() {
$('html').addClass('-file-drag');
}).on('dragleave dragend drop', 'html:not(.js-no-drop) .js-file-drop', function() {
$('html').removeClass('-file-drag');
});
$(document).on('change', 'input[type=\'file\']', function(e) {
var files = $(this)[0].files,
$field = $(this).closest('.file-field'),
$form = $(this).closest('form'),
maxSize = $(this).data().maxSize,
allowed = true;
if ($(this).attr('accept').length > 0) {
var accept = $(this).attr('accept').toLowerCase().replace(/ |\./g, '').split(',');
allowed = _.indexOf(accept, files[0].name.split('.').pop().toLowerCase()) > -1;
}
if (!allowed || (maxSize && files[0].size > maxSize * Math.pow(1000, 2))) {
var alert = allowed ? "The file you're trying to upload exceeds the maximum size of " + maxSize + "MB" : "You are not allowed to upload that type of file";
$(this).val('');
irma.alert.createAlert({
info: alert
}, $(this).closest('.card-section'));
}
else if (files.length) {
$field.addClass('-with-file')
.find('.link').text(files[0].name);
$form.find('.hidden-group').removeClass('-hidden');
$('html').addClass('js-no-drop');
}
}).on('click', '.js-cancel-file', function () {
var $form = $(this).closest('form'),
$field = $form.find('.file-field');
$field.removeClass('-with-file')
.find('.link').text('Add file');
$form.find('.hidden-group').addClass('-hidden');
$field.find('input[type=\'file\']').val("");
$('html').removeClass('js-no-drop');
});
};
return {
init: init
};
}());
Will validate against data-size (file size in MB)
Will validate against “accept” attribute (comma separated list of file extensions, e.g. “.xlsx, .doc, .docx, .txt”)