# Getting uploaded Image information
**URL:** https://forums.knack.com/t/getting-uploaded-image-information/6599
**Category:** API & Custom Code
**Created:** [November 15, 2019, 8:08pm UTC](https://forums.knack.com/t/getting-uploaded-image-information/6599 "2019-11-15T20:08:24Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@LeanneWesd78459](https://forums.knack.com/u/LeanneWesd78459)
#### Post date: [November 15, 2019, 8:08pm UTC](https://forums.knack.com/t/getting-uploaded-image-information/6599/1 "2019-11-15T20:08:24Z")
Is there a way to display (either in a field/table or otherwise), the width, height and file size of an image that has been uploaded to my app via a form field?
I have an app that lets users sign in and upload images. Once they upload an image, the name, thumbnail, etc show up in a table. Users can only see their own uploaded images. I would like to display the file size and image width x height of each image they have uploaded.
---
### Author:  [@SergiEgea35645](https://forums.knack.com/u/SergiEgea35645)
#### Post date: [November 22, 2019, 4:43pm UTC](https://forums.knack.com/t/getting-uploaded-image-information/6599/2 "2019-11-22T16:43:16Z")
Great Leanne! Thank you for sharing.
I hope your script never has to use the value of TB :-))
---
### Author:  [@LeanneWesd78459](https://forums.knack.com/u/LeanneWesd78459)
#### Post date: [November 22, 2019, 4:30pm UTC](https://forums.knack.com/t/getting-uploaded-image-information/6599/3 "2019-11-22T16:30:38Z")
Thank you Sergi!
Leaving this here for anyone interested. I was able to make this work, and with a few google searches I have added a little improvement as well. Depending on file size, this will now output the file size in either bytes, KB, MB, or GB, with the correct measurement suffix added to the text field.
$(document).on('knack-view-render.view\_XXX', function(event, view, data) {
$('#field\_100\_upload').change(function() {
var fr = new FileReader;
var bytes = this.files[0].size;
var my\_size = function () {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return 'n/a';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
if (i == 0) return bytes + ' ' + sizes[i];
return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
};
fr.onload = function() {
var img = new Image;
img.onload = function() {
var my\_width = img.width;
var my\_height = img.height;
$("#field\_101").val(my\_width +'x'+ my\_height);
$("#field\_102").val(my\_size);
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
});
---
### Author:  [@SergiEgea35645](https://forums.knack.com/u/SergiEgea35645)
#### Post date: [November 15, 2019, 9:34pm UTC](https://forums.knack.com/t/getting-uploaded-image-information/6599/4 "2019-11-15T21:34:26Z")
Hi Leanne! Yes it's possible.
In your image upload form you will have to add two more fields, one for the dimensions of the image and another for the size of the file.
Example:
Field\_100 \> Upload image field
Field\_101 \> Text field for dimensions
Field\_102 \> Text field for file size
And you have to add this javascript code: (please change 'XXX' with the key of your upload form):
$(document).on('knack-view-render.view\_XXX, function(event, view, data) {
$('#field\_100\_upload').change(function() {
var fr = new FileReader;
var my\_size = this.files[0].size;
fr.onload = function() {
var img = new Image;
img.onload = function() {
var my\_width = img.width;
var my\_height = img.height;
$("#field\_101").val(my\_width +'x'+ my\_height);
$("#field\_102").val(my\_size);
};
img.src = fr.result;
};
fr.readAsDataURL(this.files[0]);
});
When you upload the image, the fields of the size and dimensions will be autopopulate and you can save them in your database, after submit the form.
I hope it helps you.