diff --git a/assets/js/shared-ui/upload.js b/assets/js/shared-ui/upload.js
index 161ff61e..b1faf83f 100644
--- a/assets/js/shared-ui/upload.js
+++ b/assets/js/shared-ui/upload.js
@@ -17,16 +17,15 @@
 			if ( file ) {
 				message.text( file.name );
 			}
-
 		});
 
 		// check whether element exist then execute js
-		if($( 'SUI_BODY_CLASS .sui-file-upload' ).length){
+		if($( 'SUI_BODY_CLASS .sui-upload--file' ).length) {
 			// This will trigger on file change. 
-			$( 'SUI_BODY_CLASS .sui-file-browser input[type="file"]' ).on( 'change', function() {
-				var parent = $( this ).parent();
+			$( 'SUI_BODY_CLASS .sui-upload--browser input[type="file"]' ).on( 'change', function() {
+				var parent = $( this ).closest( '.sui-upload' );
 				var filename = $( this ).val();
-				var imageContainer = parent.find( '.sui-upload-image' );
+				var imageContainer = parent.find( '.sui-upload__image' );
 				if(filename) {
 					var lastIndex = filename.lastIndexOf( "\\" );
 					if ( lastIndex >= 0 ) {
@@ -34,37 +33,37 @@
 						// To show uploaded file preview.
 						if( imageContainer.length ){
 							var reader = new FileReader();
-							var imagePreview = imageContainer.find( '.sui-image-preview' );
+							var imagePreview = imageContainer.find( '.sui-upload__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' );
+						parent.find( '.sui-upload__file > span' ).text(filename);
+						parent.addClass( 'sui-upload--has-file' );
 					}
 				} else {
 					if( imageContainer.length ){
-						var imagePreview = imageContainer.find( '.sui-image-preview' );
+						var imagePreview = imageContainer.find( '.sui-upload__image--preview' );
 						imagePreview.attr( 'style', 'background-image: url();' );
 					}
-					parent.find( '.sui-upload-file > span' ).text( '' );
-					parent.removeClass( 'sui-has_file' );
+					parent.find( '.sui-upload__file > span' ).text( '' );
+					parent.removeClass( 'sui-upload--has-file' );
 				}
 			});
 
 			// This will trigger on click of upload button
-			$( 'SUI_BODY_CLASS .sui-file-browser .sui-upload-button' ).on( 'click', function(){
+			$( 'SUI_BODY_CLASS .sui-upload--browser .sui-upload__button--upload' ).on( 'click', function(){
 				selectFile($( this ));
 			});
 
 			// This will trigger when user wants to remove the selected upload file
-			$( 'SUI_BODY_CLASS .sui-file-upload [aria-label="Remove file"]' ).on( 'click', function(){
+			$( 'SUI_BODY_CLASS .sui-upload--file [aria-label="Remove file"]' ).on( 'click', function(){
 				removeFile($( this ));
 			});
 
 			// This will trigger reupload of file
-			$( 'SUI_BODY_CLASS .sui-file-browser .sui-upload-image' ).on( 'click', function(){
+			$( 'SUI_BODY_CLASS .sui-upload--browser .sui-upload__image' ).on( 'click', function(){
 				selectFile($( this ));
 			});
 
@@ -74,7 +73,7 @@
 				return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
 			}();
 
-			var uploadArea = $( 'SUI_BODY_CLASS .sui-upload-button' );
+			var uploadArea = $( 'SUI_BODY_CLASS .sui-upload__button' );
 
 			if(isAdvancedUpload){
 				var droppedFiles = false;
@@ -98,18 +97,18 @@
 			// function to set uploaded file
 			const uploadedFile = function (element, file, filename){
 				var parent = element.closest( '.sui-upload' );
-				var imageContainer = parent.find( '.sui-upload-image' );
+				var imageContainer = parent.find( '.sui-upload__image' );
 				if(filename) {
 					if( imageContainer.length ){
 						var reader = new FileReader();
-						var imagePreview = imageContainer.find( '.sui-image-preview' );
+						var imagePreview = imageContainer.find( '.sui-upload__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' );
+					parent.find( '.sui-upload__file > span' ).text(filename);
+					parent.addClass( 'sui-upload--has-file' );
 				}
 			}
 
diff --git a/assets/scss/shared-ui/_upload.scss b/assets/scss/shared-ui/_upload.scss
index f24b2d62..9504c3ff 100644
--- a/assets/scss/shared-ui/_upload.scss
+++ b/assets/scss/shared-ui/_upload.scss
@@ -8,243 +8,231 @@
 			@extend %sui-screen-reader-text;
 		}
 
-		button {
-			cursor: pointer;
-			display: block;
-			transition: 0.3s ease;
-
-			&,
-			&:hover,
-			&:focus,
-			&:active {
-				outline: none;
-				box-shadow: none;
-			}
+		// Error and Multiple Uploads
+		+ .sui-notice-error,
+		+ .sui-upload {
+			margin-top: 10px;
 		}
+	}
 
-		.sui-upload-image {
-			width: $file-upload--image-size;
-			height: $file-upload--image-size;
-			flex: 0 0 auto;
-			position: relative;
-			margin: 0;
-			padding: $file-upload--image-padding;
-			border: $file-upload--image-border-width $file-upload--image-border-style $file-upload--image-border-color;
-			border-radius: $border-radius;
+	.sui-upload__button {
+		cursor: pointer;
+		display: block;
+		transition: 0.3s ease;
+
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			outline: none;
+			box-shadow: none;
+		}
+	}
 
-			[class*="sui-image-"] {
-				width: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))};
-				height: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))};
-				display: block;
-				border-radius: #{$border-radius - $file-upload--image-padding};
-			}
+	// Image preview
+	.sui-upload__image {
+		width: $file-upload--image-size;
+		height: $file-upload--image-size;
+		flex: 0 0 auto;
+		position: relative;
+		margin: 0;
+		padding: $file-upload--image-padding;
+		border: $file-upload--image-border-width $file-upload--image-border-style $file-upload--image-border-color;
+		border-radius: $border-radius;
+
+		~ .sui-upload__file,
+		~ .sui-upload__button {
+			margin-left: 5px;
+		}
 
-			.sui-image-mask {
-				background-color: $file-upload--image-mask-background;
-				background-image: linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white), linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white);
-				background-size: 12px 12px;
-				background-position: 0 0, 6px 6px;
-			}
+		~ .sui-upload__file {
+			max-width: calc(100% - #{$file-upload--image-size + 5px});
+			cursor: initial;
+			padding-left: 19px;
 
-			.sui-image-preview {
-				cursor: pointer;
-				display: none;
-				position: absolute;
-				top: $file-upload--image-padding;
-				left: $file-upload--image-padding;
-				background-color: transparent;
-				background-size: cover;
-				background-repeat: no-repeat;
-				background-position: center;
-
-				@include icon(before, upload-cloud) {
-					opacity: 0;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					position: absolute;
-					top: 0;
-					right: 0;
-					bottom: 0;
-					left: 0;
-					border-radius: #{$border-radius - $file-upload--image-padding};
-					color: $white;
-					font-size: 12px;
-					line-height: 12px;
-					background-color: $file-upload--image-preview-background;
-					transition: 0.2s ease;
-				}
-
-				&,
-				&:hover,
-				&:focus,
-				&:active {
-					outline: none;
-					box-shadow: none;
-				}
-
-				&:hover,
-				&:focus,
-				&:active {
-
-					&:before {
-						opacity: 1;
-					}
-				}
+			&:before {
+				content: unset;
 			}
 
-			~ .sui-upload-button,
-			~ .sui-upload-file {
-				margin-left: 5px;
+			&:hover,
+			&:active {
+				background-color: $file-upload--file-background;
 			}
+		}
+	}
 
-			~ .sui-upload-file {
-				max-width: calc(100% - #{$file-upload--image-size + 5px});
-				cursor: initial;
-				padding-left: 19px;
+	[class*="sui-upload__image--"] {
+		width: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))};
+		height: #{$file-upload--image-size - (($file-upload--image-border-width * 2) + ($file-upload--image-padding * 2))};
+		display: block;
+		border-radius: #{$border-radius - $file-upload--image-padding};
+	}
 
-				&:before {
-					content: unset;
-				}
+	.sui-upload__image--mask {
+		background-color: $file-upload--image-mask-background;
+		background-image: linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white), linear-gradient(45deg, $white 25%, transparent 25%, transparent 75%, $white 75%, $white);
+		background-size: 12px 12px;
+		background-position: 0 0, 6px 6px;
+	}
 
-				&:hover,
-				&:active {
-					background-color: $file-upload--file-background;
-				}
-			}
+	.sui-upload__image--preview {
+		cursor: pointer;
+		display: none;
+		position: absolute;
+		top: $file-upload--image-padding;
+		left: $file-upload--image-padding;
+		background-color: transparent;
+		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center;
+
+		@include icon(before, upload-cloud) {
+			opacity: 0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border-radius: #{$border-radius - $file-upload--image-padding};
+			color: $white;
+			font-size: 12px;
+			line-height: 12px;
+			background-color: $file-upload--image-preview-background;
+			transition: 0.2s ease;
 		}
 
-		.sui-upload-file {
-			max-width: 100%;
-			cursor: pointer;
-			flex: 0 0 auto;
-			display: none;
-			position: relative;
-			padding: 11px 61px 11px 41px;
-			border: 1px solid $file-upload--file-border-color;
-			border-radius: $border-radius;
-			background-color: $file-upload--file-background;
-			transition: 0.3s ease;
-			overflow-wrap: break-word;
-
-			@include icon(before, page-pdf) {
-				width: 29px;
-				display: block;
-				position: absolute;
-				left: 14px;
-				font-size: 16px;
-				line-height: 16px;
-				text-align: center;
-			}
+		&,
+		&:hover,
+		&:focus,
+		&:active {
+			outline: none;
+			box-shadow: none;
+		}
 
-			span {
-				user-select: none;
-				display: block;
-				color: $file-upload--file-color;
-				font: $font--medium 12px/16px $font;
-				letter-spacing: $font--letter-spacing;
-
-				&:focus {
-					outline: none;
-					box-shadow: none;
-				}
-			}
+		&:hover,
+		&:focus,
+		&:active {
 
-			button {
-				width: #{$file-upload--image-size - 1px};
-				position: absolute;
-				top: 0;
-				right: 0;
-				bottom: 0;
-				border: 0 solid $file-upload--file-border-color;
-				border-left-width: 1px;
-				border-radius: 0 #{$border-radius - 1px} #{$border-radius - 1px} 0;
-				background-color: $file-upload--file-background;
-				font-size: 12px;
-				text-align: center;
-
-				[class*="sui-icon-"] {
-					display: block;
-
-					&:before {
-						display: block;
-					}
-				}
-
-				&:hover,
-				&:focus,
-				&:active {
-					background-color: rgba(51, 51, 51, 0.04);
-				}
+			&:before {
+				opacity: 1;
 			}
+		}
+	}
 
-			&:hover,
-			&:active {
-				background-color: $file-upload--file-hover-background;
-			}
+	// File upload
+	.sui-upload__file {
+		max-width: 100%;
+		cursor: pointer;
+		flex: 0 0 auto;
+		display: none;
+		position: relative;
+		padding: 11px 61px 11px 41px;
+		border: 1px solid $file-upload--file-border-color;
+		border-radius: $border-radius;
+		background-color: $file-upload--file-background;
+		transition: 0.3s ease;
+		overflow-wrap: break-word;
+
+		@include icon(before, page-pdf) {
+			width: 29px;
+			display: block;
+			position: absolute;
+			left: 14px;
+			font-size: 16px;
+			line-height: 16px;
+			text-align: center;
 		}
 
-		.sui-upload-button {
-			margin: 0;
-			padding: 11px 19px;
-			border: $file-upload--add-border-width $file-upload--add-border-style $file-upload--add-border-color;
-			border-radius: $border-radius;
-			background-color: $file-upload--add-background;
-			color: $file-upload--add-color;
-			font: $font--medium 12px/16px $font;
-			letter-spacing: $font--letter-spacing;
+		&:hover,
+		&:active {
+			background-color: $file-upload--file-hover-background;
+		}
+	}
 
-			&:hover,
-			&:focus,
-			&:active,
-			&.sui-is-dragover {
-				border-color: palette(silver, medium);
-				background-color: #FAFAFA;
-			}
+	.sui-upload__icon--upload,
+	.sui-upload__filename {
+		user-select: none;
+		color: $file-upload--file-color;
+		font: $font--medium 12px/16px $font;
+		letter-spacing: $font--letter-spacing;
 
-			[class*="sui-icon-"] {
-				width: 24px;
-				margin-left: -4px;
-				color: palette(gray, light);
-				font-size: 16px;
-				line-height: 16px;
-				vertical-align: bottom;
-				text-align: center;
-
-				&:before {
-					display: block;
-					color: inherit;
-				}
-			}
+		&:focus {
+			outline: none;
+			box-shadow: none;
 		}
+	}
+
+	.sui-upload__filename {
+		display: block;
+	}
 
-		// STATUS: File uploaded
-		&.sui-has_file {
+	.sui-upload__button--remove {
+		width: #{$file-upload--image-size - 1px};
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		border: 0 solid $file-upload--file-border-color;
+		border-left-width: 1px;
+		border-radius: 0 #{$border-radius - 1px} #{$border-radius - 1px} 0;
+		background-color: $file-upload--file-background;
+		font-size: 12px;
+		text-align: center;
+
+		&:hover,
+		&:focus,
+		&:active {
+			background-color: rgba(51, 51, 51, 0.04);
+		}
+	}
 
-			.sui-upload-image {
+	.sui-upload__button--upload {
+		margin: 0;
+		padding: 11px 19px;
+		border: $file-upload--add-border-width $file-upload--add-border-style $file-upload--add-border-color;
+		border-radius: $border-radius;
+		background-color: $file-upload--add-background;
+		color: $file-upload--add-color;
+		font: $font--medium 12px/16px $font;
+		letter-spacing: $font--letter-spacing;
+
+		&:hover,
+		&:focus,
+		&:active,
+		&.sui-is-dragover {
+			border-color: palette(silver, medium);
+			background-color: #FAFAFA;
+		}
 
-				.sui-image-preview {
-					display: block;
-				}
-			}
+		[class*="sui-icon-"] {
+			width: 24px;
+			margin-left: -4px;
+			color: palette(gray, light);
+			font-size: 16px;
+			line-height: 16px;
+			vertical-align: bottom;
+			text-align: center;
 
-			.sui-upload-file {
+			&:before {
 				display: block;
-			}
-
-			.sui-upload-button {
-				display: none;
+				color: inherit;
 			}
 		}
+	}
 
-		// STATUS: Error
-		+ .sui-notice {
-			margin-top: 10px;
+	// STATUS: File uploaded
+	.sui-upload--has-file {
+
+		.sui-upload__image--preview,
+		.sui-upload__file {
+			display: block;
 		}
 
-		// Multiple uploads
-		+ .sui-upload {
-			margin-top: 10px;
+		.sui-upload__button--upload {
+			display: none;
 		}
 	}
 }
\ No newline at end of file
diff --git a/page-uploads-file.html b/page-uploads-file.html
index e902e238..add42892 100644
--- a/page-uploads-file.html
+++ b/page-uploads-file.html
@@ -62,29 +62,30 @@ <h2 class="sui-box-title">Single File</h2>
 
 								<div class="sui-form-field">
 
-									<label class="sui-label">Upload file</label>
+									<label id="label-1" class="sui-label">Upload file</label>
 
-									<div class="sui-upload sui-file-upload sui-file-browser">
+									<div class="sui-upload sui-upload--file sui-upload--browser">
 
-										<input type="file" value="" readonly="readonly">
-
-										<button class="sui-upload-button">
-											<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+										<input type="file" value="" readonly="readonly" aria-labelledby="label-1" aria-describedby="description-1" aria-controls="filename-1"/>
+									
+										<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+											<span class="sui-upload__icon--upload 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>
+		
+										<div class="sui-upload__file">
+		
+											<span class="sui-upload__filename" id="filename-1" tabindex="0"></span>
+		
+											<button class="sui-upload__button sui-upload__button--remove"
+												aria-label="Remove file">
+												<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 											</button>
-
+		
 										</div>
-
+		
 									</div>
 
-									<span class="sui-description">This is a description for files upload element.</span>
+									<span id="description-1" class="sui-description">This is a description for files upload element.</span>
 
 								</div>
 
@@ -93,34 +94,30 @@ <h2 class="sui-box-title">Single File</h2>
 <pre class="sui-code-snippet html">
 &lt;div class=&quot;sui-form-field&quot;&gt;
 
-	&lt;label class=&quot;sui-label&quot;&gt;Field label&lt;/label&gt;
-
-	&lt;div class=&quot;sui-upload sui-file-upload sui-file-browser&quot;&gt;
+	&lt;label id=&quot;label-1&quot; class=&quot;sui-label&quot;&gt;Field label&lt;/label&gt;
 
-		&lt;input type=&quot;file&quot; value=&quot;&quot; readonly=&quot;readonly&quot; /&gt;
+	&lt;div class=&quot;sui-upload sui-upload--file sui-upload--browser&quot;&gt;
 
-		&lt;button class=&quot;sui-upload-button&quot;
-		&lt;span class=&quot;sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-			Upload file
+		&lt;input type=&quot;file&quot; value=&quot;&quot; readonly=&quot;readonly&quot; aria-labelledby=&quot;label-1&quot; aria-describedby=&quot;unique-description-id&quot; aria-controls=&quot;unique-file-id&quot;/&gt;
+	
+		&lt;button class=&quot;sui-upload__button sui-upload__button--upload&quot; tabindex=&quot;-1&quot;&gt;
+			&lt;span class=&quot;sui-upload__icon--upload sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Upload file
 		&lt;/button&gt;
 
-		&lt;div class=&quot;sui-upload-file&quot;&gt;
+		&lt;div class=&quot;sui-upload__file&quot;&gt;
 
-			&lt;span&gt;&lt;/span&gt;
+			&lt;span class=&quot;sui-upload__filename&quot; id=&quot;unique-file-id&quot; tabindex=&quot;0&quot;&gt;&lt;/span&gt;
 
-			&lt;button aria-label=&quot;Remove file&quot;&gt;
-				&lt;span class=&quot;sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+			&lt;button class=&quot;sui-upload__button sui-upload__button--remove&quot;
+				aria-label=&quot;Remove file&quot;&gt;
+				&lt;span class=&quot;sui-upload__icon--remove sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
 			&lt;/button&gt;
 
 		&lt;/div&gt;
 
 	&lt;/div&gt;
 
-	&lt;span class=&quot;sui-description&quot;&gt;Element description.&lt;/span&gt;
-
-	&lt;div class=&quot;sui-notice sui-notice-error&quot; style=&quot;margin-top: 5px; display: none;&quot;&gt;
-		&lt;p&gt;Element error message.&lt;/p&gt;
-	&lt;/div&gt;
+	&lt;span id=&quot;unique-description-id&quot; class=&quot;sui-description&quot;&gt;This is a description for files upload element.&lt;/span&gt;
 
 &lt;/div&gt;
 </pre>
@@ -134,29 +131,30 @@ <h2 class="sui-box-title">Single File</h2>
 
 								<div class="sui-form-field">
 
-									<label id="default-single-label" class="sui-label">Upload file</label>
-
-									<div class="sui-upload sui-has_file">
+									<label id="label-2" class="sui-label">Upload file</label>
 
-										<input type="file" value="example-file.pdf" readonly="readonly">
+									<div class="sui-upload sui-upload--file sui-upload--browser sui-upload--has-file">
 
-										<button class="sui-upload-button">
-											<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+										<input type="file" value="example-file.pdf" readonly="readonly" aria-labelledby="label-2" aria-describedby="description-2" aria-controls="filename-2"/>
+									
+										<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+											<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
 										</button>
-
-										<div class="sui-upload-file">
-
-											<span>example-file.pdf</span>
-
-											<button aria-label="Remove file">
-												<span class="sui-icon-close" aria-hidden="true"></span>
+		
+										<div class="sui-upload__file">
+		
+											<span class="sui-upload__filename" id="filename-2" tabindex="0">example-file.pdf</span>
+		
+											<button class="sui-upload__button sui-upload__button--remove"
+												aria-label="Remove file">
+												<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 											</button>
-
+		
 										</div>
-
+		
 									</div>
 
-									<span class="sui-description">This is a description for files upload element.</span>
+									<span id="description-2" class="sui-description">This is a description for files upload element.</span>
 
 								</div>
 
@@ -165,34 +163,30 @@ <h2 class="sui-box-title">Single File</h2>
 <pre class="sui-code-snippet html">
 &lt;div class=&quot;sui-form-field&quot;&gt;
 
-	&lt;label class=&quot;sui-label&quot;&gt;Field label&lt;/label&gt;
-
-	&lt;div class=&quot;sui-upload sui-has_file&quot;&gt;
+	&lt;label id=&quot;unique-label-id&quot; class=&quot;sui-label&quot;&gt;Upload file&lt;/label&gt;
 
-		&lt;input type=&quot;file&quot; value=&quot;file-name.txt&quot; readonly=&quot;readonly&quot; /&gt;
+	&lt;div class=&quot;sui-upload sui-upload--file sui-upload--browser sui-upload--has-file&quot;&gt;
 
-		&lt;button class=&quot;sui-upload-button&quot;
-			&lt;span class=&quot;sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-			Upload file
+		&lt;input type=&quot;file&quot; value=&quot;example-file.pdf&quot; readonly=&quot;readonly&quot; aria-labelledby=&quot;unique-label-id&quot; aria-describedby=&quot;unique-description-id&quot; aria-controls=&quot;unique-file-id&quot;/&gt;
+	
+		&lt;button class=&quot;sui-upload__button sui-upload__button--upload&quot; tabindex=&quot;-1&quot;&gt;
+			&lt;span class=&quot;sui-upload__icon--upload sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Upload file
 		&lt;/button&gt;
 
-		&lt;div class=&quot;sui-upload-file&quot;&gt;
+		&lt;div class=&quot;sui-upload__file&quot;&gt;
 
-			&lt;span&gt;file-name.txt&lt;/span&gt;
+			&lt;span class=&quot;sui-upload__filename&quot; id=&quot;unique-file-id&quot; tabindex=&quot;0&quot;&gt;example-file.pdf&lt;/span&gt;
 
-			&lt;button aria-label=&quot;Remove file&quot;&gt;
-				&lt;span class=&quot;sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+			&lt;button class=&quot;sui-upload__button sui-upload__button--remove&quot;
+				aria-label=&quot;Remove file&quot;&gt;
+				&lt;span class=&quot;sui-upload__icon--remove sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
 			&lt;/button&gt;
 
 		&lt;/div&gt;
 
 	&lt;/div&gt;
 
-	&lt;span class=&quot;sui-description&quot;&gt;Here goes field description.&lt;/span&gt;
-
-	&lt;div class=&quot;sui-notice sui-notice-error&quot; style=&quot;margin-top: 5px; display: none;&quot;&gt;
-		&lt;p&gt;Element error message.&lt;/p&gt;
-	&lt;/div&gt;
+	&lt;span id=&quot;unique-description-id&quot; class=&quot;sui-description&quot;&gt;This is a description for files upload element.&lt;/span&gt;
 
 &lt;/div&gt;
 </pre>
@@ -210,29 +204,30 @@ <h2 class="sui-box-title">Single File</h2>
 
 								<div class="sui-form-field">
 
-									<label id="default-single-label" class="sui-label">Upload file</label>
-
-									<div class="sui-upload sui-file-upload sui-file-browser">
+									<label id="label-3" class="sui-label">Upload file</label>
 
-										<input type="file" value="" readonly="readonly">
+									<div class="sui-upload sui-upload--file sui-upload--browser">
 
-										<button class="sui-upload-button">
-											<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+										<input type="file" value="" readonly="readonly" aria-labelledby="label-3" aria-describedby="description-3" aria-controls="filename-3"/>
+									
+										<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+											<span class="sui-upload__icon--upload 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>
+		
+										<div class="sui-upload__file">
+		
+											<span class="sui-upload__filename" id="filename-3" tabindex="0"></span>
+		
+											<button class="sui-upload__button sui-upload__button--remove"
+												aria-label="Remove file">
+												<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 											</button>
-
+		
 										</div>
-
+		
 									</div>
 
-									<span class="sui-description">This is a description for files upload element.</span>
+									<span id="description-3" class="sui-description">This is a description for files upload element.</span>
 
 									<div class="sui-notice sui-notice-error" style="margin-top: 5px;">
 										<p>Whoops, only .pdf and .doc filetypes are allowed.</p>
@@ -245,33 +240,33 @@ <h2 class="sui-box-title">Single File</h2>
 <pre class="sui-code-snippet html">
 &lt;div class=&quot;sui-form-field&quot;&gt;
 
-	&lt;label class=&quot;sui-label&quot;&gt;Field label&lt;/label&gt;
-
-	&lt;div class=&quot;sui-upload sui-has_file&quot;&gt;
+	&lt;label id=&quot;unique-label-id&quot; class=&quot;sui-label&quot;&gt;Upload file&lt;/label&gt;
 
-		&lt;input type=&quot;file&quot; value=&quot;file-name.txt&quot; readonly=&quot;readonly&quot; /&gt;
+	&lt;div class=&quot;sui-upload sui-upload--file sui-upload--browser&quot;&gt;
 
-		&lt;button class=&quot;sui-upload-button&quot;
-			&lt;span class=&quot;sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-			Upload file
+		&lt;input type=&quot;file&quot; value=&quot;&quot; readonly=&quot;readonly&quot; aria-labelledby=&quot;unique-label-id&quot; aria-describedby=&quot;unique-description-id&quot; aria-controls=&quot;unique-file-id&quot;/&gt;
+	
+		&lt;button class=&quot;sui-upload__button sui-upload__button--upload&quot; tabindex=&quot;-1&quot;&gt;
+			&lt;span class=&quot;sui-upload__icon--upload sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Upload file
 		&lt;/button&gt;
 
-		&lt;div class=&quot;sui-upload-file&quot;&gt;
+		&lt;div class=&quot;sui-upload__file&quot;&gt;
 
-			&lt;span&gt;file-name.txt&lt;/span&gt;
+			&lt;span class=&quot;sui-upload__filename&quot; id=&quot;unique-file-id&quot; tabindex=&quot;0&quot;&gt;&lt;/span&gt;
 
-			&lt;button aria-label=&quot;Remove file&quot;&gt;
-			&lt;span class=&quot;sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+			&lt;button class=&quot;sui-upload__button sui-upload__button--remove&quot;
+				aria-label=&quot;Remove file&quot;&gt;
+				&lt;span class=&quot;sui-upload__icon--remove sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
 			&lt;/button&gt;
 
 		&lt;/div&gt;
 
 	&lt;/div&gt;
 
-	&lt;span class=&quot;sui-description&quot;&gt;Here goes field description.&lt;/span&gt;
+	&lt;span id=&quot;unique-description-id&quot; class=&quot;sui-description&quot;&gt;This is a description for files upload element.&lt;/span&gt;
 
 	&lt;div class=&quot;sui-notice sui-notice-error&quot; style=&quot;margin-top: 5px;&quot;&gt;
-		&lt;p&gt;Element error message.&lt;/p&gt;
+		&lt;p&gt;Whoops, only .pdf and .doc filetypes are allowed.&lt;/p&gt;
 	&lt;/div&gt;
 
 &lt;/div&gt;
@@ -318,34 +313,35 @@ <h2 class="sui-box-title">Single File</h2>
 
 								<div class="sui-form-field">
 
-									<label class="sui-label">Upload image</label>
+									<label id="label-4" class="sui-label">Upload image</label>
 
-									<div class="sui-upload sui-file-upload sui-file-browser">
+									<div class="sui-upload sui-upload--file sui-upload--browser">
 
-										<input type="file" value="" 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('');"></div>
+										<div class="sui-upload__image" aria-hidden="true">
+											<div class="sui-upload__image--mask"></div>
+											<div role="button" class="sui-upload__image--preview" style="background-image: url('');"></div>
 										</div>
-
-										<button class="sui-upload-button">
-											<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+									
+										<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+											<span class="sui-button__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
 										</button>
-
-										<div class="sui-upload-file">
-
-											<span></span>
-
-											<button aria-label="Remove file">
+		
+										<input type="file" readonly="readonly" aria-labelledby="label-4" aria-describedby="description-4" aria-controls="filename-4">
+		
+										<div class="sui-upload__file">
+		
+											<span class="sui-upload__filename" id="filename-4" tabindex="0"></span>
+		
+											<button class="sui-upload__button sui-upload__button--remove"
+												aria-label="Remove file">
 												<span class="sui-icon-close" aria-hidden="true"></span>
 											</button>
-
+		
 										</div>
-
+		
 									</div>
 
-									<span class="sui-description">This is a description for image upload element.</span>
+									<span id="description-4" class="sui-description">This is a description for image upload element.</span>
 
 								</div>
 
@@ -356,34 +352,35 @@ <h2 class="sui-box-title">Single File</h2>
 
 								<div class="sui-form-field">
 
-									<label class="sui-label">Upload image</label>
+									<label id="label-5" class="sui-label">Upload image</label>
 
-									<div class="sui-upload sui-has_file">
+									<div class="sui-upload sui-upload--file sui-upload--browser sui-upload--has-file">
 
-										<input type="file" value="example-image.jpg" 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('assets/images/plugins-smartcrawl.jpg');"></div>
+										<div class="sui-upload__image" aria-hidden="true">
+											<div class="sui-upload__image--mask"></div>
+											<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
 										</div>
-
-										<button class="sui-upload-button">
-											<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+									
+										<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+											<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
 										</button>
-
-										<div class="sui-upload-file">
-
-											<span>example-image.jpg</span>
-
-											<button aria-label="Remove file">
-												<span class="sui-icon-close" aria-hidden="true"></span>
+		
+										<input type="file" value="example-image.jpg" readonly="readonly" aria-labelledby="label-5" aria-describedby="description-5" aria-controls="filename-5">
+		
+										<div class="sui-upload__file">
+		
+											<span class="sui-upload__filename" id="filename-5" tabindex="0">example-image.jpg</span>
+		
+											<button class="sui-upload__button sui-upload__button--remove"
+												aria-label="Remove file">
+												<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 											</button>
-
+		
 										</div>
-
+		
 									</div>
 
-									<span class="sui-description">This is a description for image upload element.</span>
+									<span id="description-5" class="sui-description">This is a description for image upload element.</span>
 
 								</div>
 
@@ -394,34 +391,35 @@ <h2 class="sui-box-title">Single File</h2>
 
 								<div class="sui-form-field">
 
-									<label class="sui-label">Upload image</label>
-
-									<div class="sui-upload sui-file-upload sui-file-browser">
+									<label id="label-6" class="sui-label">Upload image</label>
 
-										<input type="file" value="" readonly="readonly">
+									<div class="sui-upload sui-upload--file sui-upload--browser">
 
-										<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('');"></div>
+										<input type="file" value="" readonly="readonly" aria-labelledby="label-6" aria-describedby="description-6" aria-controls="filename-6" />
+		
+										<div class="sui-upload__image" aria-hidden="true">
+											<div class="sui-upload__image--mask"></div>
+											<div role="button" class="sui-upload__image--preview" style="background-image: url('');"></div>
 										</div>
-
-										<button class="sui-upload-button">
-											<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+									
+										<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+											<span class="sui-upload__icon--upload 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>
+		
+										<div class="sui-upload__file">
+		
+											<span class="sui-upload__filename" id="filename-6" tabindex="0"></span>
+		
+											<button class="sui-upload__button sui-upload__button--remove"
+												aria-label="Remove file">
+												<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 											</button>
-
+		
 										</div>
-
+		
 									</div>
 
-									<span class="sui-description">This is a description for image upload element.</span>
+									<span id="description-6" class="sui-description">This is a description for image upload element.</span>
 
 									<div class="sui-notice sui-notice-error" style="margin-top: 5px;">
 										<p>Whoops, only .png and .jpg filetypes are allowed.</p>
@@ -438,32 +436,27 @@ <h2 class="sui-box-title">Single File</h2>
 					<div class="demo-code-block">
 
 <pre class="sui-code-snippet html">
-&lt;div class=&quot;sui-upload sui-file-upload sui-file-browser&quot;&gt;
+&lt;div class=&quot;sui-upload sui-upload--file sui-upload--browser&quot;&gt;
 
-	&lt;input type=&quot;file&quot; ... /&gt;
+	&lt;input type=&quot;file&quot; value=&quot;&quot; readonly=&quot;readonly&quot; /&gt;
 
 	&lt;!--
 	NOTE: Insert the element after input but before upload button.
 	--&gt;
-	&lt;div class=&quot;sui-upload-image&quot; aria-hidden=&quot;true&quot;&gt;
-
-		&lt;div class=&quot;sui-image-mask&quot;&gt;&lt;/div&gt;
-
-			&lt;!--
-			NOTE: Use the uploaded image URL as background image of the div below.
-			Leave empty when no file has been uploaded yet.
-			--&gt;
-			&lt;div
-				role=&quot;button&quot;
-				class=&quot;sui-image-preview&quot;
-				style=&quot;background-image: url();&quot;
-			&gt;&lt;/div&gt;
-
-		&lt;/div&gt;
+	&lt;div class=&quot;sui-upload__image&quot; aria-hidden=&quot;true&quot;&gt;
+		
+		&lt;!--
+		NOTE: Use the uploaded image URL as background image of the div below.
+		Leave empty when no file has been uploaded yet.
+		--&gt;
+		&lt;div class=&quot;sui-upload__image--mask&quot;&gt;&lt;/div&gt;
+		&lt;div role=&quot;button&quot; class=&quot;sui-upload__image--preview&quot; style=&quot;background-image: url('');&quot;&gt;&lt;/div&gt;
+	
+	&lt;/div&gt;
 
-		&lt;button class=&quot;sui-upload-button&quot;&gt; ... &lt;/button&gt;
+	&lt;button class=&quot;sui-upload__button sui-upload__button--upload&quot; tabindex=&quot;-1&quot;&gt; ... &lt;/button&gt;
 
-	&lt;div class=&quot;sui-upload-file&quot;&gt; ... &lt;/div&gt;
+	&lt;div class=&quot;sui-upload__file&quot;&gt; ... &lt;/div&gt;
 
 &lt;/div&gt;
 </pre>
@@ -505,29 +498,30 @@ <h2 class="sui-box-title">Multiple Files</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Upload file(s)</label>
+							<label id="label-7" class="sui-label">Upload file(s)</label>
 
-							<div class="sui-upload sui-file-upload sui-file-browser">
+							<div class="sui-upload sui-upload--file sui-upload--browser">
 
-								<input type="file" value="" readonly="readonly">
+								<input type="file" value="" readonly="readonly" aria-labelledby="label-7" aria-describedby="description-7" aria-controls="filename-7" />
 
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
 								</button>
 
-								<div class="sui-upload-file">
+								<div class="sui-upload__file">
 
-									<span></span>
+									<span class="sui-upload__filename" id="filename-7" tabindex="0"></span>
 
-									<button aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+									<button class="sui-upload__button sui-upload__button--remove"
+										aria-label="Remove file">
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
 
 							</div>
 
-							<span class="sui-description">This is a description for multiple files upload element.</span>
+							<span id="description-7" class="sui-description">This is a description for multiple files upload element.</span>
 
 						</div>
 
@@ -542,41 +536,43 @@ <h2 class="sui-box-title">Multiple Files</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Upload file(s)</label>
+							<label id="label-8" class="sui-label">Upload file(s)</label>
 
-							<div class="sui-upload sui-has_file">
+							<div class="sui-upload sui-upload--file sui-upload--browser sui-upload--has-file">
 
-								<input type="file" value="example-file.pdf" readonly="readonly">
+								<input type="file" value="example-image.pdf" readonly="readonly" aria-labelledby="label-8" aria-describedby="description-8" aria-controls="filename-8">
 
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
 								</button>
 
-								<div class="sui-upload-file">
+								<div class="sui-upload__file">
 
-									<span>example-file.pdf</span>
+									<span class="sui-upload__filename" id="filename-8" tabindex="0">example-image.pdf</span>
 
-									<button aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+									<button class="sui-upload__button sui-upload__button--remove"
+										aria-label="Remove file">
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
 
 							</div>
 
-							<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
+							<div class="sui-upload sui-upload--file sui-upload--browser">
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-button__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload file
 								</button>
 
-								<div class="sui-upload-file">
+								<input type="file" readonly="readonly" aria-labelledby="label-8" aria-describedby="description-8" aria-controls="filename-9">
+
+								<div class="sui-upload__file">
 
-									<span></span>
+									<span class="sui-upload__filename" id="filename-9" tabindex="0"></span>
 
-									<button aria-label="Remove file">
+									<button class="sui-upload__button sui-upload__button--remove"
+										aria-label="Remove file">
 										<span class="sui-icon-close" aria-hidden="true"></span>
 									</button>
 
@@ -584,7 +580,7 @@ <h2 class="sui-box-title">Multiple Files</h2>
 
 							</div>
 
-							<span class="sui-description">This is a description for multiple files upload element.</span>
+							<span id="description-8" class="sui-description">This is a description for multiple files upload element.</span>
 
 						</div>
 
@@ -632,38 +628,38 @@ <h2 class="sui-box-title">Documentation</h2>
 					<div class="demo-code-block">
 
 <pre class="sui-code-snippet html">
-	&lt;div class=&quot;sui-form-field&quot;&gt;
-
-		&lt;label class=&quot;sui-label&quot;&gt;Field label&lt;/label&gt;
-
-		&lt;div class=&quot;sui-upload sui-file-upload sui-file-browser&quot;&gt;
+&lt;div class=&quot;sui-form-field&quot;&gt;
 
-			&lt;input type=&quot;file&quot; value=&quot;&quot; readonly=&quot;readonly&quot; /&gt;
+	&lt;label id=&quot;unique-label-id&quot; class=&quot;sui-label&quot;&gt;Field name&lt;/label&gt;
 
-			&lt;button class=&quot;sui-upload-button&quot;
-			&lt;span class=&quot;sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-				Upload file
-			&lt;/button&gt;
+	&lt;div class=&quot;sui-upload sui-upload--file sui-upload--browser&quot;&gt;
+	
+		&lt;button class=&quot;sui-upload__button sui-upload__button--upload&quot; tabindex=&quot;-1&quot;&gt;
+			&lt;span class=&quot;sui-button__icon--upload sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Upload file
+		&lt;/button&gt;
 
-			&lt;div class=&quot;sui-upload-file&quot;&gt;
+		&lt;input type=&quot;file&quot; readonly=&quot;readonly&quot; aria-labelledby=&quot;unique-label-id&quot; aria-describedby=&quot;unique-description-id&quot; aria-controls=&quot;unique-file-id&quot;&gt;
 
-				&lt;span&gt;&lt;/span&gt;
+		&lt;div class=&quot;sui-upload__file&quot;&gt;
 
-				&lt;button aria-label=&quot;Remove file&quot;&gt;
-					&lt;span class=&quot;sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-				&lt;/button&gt;
+			&lt;span class=&quot;sui-upload__filename&quot; id=&quot;unique-file-id&quot; tabindex=&quot;0&quot;&gt;&lt;/span&gt;
 
-			&lt;/div&gt;
+			&lt;button class=&quot;sui-upload__button sui-upload__button--remove&quot;
+				aria-label=&quot;Remove file&quot;&gt;
+				&lt;span class=&quot;sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+			&lt;/button&gt;
 
 		&lt;/div&gt;
 
-		&lt;span class=&quot;sui-description&quot;&gt;Element description.&lt;/span&gt;
+	&lt;/div&gt;
 
-		&lt;div class=&quot;sui-notice sui-notice-error&quot; style=&quot;margin-top: 5px; display: none;&quot;&gt;
-			&lt;p&gt;Element error message.&lt;/p&gt;
-		&lt;/div&gt;
+	&lt;span id=&quot;unique-description-id&quot; class=&quot;sui-description&quot;&gt;Element description.&lt;/span&gt;
 
+	&lt;div class=&quot;sui-notice sui-notice-error&quot; style=&quot;margin-top: 5px; display: none;&quot;&gt;
+		&lt;p&gt;Element error message.&lt;/p&gt;
 	&lt;/div&gt;
+
+&lt;/div&gt;
 </pre>
 
 					</div>
@@ -685,11 +681,11 @@ <h3 class="sui-label">Sample JS</h3>
 					<div class="demo-code-block">
 
 <pre class="sui-code-snippet js">
-// This will trigger on file change.
-$( '.sui-file-browser input[type="file"]' ).on( 'change', function() {
-	var parent = $( this ).parent();
+// This will trigger on file change. 
+$( '.sui-upload--browser input[type="file"]' ).on( 'change', function() {
+	var parent = $( this ).closest( '.sui-upload' );
 	var filename = $( this ).val();
-	var imageContainer = parent.find( '.sui-upload-image' );
+	var imageContainer = parent.find( '.sui-upload__image' );
 	if(filename) {
 		var lastIndex = filename.lastIndexOf( "\\" );
 		if ( lastIndex >= 0 ) {
@@ -697,37 +693,37 @@ <h3 class="sui-label">Sample JS</h3>
 			// To show uploaded file preview.
 			if( imageContainer.length ){
 				var reader = new FileReader();
-				var imagePreview = imageContainer.find( '.sui-image-preview' );
+				var imagePreview = imageContainer.find( '.sui-upload__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' );
+			parent.find( '.sui-upload__file > span' ).text(filename);
+			parent.addClass( 'sui-upload--has-file' );
 		}
 	} else {
 		if( imageContainer.length ){
-			var imagePreview = imageContainer.find( '.sui-image-preview' );
+			var imagePreview = imageContainer.find( '.sui-upload__image--preview' );
 			imagePreview.attr( 'style', 'background-image: url();' );
 		}
-		parent.find( '.sui-upload-file > span' ).text( '' );
-		parent.removeClass( 'sui-has_file' );
+		parent.find( '.sui-upload__file > span' ).text( '' );
+		parent.removeClass( 'sui-upload--has-file' );
 	}
 });
 
 // This will trigger on click of upload button
-$( '.sui-file-browser .sui-upload-button' ).on( 'click', function(){
+$( '.sui-upload--browser .sui-upload__button--upload' ).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(){
+$( '.sui-upload--file [aria-label="Remove file"]' ).on( 'click', function(){
 	removeFile($( this ));
 });
 
 // This will trigger reupload of file
-$( '.sui-file-browser .sui-upload-image' ).on( 'click', function(){
+$( '.sui-upload--browser .sui-upload__image' ).on( 'click', function(){
 	selectFile($( this ));
 });
 
diff --git a/page-uploads-image.html b/page-uploads-image.html
index a2fafbf2..0217d131 100644
--- a/page-uploads-image.html
+++ b/page-uploads-image.html
@@ -92,30 +92,26 @@ <h2 class="sui-box-title">Single Image</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Featured image</label>
+							<label id="label-1" class="sui-label">Featured image</label>
 
-							<div class="sui-upload sui-file-upload sui-file-browser">
+							<div class="sui-upload sui-upload--file sui-upload--browser">
 
-								<input
-									type="file"
-									value=""
-									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('');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('');"></div>
 								</div>
-
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-button__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
-								<div class="sui-upload-file">
+								<input type="file" readonly="readonly" id="fileupload" aria-labelledby="label-1" aria-controls="filename-1">
 
-									<span></span>
+								<div class="sui-upload__file">
 
-									<button class="sui-upload-button--remove"
+									<span class="sui-upload__filename" id="filename-1" tabindex="0"></span>
+
+									<button class="sui-upload__button sui-upload__button--remove"
 										aria-label="Remove file">
 										<span class="sui-icon-close" aria-hidden="true"></span>
 									</button>
@@ -139,25 +135,32 @@ <h2 class="sui-box-title">Single Image</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Featured image</label>
-
-							<div class="sui-upload sui-file-upload sui-file-browser">
+							<label id="label-2" class="sui-label">Featured image</label>
 
-								<input
-									type="file"
-									value=""
-									readonly="readonly"
-								/>
+							<div class="sui-upload sui-upload--file sui-upload--browser">
 
-								<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('');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('');"></div>
 								</div>
-
-								<button class="sui-upload-button">
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
 									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
+								<input type="file" readonly="readonly" id="fileupload" aria-labelledby="label-2" aria-controls="filename-2">
+
+								<div class="sui-upload__file">
+
+									<span class="sui-upload__filename" id="filename-2" tabindex="0"></span>
+
+									<button class="sui-upload__button sui-upload__button--remove"
+										aria-label="Remove file">
+										<span class="sui-icon-close" aria-hidden="true"></span>
+									</button>
+
+								</div>
+
 							</div>
 
 							<div class="sui-notice sui-notice-error">
@@ -179,32 +182,28 @@ <h2 class="sui-box-title">Single Image</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Featured image</label>
+							<label id="label-3" class="sui-label">Featured image</label>
 
-							<div class="sui-upload sui-has_file">
+							<div class="sui-upload sui-upload--file sui-upload--browser sui-upload--has-file">
 
-								<input
-									type="file"
-									value="filename.jpg"
-									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('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
 								</div>
-
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
-								<div class="sui-upload-file">
+								<input type="file" value="filename.jpg" readonly="readonly" id="fileupload-3" aria-labelledby="label-3" aria-controls="filename-3">
 
-									<span>filename.jpg</span>
+								<div class="sui-upload__file">
 
-									<button class="sui-upload-button--remove"
+									<span class="sui-upload__filename" id="filename-3" tabindex="0">filename.jpg</span>
+
+									<button class="sui-upload__button sui-upload__button--remove"
 										aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
@@ -289,32 +288,28 @@ <h2 class="sui-box-title">Multiple Images</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Featured image</label>
+							<label id="label-4" class="sui-label">Featured image</label>
 
-							<div class="sui-upload sui-file-upload sui-file-browser">
+							<div class="sui-upload sui-upload--file sui-upload--browser">
 
-								<input
-									type="file"
-									value=""
-									readonly="readonly"
-								/>
+								<input type="file" value="" readonly="readonly" id="fileupload-4" aria-labelledby="label-4" aria-controls="filename-4"/>
 
-								<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('');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
 								</div>
-
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
-								<div class="sui-upload-file">
+								<div class="sui-upload__file">
 
-									<span></span>
+									<span class="sui-upload__filename" id="filename-4" tabindex="0"></span>
 
-									<button class="sui-upload-button--remove"
+									<button class="sui-upload__button sui-upload__button--remove"
 										aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
@@ -336,61 +331,54 @@ <h2 class="sui-box-title">Multiple Images</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Featured image</label>
-
-							<div class="sui-upload sui-has_file">
+							<label id="label-5" class="sui-label">Featured image</label>
 
-								<input
-									type="file"
-									value="filename.jpg"
-									readonly="readonly"
-								/>
+							<div class="sui-upload sui-upload--file sui-upload--browser sui-upload--has-file">
 
-								<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('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
 								</div>
-
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
-								<div class="sui-upload-file">
+								<input type="file" value="filename.jpg" readonly="readonly" id="fileupload-5" aria-labelledby="label-5" aria-controls="filename-5">
+
+								<div class="sui-upload__file">
 
-									<span>filename.jpg</span>
+									<span class="sui-upload__filename" id="filename-5" tabindex="0">filename.jpg</span>
 
-									<button class="sui-upload-button--remove"
+									<button class="sui-upload__button sui-upload__button--remove"
 										aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
 
 							</div>
 
-							<div class="sui-upload sui-file-upload sui-file-browser">
-								<input
-									type="file"
-									value=""
-									readonly="readonly"
-								/>
+							<div class="sui-upload sui-upload--file sui-upload--browser">
 
-								<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('');"></div>
-								</div>
+								<input type="file" value="" readonly="readonly" id="fileupload-6" aria-labelledby="label-5" aria-controls="filename-6"/>
 
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
+								</div>
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
-								<div class="sui-upload-file">
+								<div class="sui-upload__file">
 
-									<span></span>
+									<span class="sui-upload__filename" id="filename-6" tabindex="0"></span>
 
-									<button class="sui-upload-button--remove"
+									<button class="sui-upload__button sui-upload__button--remove"
 										aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
@@ -412,55 +400,58 @@ <h2 class="sui-box-title">Multiple Images</h2>
 
 						<div class="sui-form-field">
 
-							<label class="sui-label">Featured image</label>
-
-							<div class="sui-upload sui-has_file">
+							<label id="label-6" class="sui-label">Featured image</label>
 
-								<input
-									type="file"
-									value="filename.jpg"
-									readonly="readonly"
-								/>
+							<div class="sui-upload sui-upload--file sui-upload--browser sui-upload--has-file">
 
-								<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('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
 								</div>
-
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
-								<div class="sui-upload-file">
+								<input type="file" value="filename.jpg" readonly="readonly" id="fileupload" aria-labelledby="label-6" aria-controls="filename">
+
+								<div class="sui-upload__file">
 
-									<span>filename.jpg</span>
+									<span class="sui-upload__filename" id="filename-5" tabindex="0">filename.jpg</span>
 
-									<button class="sui-upload-button--remove"
+									<button class="sui-upload__button sui-upload__button--remove"
 										aria-label="Remove file">
-										<span class="sui-icon-close" aria-hidden="true"></span>
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
 									</button>
 
 								</div>
 
 							</div>
 
-							<div class="sui-upload sui-file-upload sui-file-browser">
+							<div class="sui-upload sui-upload--file sui-upload--browser">
 
-								<input
-									type="file"
-									value=""
-									readonly="readonly"
-								/>
+								<input type="file" value="" readonly="readonly" id="fileupload-7" aria-labelledby="label-6" aria-controls="filename-7"/>
 
-								<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('');"></div>
+								<div class="sui-upload__image" aria-hidden="true">
+									<div class="sui-upload__image--mask"></div>
+									<div role="button" class="sui-upload__image--preview" style="background-image: url('{{ site.baseurl }}/assets/images/plugins-smartcrawl.jpg');"></div>
 								</div>
-
-								<button class="sui-upload-button">
-									<span class="sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
+							
+								<button class="sui-upload__button sui-upload__button--upload" tabindex="-1">
+									<span class="sui-upload__icon--upload sui-icon-upload-cloud" aria-hidden="true"></span> Upload image
 								</button>
 
+								<div class="sui-upload__file">
+
+									<span class="sui-upload__filename" id="filename-7" tabindex="0"></span>
+
+									<button class="sui-upload__button sui-upload__button--remove"
+										aria-label="Remove file">
+										<span class="sui-upload__icon--remove sui-icon-close" aria-hidden="true"></span>
+									</button>
+
+								</div>
+
 							</div>
 
 							<div class="sui-notice sui-notice-error">
@@ -511,33 +502,34 @@ <h2 class="sui-box-title">Documentation</h2>
 <pre class="sui-code-snippet html">
 &lt;div class=&quot;sui-form-field&quot;&gt;
 
-	&lt;label class=&quot;sui-label&quot;&gt;Label&lt;/label&gt;
+	&lt;label id=&quot;unique-label-id&quot; class=&quot;sui-label&quot;&gt;Featured image&lt;/label&gt;
 
-	&lt;div class=&quot;sui-upload sui-file-upload sui-file-browser&quot;&gt;
+	&lt;div class=&quot;sui-upload sui-upload--file sui-upload--browser&quot;&gt;
 
-		&lt;input
-			type=&quot;file&quot;
-			value=&quot;filename.png&quot;
-			readonly=&quot;readonly&quot;
+		&lt;input 
+			type=&quot;file&quot; 
+			value=&quot;filename.png&quot; 
+			readonly=&quot;readonly&quot; 
+			aria-labelledby=&quot;unique-label-id&quot; 
+			aria-describedby=&quot;unique-description-id&quot;
+			aria-controls=&quot;unique-file-id&quot;
 		/&gt;
 
-		&lt;div class=&quot;sui-upload-image&quot; aria-hidden=&quot;true&quot;&gt;
-			&lt;div class=&quot;sui-image-mask&quot;&gt;&lt;/div&gt;
-			&lt;div role=&quot;button&quot;
-				class=&quot;sui-image-preview&quot;
-				style=&quot;background-image: url('path-to-image/filename.png');&quot;&gt;
-			&lt;/div&gt;
+		&lt;div class=&quot;sui-upload__image&quot; aria-hidden=&quot;true&quot;&gt;
+			&lt;div class=&quot;sui-upload__image--mask&quot;&gt;&lt;/div&gt;
+			&lt;div role=&quot;button&quot; class=&quot;sui-upload__image--preview&quot; style=&quot;background-image: url('path-to-image/filename.png');&quot;&gt;&lt;/div&gt;
 		&lt;/div&gt;
-
-		&lt;button class=&quot;sui-upload-button&quot;&gt;
-			&lt;span class=&quot;sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Upload file
+	
+		&lt;button class=&quot;sui-upload__button sui-upload__button--upload&quot; tabindex=&quot;-1&quot;&gt;
+			&lt;span class=&quot;sui-button__icon--upload sui-icon-upload-cloud&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt; Upload image
 		&lt;/button&gt;
 
-		&lt;div class=&quot;sui-upload-file&quot;&gt;
+		&lt;div class=&quot;sui-upload__file&quot;&gt;
 
-			&lt;span&gt;filename.png&lt;/span&gt;
+			&lt;span class=&quot;sui-upload__filename&quot; id=&quot;filename-1&quot; tabindex=&quot;0&quot;&gt;filename.png&lt;/span&gt;
 
-			&lt;button aria-label=&quot;Remove file&quot;&gt;
+			&lt;button class=&quot;sui-upload__button sui-upload__button--remove&quot;
+				aria-label=&quot;Remove file&quot;&gt;
 				&lt;span class=&quot;sui-icon-close&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
 			&lt;/button&gt;
 
@@ -572,11 +564,11 @@ <h3 class="sui-label">Sample JS</h3>
 					<div class="demo-code-block">
 
 <pre class="sui-code-snippet js">
-// This will trigger on file change.
-$( '.sui-file-browser input[type="file"]' ).on( 'change', function() {
-	var parent = $( this ).parent();
+// This will trigger on file change. 
+$( '.sui-upload--browser input[type="file"]' ).on( 'change', function() {
+	var parent = $( this ).closest( '.sui-upload' );
 	var filename = $( this ).val();
-	var imageContainer = parent.find( '.sui-upload-image' );
+	var imageContainer = parent.find( '.sui-upload__image' );
 	if(filename) {
 		var lastIndex = filename.lastIndexOf( "\\" );
 		if ( lastIndex >= 0 ) {
@@ -584,37 +576,37 @@ <h3 class="sui-label">Sample JS</h3>
 			// To show uploaded file preview.
 			if( imageContainer.length ){
 				var reader = new FileReader();
-				var imagePreview = imageContainer.find( '.sui-image-preview' );
+				var imagePreview = imageContainer.find( '.sui-upload__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' );
+			parent.find( '.sui-upload__file > span' ).text(filename);
+			parent.addClass( 'sui-upload--has-file' );
 		}
 	} else {
 		if( imageContainer.length ){
-			var imagePreview = imageContainer.find( '.sui-image-preview' );
+			var imagePreview = imageContainer.find( '.sui-upload__image--preview' );
 			imagePreview.attr( 'style', 'background-image: url();' );
 		}
-		parent.find( '.sui-upload-file > span' ).text( '' );
-		parent.removeClass( 'sui-has_file' );
+		parent.find( '.sui-upload__file > span' ).text( '' );
+		parent.removeClass( 'sui-upload--has-file' );
 	}
 });
 
 // This will trigger on click of upload button
-$( '.sui-file-browser .sui-upload-button' ).on( 'click', function(){
+$( '.sui-upload--browser .sui-upload__button--upload' ).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(){
+$( '.sui-upload--file [aria-label="Remove file"]' ).on( 'click', function(){
 	removeFile($( this ));
 });
 
 // This will trigger reupload of file
-$( '.sui-file-browser .sui-upload-image' ).on( 'click', function(){
+$( '.sui-upload--browser .sui-upload__image' ).on( 'click', function(){
 	selectFile($( this ));
 });