Display image file size in media uploader when uploaded

[noumaan]

When inserting an image using the media uploader, WordPress shows file dimensions right below the file name. It would be great to see image file size displayed as well.

Many users are concerned about optimizing their images for faster page loads. This feature will be immensely helpful to users. They will be able to quickly see the file size next to dimensions. If they feel that the image file size is too big, they can then choose to display a medium or thumbnail size image in thier post or use an image optimization tool.

[danielbachhuber]

Seems like a good enhancement. Thanks for opening a ticket with a mockup! #25170 is related prior art.

[QasAshraf]

Hi, I'm a newcomer looking to contribute. I've been having a look at what changes would need to be made to implement this new feature.

Looks like there's already a fileLength attribute defined in the view template which is only rendered if the JSON response contains this attribute. Not sure if it's used for anything else, but could possibly be used for the file size attribute?

*[@id="tmpl-attachment-details"]

I can't see how to add an extra instance variable to the Attachment model, but I think you'd have to add an extra instance variable which returned the file size for each image. If it's not already implicitly known, I'm guessing if we already have the filename then we could use the filesize($filename) function to get the size of the file.

[DrewAPicture]

Replying to QasAshraf:

Hi, I'm a newcomer looking to contribute. I've been having a look at what changes would need to be made to implement this new feature.

Great, glad to have you :)

I can't see how to add an extra instance variable to the Attachment model, but I think you'd have to add an extra instance variable which returned the file size for each image. If it's not already implicitly known, I'm guessing if we already have the filename then we could use the filesize($filename) function to get the size of the file.

You might take a look at how the filesize is derived for use in the attachment meta box on the attachment editing screen -- the source for attachment_submitbox_metadata() is a good starting place. You'll notice the 'filesize' key isn't always set as part of the array returned by wp_get_attachment_metadata(), so that's a case that'll need to be accounted for.

Also, take a look at wp_prepare_attachment_for_js(), which is where the filesize value would be passed to the media template, I'd think as part of the $meta array.

[helen]

I'm not sure there's really much benefit to this - you only see the file size of the original upload, not the item you're actually inserting, so as far as enabling optimization of page load times goes, this isn't much help. It's also tipping the details into visually heavy, at least for me.

[flippercode]

Might be a good idea to display it below Size select box as per screenshot above.

[kaok]

I suppose, it would be better to show sizes in dropdown in brackets. Look at screenshot, please.

[Tmeister]

Hi guys,

Well this is my first intent to contribution to the core and this ticket is great to start on.

I've added some lines ( ​here is the temporal commit ) to add this featured according to the last screenshot but i have one question before to upload the patch.

​In this line, the function wp_prepare_attachment_for_js use the filter image_downsize, should i consider this to add the filesize too? i think i should.

What do you think?

Thanks!!

[Tmeister]

Added the filesize info in the dropdown menu.

[ocean90]

I'm not sure, but filesize() could make things slowly. The modal loads 40 images at once. Together with other image sizes (3 for core and 2 for themes maybe) this can be 5*40=200 image - means 200 filesize() calls..for which benefit?

[noumaan]

I agree with ocean90.

While dropdown menu serves the purpose. I think it would be nicer to have the file's size displayed outside the dropdown menu.

Technically filesize is part of the file information, it should be displayed with rest of the file information on top under the attachment details. This makes much sense and I think this would be the first place a user will look for such information.

Flippercode's suggestion can make it possible to issue an ajax call to display filesize of the selected image in the dropdown menu? This way filesize calls can be significantly reduced, though I don't think it would be such a performance issue, but may be I am wrong.

[noumaan]

Resolved in WordPress 4.0

[SergeyBiryukov]

Added in [28682].