File Uploads

<div class="sui-upload sui-file-upload sui-file-browser">

	<input type="file" ... />

	<!--
	NOTE: Insert the element after input but before upload button.
	-->
	<div class="sui-upload-image" aria-hidden="true">

		<div class="sui-image-mask"></div>

			<!--
			NOTE: Use the uploaded image URL as background image of the div below.
			Leave empty when no file has been uploaded yet.
			-->
			<div
				role="button"
				class="sui-image-preview"
				style="background-image: url();"
			></div>

		</div>

		<button class="sui-upload-button"> ... </button>

	<div class="sui-upload-file"> ... </div>

</div>

	<div class="sui-form-field">

		<label class="sui-label">Field label</label>

		<div class="sui-upload sui-file-upload sui-file-browser">

			<input type="file" value="" readonly="readonly" />

			<button class="sui-upload-button"
			<span class="sui-icon-upload-cloud" aria-hidden="true"></span>
				Upload file
			</button>

			<div class="sui-upload-file">

				<span></span>

				<button aria-label="Remove file">
					<span class="sui-icon-close" aria-hidden="true"></span>
				</button>

			</div>

		</div>

		<span class="sui-description">Element description.</span>

		<div class="sui-notice sui-notice-error" style="margin-top: 5px; display: none;">
			<p>Element error message.</p>
		</div>

	</div>

// This will trigger on file change.
$( '.sui-file-browser input[type="file"]' ).on( 'change', function() {
	var parent = $( this ).parent();
	var filename = $( this ).val();
	var imageContainer = parent.find( '.sui-upload-image' );
	if(filename) {
		var lastIndex = filename.lastIndexOf( "\\" );
		if ( lastIndex >= 0 ) {
			filename = filename.substring(lastIndex + 1);
			// To show uploaded file preview.
			if( imageContainer.length ){
				var reader = new FileReader();
				var imagePreview = imageContainer.find( '.sui-image-preview' );
				reader.onload = function ( e ) {
					imagePreview.attr( 'style', 'background-image: url('+e.target.result+' );' );
				}
				reader.readAsDataURL($( this )[0].files[0]);
			}
			parent.find( '.sui-upload-file > span' ).text(filename);
			parent.addClass( 'sui-has_file' );
		}
	} else {
		if( imageContainer.length ){
			var imagePreview = imageContainer.find( '.sui-image-preview' );
			imagePreview.attr( 'style', 'background-image: url();' );
		}
		parent.find( '.sui-upload-file > span' ).text( '' );
		parent.removeClass( 'sui-has_file' );
	}
});

// This will trigger on click of upload button
$( '.sui-file-browser .sui-upload-button' ).on( 'click', function(){
	selectFile($( this ));
});

// This will trigger when user wants to remove the selected upload file
$( '.sui-file-upload [aria-label="Remove file"]' ).on( 'click', function(){
	removeFile($( this ));
});

// This will trigger reupload of file
$( '.sui-file-browser .sui-upload-image' ).on( 'click', function(){
	selectFile($( this ));
});

// upload drag and drop functionality
var isAdvancedUpload = function() {
	var div = document.createElement('div');
	return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();

var uploadArea = $( 'SUI_BODY_CLASS .sui-upload-button' );

if(isAdvancedUpload){
	var droppedFiles = false;

	uploadArea.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
		e.preventDefault();
		e.stopPropagation();
	})
	.on('dragover dragenter', function() {
		uploadArea.addClass('sui-is-dragover');
	})
	.on('dragleave dragend drop', function() {
		uploadArea.removeClass('sui-is-dragover');
	})
	.on('drop', function(e) {
		droppedFiles = e.originalEvent.dataTransfer.files;
		uploadedFile( $( this ), droppedFiles[0], droppedFiles[0].name);
	});
}

// function to set uploaded file
function uploadedFile(element, file, filename){
	var parent = element.closest( '.sui-upload' );
	var imageContainer = parent.find( '.sui-upload-image' );
	if(filename) {
		if( imageContainer.length ){
			var reader = new FileReader();
			var imagePreview = imageContainer.find( '.sui-image-preview' );
			reader.onload = function ( e ) {
				imagePreview.attr( 'style', 'background-image: url('+e.target.result+' );' );
			}
			reader.readAsDataURL(file);
		}
		parent.find( '.sui-upload-file > span' ).text(filename);
		parent.addClass( 'sui-has_file' );
	}
}

// function to open browser file explorer for selecting file
function selectFile(element) {
	var parent = element.closest( '.sui-upload' );
	var file = parent.find( 'input[type="file"]' );
	file.trigger( 'click' );
}

// function to remove file
function removeFile(element) {
	var parent = element.closest( '.sui-upload' );
	var file = parent.find( 'input[type="file"]' );
	file.val('').change();
}