d2l-file-uploader.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../d2l-colors/d2l-colors.html">
<link rel="import" href="../app-localize-behavior/app-localize-behavior.html">
<link rel="import" href="../d2l-typography/d2l-typography.html">

<dom-module id="d2l-file-uploader">

	<template>
		<style include="d2l-typography">
			#drop_zone {
				border: 2px dashed;
				border-radius: 0.3rem;
				text-align: center;
				height: auto;
				width: auto;
				max-width: 27rem;
			}

			:host([file-drag-over]) #drop_zone {
        		color: var(--d2l-color-celestine);
				background-color: var(--d2l-color-celestine-plus-2);
      		}

			#file_upload_icon {
				padding-top: 1.3rem;
				padding-bottom: 0.5rem;
			}

			:host([file-drag-over]) #file_upload_icon svg path {
				fill: var(--d2l-color-celestine);
			}

			d2l-icon#file_upload_icon {
				--d2l-icon-height: 3rem;
				--d2l-icon-width: 3rem;
			}

			#file_upload_input_1 {
				display: block;
				width: 3.1rem;
    			height: 0.9rem;
				position: absolute;
				opacity: 0;
				top: 0;
				left: 0;
			}

			#file_upload_input_2 {
				display: none;
			}

			#browse_label {
				position: relative;
				overflow: hidden;
				padding-right: 0px;
				border: none;
				background: none;
				color: var(--d2l-color-celestine);
			}

			#browse_label:hover, #file_upload_input_1:focus + label, #file_upload_input_1:hover + label {
				color: var(--d2l-color-celestine-minus-1);
				text-decoration: underline;
			}

			#browse_button {
				display: none;
			}

			#file_upload_text {
				margin-bottom: 1.3rem;
			}

			#input-container1 {
				position: relative;
				overflow: hidden;
				padding-right: 0px;
				border: none;
				background: none;
				display: inline;
			}

			#input-container2 {
				position: relative;
				margin:auto;
				margin-top: 0.8rem;
				margin-bottom: 0.8rem;
				display:table;
			}

			#error {
				width: auto;
				max-width: 25.65rem;
				padding-top: 0.7rem;
				padding-bottom: 0.7rem;
				padding-left: 1rem;
				border: 1px solid;
				border-color: var(--d2l-color-mica);
				border-radius: 0.3rem;
				border-left-width: 0.5rem;
				border-left-color: var(--d2l-color-citrine);
				/*border-left-color: var(--error-message-box-color);*/
				margin-bottom: 1.5rem;
			}

			#error div {
				padding-top: 0.8rem;
				padding-left: 1rem;
			}

			.error-anim {
			  animation-name: errorIn;
			  animation-duration: 0.7s;
			}

			@keyframes errorIn {
			  	0% {
			    	opacity: 0;
			   		max-height: 0.1rem
			  	}
				20% {
					opacity: 0;
				}
				80% {
					max-height: 3rem;
				}
			  	100% {
					opacity: 1;
				}
			}

			@media (max-width: 992px) {
				#browse_label {
					display: none;
				}

				#file_upload_input_1 {
					display: none;
				}

				#file_upload_input_2 {
					display: block;
					width: 7rem;
					height: 2.1rem;
					margin-left: 0.5rem;
					position: absolute;
					opacity: 0;
					top: 0;
					left: 0;
				}

				/* These rules are for mimicing the look and feel of d2l-button. d2l-button cannot be used here because placing a input element inside */
				/* a button would not work on browsers other than Chrome */
				#browse_button {
					display: block;
					width: auto;
					border: 1px solid;
					border-radius: 0.3rem;
					border-color: var(--d2l-color-celestine-minus-1);
					padding-left: 1.5rem;
					padding-right: 1.5rem;
					padding-top: 0.35rem;
					padding-bottom: 0.35rem;
					margin: auto;
					margin-bottom: 0.4rem;
					color: #ffffff;
					background-color: var(--d2l-color-celestine);
					font-size: 0.7rem;
				}

				#browse_button:hover, #file_upload_input_2:hover + #browse_button {
					background-color: var(--d2l-color-celestine-minus-1);
				}

				#file_upload_input_2:focus + #browse_button  {
					box-shadow: 0 0 0 4px rgba(0, 111, 191, 0.3);
				}
			}
		</style>

		<div class="d2l-typography">
			<div>
				<div id="error" class="error-anim" role="alert" hidden$="{{!error}}">{{errorMessage}}</div>
			</div>

			<div id="drop_zone">
				<div id="file_upload_icon">
					<svg width="78" height="78" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 78 78">
						<path fill="#565a5c" d="M54.76,36A3.992,3.992,0,0,1,51,38.639H42v36a3,3,0,0,1-6,0v-36H27a4,4,0,0,1-2.56-7.07l12-10a3.988,3.988,0,0,1,5.12,0l12,10A4.007,4.007,0,0,1,54.76,36Z"/>
						<path fill="#565a5c" d="M46,53.549a1.333,1.333,0,0,0,.49.09"/>
						<path fill="#565a5c" d="M46.5,50.639a1.386,1.386,0,0,0-.5.09"/>
						<path fill="#565a5c" d="M78,36.139a17.519,17.519,0,0,1-17.5,17.5c-.17,0-1.33,0-1.5-.02l-12.51.02a1.333,1.333,0,0,1-.49-.09,1.494,1.494,0,0,1,0-2.82,1.386,1.386,0,0,1,.5-.09h14a14.5,14.5,0,0,0,1.58-28.92c-.52-.05-1.05-.08-1.58-.08h-.35a1.49,1.49,0,0,1-1-.4,2.258,2.258,0,0,1-.542-1.074c-.138-.462-.306-.916-.478-1.365a20.484,20.484,0,0,0-38.26,0q-.21.54-.39,1.08a3.353,3.353,0,0,1-.53,1.26,1.542,1.542,0,0,1-1.12.5H17.5c-.53,0-1.06.03-1.58.08a14.5,14.5,0,0,0,1.58,28.92H31.49a1.5,1.5,0,0,1,.01,3s-13.5,0-13.5-.02a4.176,4.176,0,0,1-.5.02,17.5,17.5,0,0,1-.77-34.98,23.489,23.489,0,0,1,44.54,0A17.519,17.519,0,0,1,78,36.139Z"/>
					</svg>
				</div>
				<div id="file_upload_text">
					<span><span hidden$="[[multiple]]">{{localize('single_file_upload_text')}}</span>
					<span hidden$="[[!multiple]]">{{localize('multiple_file_upload_text')}}</span>
					<div id="input-container1">
						<input id="file_upload_input_1" type="file" aria-label$="{{localize('browse')}}" multiple="[[multiple]]" on-change="_fileSelectHandler"/>
						<label id="browse_label" for="file_upload_input_1">{{localize('browse')}}</label>
					</div>
					</span>
					<div id="input-container2">
						<input id="file_upload_input_2" type="file" aria-label$="{{localize('browse_files')}}" multiple="[[multiple]]" on-change="_fileSelectHandler"/>
						<label id="browse_button" for="file_upload_input_2">{{localize('browse_files')}}</label>
					</div>
				</div>
			</div>
		</div>
	</template>

	<script>
		var fileDragOverHandler;
		var fileDragLeaveHandler;
		var fileDragEndHandler;
		var fileDropHandler;

		Polymer({
			is: 'd2l-file-uploader',

			/** @polymerBehavior */
			behaviors: [
				Polymer.AppLocalizeBehavior
			],

			properties: {
				language: {
					type: String,
					value: 'en',
					notify: false
				},

				multiple: {
					type: Boolean,
					value: false,
					notify: false
				},

				files: {
					type: Object,
					notify: false,
					observer: '_fileChangeHandler'
				},

				fileDragOver: {
					type: Boolean,
					value: false,
					notify: false,
					reflectToAttribute: true
				},

				error: {
					type: Boolean,
					value: false,
					notify: true
				},

				errorMessage: {
					type: String,
					value: '',
					notify: false
				}
			},

			attached: function() {
				this.loadResources(this.resolveUrl('locales.json'));

				fileDragOverHandler = this._fileDragOverHandler.bind(this);
				fileDragLeaveHandler = this._fileDragLeaveHandler.bind(this);
				fileDragEndHandler = this._fileDragEndHandler.bind(this);
				fileDropHandler = this._fileDropHandler.bind(this);

				document.addEventListener('dragover', fileDragOverHandler);
				document.addEventListener('dragleave', fileDragLeaveHandler);
				document.addEventListener('dragend', fileDragEndHandler);
				document.addEventListener('drop', fileDropHandler);
			},

			detached: function() {
				document.removeEventListener('dragover', fileDragOverHandler);
				document.removeEventListener('dragleave', fileDragLeaveHandler);
				document.removeEventListener('dragend', fileDragEndHandler);
				document.removeEventListener('drop', fileDropHandler);
			},

			_fileSelectHandler: function(event) {
				var files = [];
				for (var i = 0; i < event.target.files.length; i++) {
					files[i] = event.target.files[i];
				}

				this.files = files;
			},

			_fileDragOverHandler: function(event) {
				event.preventDefault();
				this.fileDragOver = true;
			},

			_fileDragLeaveHandler: function(event) {
				event.preventDefault();
				this.fileDragOver = false;
			},

			_fileDragEndHandler: function(event) {
				this.fileDragOver = false;
				var dataTransfer = event.dataTransfer;
				if (dataTransfer.items) {
					// Use DataTransferItemList interface to remove the drag data
					for (var i = 0; i < dataTransfer.items.length; i++) {
						dataTransfer.items.remove(i);
					}
				}
				else {
					// Use DataTransfer interface to remove the drag data
					event.dataTransfer.clearData();
				}
			},

			_fileDropHandler: function(event) {
				event.preventDefault();
				this.fileDragOver = false;
				var files = [];
				var dataTransfer = event.dataTransfer;
				if (dataTransfer.items) {
					if (!this.multiple && dataTransfer.items.length > 1) {
						this.error = true;
						this.errorMessage = this.localize('choose_one_file_to_upload');
						return;
					}

					// Use DataTransferItemList interface to access the file(s)
					for (var i = 0; i < dataTransfer.items.length; i++) {
						if (dataTransfer.items[ i ].kind === 'file') {
							files[i] = dataTransfer.items[i].getAsFile();
						}
					}
				}
				else {
					if (!this.multiple && dataTransfer.files.length > 1) {
						this.error = true;
						this.errorMessage = this.localize('choose_one_file_to_upload');
						return;
					}

					// Use DataTransfer interface to access the file(s)
					for (var j = 0; j < dataTransfer.files.length; j++) {
						files[j] = dataTransfer.files[j];
					}
				}

				this.files = files;
			},

			_fileChangeHandler: function(files) {
				this.fire('file-added-to-upload', files);
			}
		});
	</script>

</dom-module>