Getting uploaded Image information

API & Customization
1

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.

2

Great Leanne! Thank you for sharing.

I hope your script never has to use the value of TB :-))

3

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

1 Like
4

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.