Image Uploads

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

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

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

		<input
			type="file"
			value="filename.png"
			readonly="readonly"
		/>

		<div class="sui-upload-image" aria-hidden="true">
			<div class="sui-image-mask"></div>
			<div role="button"
				class="sui-image-preview"
				style="background-image: url('path-to-image/filename.png');">
			</div>
		</div>

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

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

			<span>filename.png</span>

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

		</div>

	</div>

	<!-- Repeat "sui-upload" content for multiple files -->

	<!-- Use "sui-notice" for error message. -->

</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 ));
});

// 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();
}