Upload

<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 &amp; 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 &amp; 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. */
  • Content:
    .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;
    	}
    }
  • URL: /components/raw/upload/_upload.scss
  • Filesystem Path: components/01-components/upload/_upload.scss
  • Size: 1.3 KB
  • Content:
    /* 
     *	_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
    	};
    
    }());
  • URL: /components/raw/upload/upload.js
  • Filesystem Path: components/01-components/upload/upload.js
  • Size: 1.9 KB
  • 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”)