I have a collection of images sitting in a cloud bucket (AWS S3) and must write a script that lists the file size of each. For reasons not worth delving into here, I would like to use JavaScript running on my local machine to make this happen. AJAX seemed the obvious solution, but none of my browsers will allow me to make such calls across domains.
What I'd like to know now is whether I can find this information by loading these images into img elements and prodding each with JavaScript. Is this possible, is there another solution I'm unaware of, or am I simply going to have to use a different scripting language for the job?
Here is a crude example of what I'm thinking:
const imageFileNames = [ 'file1.jpg', 'file2.jpg', 'file3.jpg' ];
const imagePath = 'https://s3-us-west-1.amazonaws.com/example-bucket/';
// for each image..
imageFileNames.forEach(function ( fileName ) {
// create a new image element
let newImageElement = $('<img src="'+imagePath +fileName+'" />');
// get data about image after it is finished loading
newImageElement.one("load", function (e) {
// I am able to get the height and width here, but need file-size as well
console.log( e.target.height, e.target.width );
})
// not sure if adding this element to the document is necessary
$('#frame-images').append(newImageElement);
});