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.

javascriptangularjs

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sending information from a modal to a separate page using AngularJS

Seeking assistance with passing data from a modal to another page. Can you provide guidance on how to achieve this task? $scope.productdetails = function (size,selectedproduct) { var modalInstance = $uibModal.open({ templ ...

angularjsangularjs-scope

Add items to a new array with a property set to true, if they are present in the original array

Could someone assist me with the following situation? I need an array of strings. A function is required to map the array of strings, assigning each element a name and key, while also adding another object "checked: false". Another function should take t ...

javascriptnode.js

Conceal the Tab Bar in Stack Navigator Excluding the tabBarVisible Setting

I discovered some solutions using outdated versions of navigation, specifically involving the "tabBarVisible" option in Tab Navigator. However, this option is no longer available, so I am seeking guidance on how to hide the Tab Bar on specific screens with ...

javascriptreactjsreact-nativeexporeact-navigation

Ways to reach the scope of transcluded elements

Within my directive element, there is a form that needs to set some scope properties. Here's an example: <trans-dir> <form role='form' class='form-inline'> <div class='form-group'> Se ...

angularjsangularjs-directive

Is the `beforeEach` function in Jasmine synchronized?

Is it guaranteed that multiple beforeEach functions will always run sequentially? beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); beforeEach(function() {}); It appears they do. I conducted a tes ...

javascriptjasmine

Maintain checkbox selection even after leaving the page

I am looking for a way to maintain the state of a checkbox even after navigating away from the page in an AngularJS and bootstrap environment. Currently, I find that my bound variable gets reset to false every time I reload the page when the controller run ...

javascriptangularjscheckbox

The issue of Dynamoose/DynamoDB converting empty arrays to null during updates

Utilizing the Node.js package Dynamoose to manage DynamoDB requests within my web application has been a challenge. An issue arises when attempting to update an item that contains an empty array in the JSON object. It seems that Dynamoose is setting this ...

javascriptarraysnode.jsamazon-web-servicesamazon-dynamodb

The challenge of removing an event listener

There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely. I attemp ...

javascripthtmlcss

Tips for halting the movement of marquee text once it reaches the center briefly before resuming animation

Is there a way to make text slide in, pause when centered, and then repeat the process? I'm looking for some help with this animation. Here is the code snippet: <marquee direction="left" id="artistslide"> <span id="currentartist">< ...

javascriptjqueryhtmlmarquee

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

javascriptcsshtml

JustGage error: Unable to locate element with ID 0 in AngularJS

I developed a custom directive for the JustGage plugin, here is how it looks: function justGage() { return { restrict: 'E', replace: true, scope: { universalId: '@', ...

javascriptangularjsjustgage

Having trouble storing data in a database with PHP in an AngularJS application

<!DOCTYPE html> <html ng-controller="controller" ng-app="app"> username:<input type="text" placeholder="*username" ng-model="user"><br><BR> password:<input type="password" placeholder="*password" ng-model="pass" &g ...

phpmysqlangularjs

Angular - Execute function every 30 seconds while considering the duration of the function execution

In my Angular 7 application, I am utilizing RxJS to handle asynchronous operations. My goal is to retrieve a list of items from an API endpoint every 30 seconds. However, there are times when the request may take longer than expected, and I want to ensure ...

javascriptangulartypescriptrxjs

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

javascripthtmlcssanimation

Issue occurred when trying to load controllers during the migration process from AngularJS1 to Angular6

Currently, I am in the process of upgrading AngularJS1 components to Angular6. My strategy involves creating wrappers for all existing AngularJS1 components by extending "UpgradeComponent" and storing them under the folder "directive-wrappers". However, wh ...

angularjsangularng-upgradeangular-upgrade

What is the most efficient way to dynamically add a class to multiple elements in AngularJS using ng-click?

On my HTML page, I have 2 lists that I want to modify so that when an option is clicked, it adds a class altering the background-color of the li element to red. If the same option is clicked again, it removes the class and reverts back to white: This is t ...

javascriptangularjs

The functionality of the TURF booleanwithin feature is malfunctioning and not producing the

Currently, I am working on validating whether a polygon is completely within another polygon. However, there are cases where more complex polygons should return false, but turf interprets them as valid. If you'd like to see the sandbox, click here: ...

javascripttypescriptturfjs

The error message "Unable to iterate over undefined property in Node.js using EJS and JavaScript" popped up

I've been struggling with the error "Cannot read property 'forEach of undefined" for two days now and I just can't seem to figure out the problem. Any help would be greatly appreciated. Here is the code: bruidstaart.js page where I am tryin ...

javascriptnode.jsexpressejs

Develop a PDF generator in ReactJS that allows users to specify the desired file name

Is there a way to customize the file name of a generated PDF using "@react-pdf/renderer": "^2.3.0"? Currently, when I download a PDF using the toolbar, it saves with a UID as the file name (e.g., "f983dad0-eb2c-480b-b3e9-574d71ab1 ...

javascriptreactjstypescriptpdfreact-pdf

How can I use apps script to automatically remove old files from google drive that are over a month old?

Every week, I secure backups of my sheets to a backup folder using the following code. Now, I am looking for a way to automatically delete files older than 1 month from the backup folder. How can I add a script to accomplish this? Backup code (triggered w ...

javascriptgoogle-apps-scriptgoogle-sheetstriggersgoogle-drive-api