Show media file sizes in Media Library grid view

src/js/media/views/attachment.js

@@ -18,10 +18,22 @@ Attachment = View.extend(/** @lends wp.media.view.Attachment.prototype */{
 	template:  wp.template('attachment'),
 
 	attributes: function() {
+		var title = this.model.get( 'title' ) || wp.i18n.__( 'uploading…' ),
+			filesize = this.model.get( 'filesizeHumanReadable' );
+
+		if ( filesize ) {
+			title = wp.i18n.sprintf(
+				/* translators: 1: Attachment title, 2: File size. */
+				wp.i18n.__( '%1$s, %2$s' ),
+				title,
+				filesize
+			);
+		}
+
 		return {
 			'tabIndex':     0,
 			'role':         'checkbox',
-			'aria-label':   this.model.get( 'title' ) || wp.i18n.__( 'uploading…' ),
+			'aria-label':   title,
 			'aria-checked': false,
 			'data-id':      this.model.get( 'id' )
 		};

src/wp-includes/css/media-views.css

@@ -1141,6 +1141,13 @@ select#media-attachment-date-filters {
 	padding: 5px 10px;
 }
 
+.wp-core-ui .attachment .attachment-file-size {
+	display: block;
+	margin-top: 2px;
+	font-size: 11px;
+	font-weight: 400;
+}
+
 .wp-core-ui .attachment .thumbnail img {
 	position: absolute;
 }

src/wp-includes/media-template.php

@@ -622,7 +622,12 @@ function wp_print_media_templates() {
 						<# } #>
 					</div>
 					<div class="filename">
-						<div>{{ data.filename }}</div>
+						<div>
+							{{ data.filename }}
+							<# if ( data.filesizeHumanReadable ) { #>
+								<span class="attachment-file-size">{{ data.filesizeHumanReadable }}</span>
+							<# } #>
+						</div>
 					</div>
 				<# } #>
 			</div>