Check the dimensions of the image file entered using AngularJS on the client side

Question

Check the dimensions of the image file entered using AngularJS on the client side

Before uploading an image to the server, I need to validate its dimensions on the client side. I have searched for solutions using img.Onload(), but that's not what I am looking for.

All I want is for the user to choose the image from

<input id="selectThumb" name="myImage" type="file"
        accept="image/*" onchange="angular.element(this).scope().fileName(this)"
        </input>

After selecting the file, only the name should be displayed, and an alert should pop up if the image is larger than 172X152px. I don't need to preview the image.
The "fileName(this)" function provides me with the image file's name, but I can't access its dimensions to validate them. For your information, I have defined this function in my directive.

To reiterate, I aim to display an alert when a user selects a file that exceeds the size limit of 172X152px. There will be no image preview or loading on my page.

javascript angularjs

Answer 1

Answer №1

Instead of worrying, you must utilize Image.onLoad for this task. Interestingly, the image does not need to be displayed anywhere.

Check out an example here on how to get Image Dimensions using Javascript File API

    var fr = new FileReader;

    fr.onload = function() { // file is loaded
        var img = new Image;

        img.onload = function() {
            //TODO: Add your validation here
            alert(img.width); // image is loaded; sizes are available
        };

        img.src = fr.result; // is the data URL because called with readAsDataURL
    };

    fr.readAsDataURL(this.files[0]); // This code uses an <input type="file"> for demonstration purposes

Answer 2

Instead of worrying, you must utilize Image.onLoad for this task. Interestingly, the image does not need to be displayed anywhere.

Check out an example here on how to get Image Dimensions using Javascript File API

    var fr = new FileReader;

    fr.onload = function() { // file is loaded
        var img = new Image;

        img.onload = function() {
            //TODO: Add your validation here
            alert(img.width); // image is loaded; sizes are available
        };

        img.src = fr.result; // is the data URL because called with readAsDataURL
    };

    fr.readAsDataURL(this.files[0]); // This code uses an <input type="file"> for demonstration purposes

Check the dimensions of the image file entered using AngularJS on the client side

Answer №1

Similar questions

Requesting for a template literal in TypeScript:

Tips for automatically inserting a "read more" link once text exceeds a certain character count

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

Enter a keyword in the search bar to find what you're looking

Methods for concealing the title and date when printing web content using JavaScript

Are you experiencing issues with the cross-origin request failing in react-map-gl?

I'm utilizing bootstrap to design a slider, but the length of the second div inside it is longer than the slider div

Create a Vue component that utilizes the v-for directive to iterate through a list of items, passing data from a

Using AngularJS to send an HTTP request to a Node.js API

Tips for adding a bounding box to an image received from the server

Having trouble getting the node serialport module to function properly when using the child process fork()

NodeJS video streaming feature does not close the connection when the user disconnects or navigates to a different page

What is the process of adding an array into a JSON object using the set() function in Firebase?

How can I configure AngularJS intellisense in Visual Studio Code?

An async function cannot be used as a Constructor

Tips for How to Put a Delay on Ajax Requests and Display a Progress Bar During Loading

Dealing with null route parameters for Express applications

When placed within a setInterval loop, the event.clientY variable becomes inaccessible

Constructing hierarchical objects in JavaScript

What is the best way to add child elements to existing elements?