Checking the accuracy of pixels in an image

How can I check the width and height of an image upload in AngularJS? For example, if the width is greater than 200 pixels and the height is greater than 200 pixels, it should show an error. How can I achieve this using AngularJS?

HTML

<div class="form-group">
    <label class="col-sm-2 control-label">Logo :</label>
    <div class="col-sm-4">
        <input filestyle="" type="file" name="file" required="" ng-model="form.logo" onchange="angular.element(this).scope().add(this.files).checkPhoto(this)" accept="image/jpeg,image/jpg" data-classbutton="btn btn-default" data-classinput="form-control inline" class="form-control" />
        <br><label Style="color: Red;">Logo should be in (550 X 150) size</label>
    </div>
</div>

JS

$scope.fileList1 = [];
$scope.add1 = function(file1) {
    console.log(file1);
    for (var i = 0; i < file1.length; i++) {
        if (file1[i].type == 'image/jpeg' || file1[i].type == 'image/jpg' || file1[i].type == 'image/tif' || file1[i].type == 'image/tiff') {
            var item = {
                name: file1[i].name,
                file: file1[i]
            };
            $scope.fileList1.push(item);
            var f = file1[i],
                r = new FileReader();
            console.log($scope.fileList1);
            r.onloadend = function(e) {
            }
            r.readAsDataURL(f);
        } else {
            $('#file1').val('');
            Notify.alert('Upload only .jpeg,jpg,tiff,tif format file', {
                status: 'warning',
                pos: 'top-right',
                timeout: 3000
            });
        }
    }
};

Answer №1

One method for uploading files in AngularJS is using ng-flow, a library designed specifically for this purpose. Additionally, you can also incorporate image dimension checking within the flow-file-added/flow-files-added handler.

To see an example of this in action, check out AidasK's implementation here: https://github.com/flowjs/ng-flow/issues/126

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

Modifying CSS style according to the contents of an HTML element

Creating a room allocation page with multiple panel boxes using Bootstrap. Each box represents a bed - highlighted in red if occupied and green if vacant. Clicking on a green panel redirects to the room allocation page, while clicking on a red panel goes t ...

Stylus Vue Vite: The Trio of Global Variables

I'm trying to figure out how to globally import and use stylus variables in my Vue Vite project. How can I achieve this and access the variables within the script section of my Single File Component (SFC)? Below is an excerpt from my Vite config: exp ...

Non-sticky hamburger menu is not fixed in place

Having trouble with the hamburger menu staying sticky? The hamburger icon remains in the corner as you scroll down, but the menu stays fixed at the top of the page, making it hard to access. You tried tweaking the code you found on Codepen, but couldn&apos ...

What is the best way to choose a random text from a dropdown menu that contains several div elements using Playwright?

web element Is it possible to choose a "random" text using div tags from a dropdown? I am attempting to pick any random country from the dropdown with the following code in Playwright: const selectCountry = this.page.locator('<this locator>&apos ...

Tips for exporting data to a JSON file using the Google Play Scraper in NodeJS

Recently, I've been exploring the Google Play Scraper and I'm in need of a complete list of all appIds using NodeJS. The issue I'm facing is that it only outputs to console.log. What I really require is to save this output to JSON and then c ...

Locate every JavaScript array available

I am in the process of converting a variable number of vector shapes into coordinates. Each shape's coordinates are stored within its own JavaScript array. For instance, the JavaScript code might be structured like this: var la0001 = [33,108,66,141, ...

Creating a dynamic ng-options in AngularJS

Why does this code work: <select ng-model="country" ng-options="{{selectOptions}}"> <option style="display:none" value="">Select country</option> </select> The json country list consists of objects with properties {id :... ...

Do not procrastinate when updating the navbar elements while navigating through pages

This specific NextJS code is designed to alter the color of the Navbar elements once scrolling reaches 950px from the top or when navigating to a different page that includes the Navbar. Strangely, there seems to be a delay in updating the Navbar colors wh ...

Ways to troubleshoot JavaScript following an AJAX request?

My webpage is structured into three separate files. The index.html file contains a navigation bar, a content box, and a footer within 3 divs. Additionally, there are two other .html files with different content that should load upon clicking specific links ...

How to retrieve the current event handler's value with jQuery

To assign an onclick event handler using jQuery, I simply use the following code: $('#id').click(function(){ console.log('click!'); }); Now, my question is how can I retrieve a reference to the function that is currently handling th ...

ionic framework for seamless bar code scanning

$scope.scanBarcode = function(){ $cordovaBarcodeScanner.scan().then(function(imageData){ alert(imageData.text); console.log("Barcode format ->" + imageData.format); console.log("Cancelled ->" + imageData.cancelled); }, function(error) { ...

Launching an IONIC application within an iframe of a different framework

Is it feasible to display an Ionic app within an IFrame HTML element hosted on a server-based app? If so, how can I incorporate the necessary IONIC/Angular libraries into my framework? For instance, is it possible to render an Ionic app within the view of ...

Error: You forgot to include a name after the dot operator

I am facing an issue where I am unable to use YUIcompressor to compress a file. The script is running smoothly, but I am encountering the error missing name after . operator on line 3 of this script: Specifically at: "+ source.response.chars[k].name +" I ...

The addition of the URL # fragment feature to Safari's browser caching system

Currently, I am focused on improving the speed of our website. To achieve this, the client is utilizing ajax to preload the expected next page of the application: $.ajax({url: '/some/real/path', ...}); Upon receiving a response from the server ...

The declaration file for module 'react-scroll-to-bottom' appears to be missing

I recently added react-scroll-to-bottom to my project and it is listed in my dependencies. However, I am encountering the following error: Could not find a declaration file for module 'react-scroll-to-bottom'. The path 'c:/Users/J/Desktop/w ...

What is the best way to obtain the complete URL including the # symbol in PHP?

Currently, I am implementing AngularJS routing alongside php which results in my URLs appearing as http://localhost/admin/home#/categories However, the issue arises when attempting to retrieve the full URL as it only returns /admin/home. I have tried ut ...

Storing the DOM in a Variable

I have saved the response of an XMLHttpRequest() into a variable from a specific website, let's say yahoo.com. How can I retrieve the values of the DOM content using either getElementById or getElementsByName on this variable? For instance: var dump ...

When adding new elements to an array, the IDs of all objects become identical

When running the code below: dietDay.meals.forEach((meal) => { meal.mealProducts.forEach((mealProduct) => { if ( mealProduct.product.id && this.fetchedProductIds.includes(mealProduct.p ...

Guide on accessing nested objects in EJS templates

I'm attempting to extract the "info" portion from the JSON data provided below. In my code snippet, I'm using the <%= person['person_details']%> to access that specific section of the JSON. However, it only returns [Object Obje ...

Efficiently Loading JavaScript Files in Django for Optimal Website Performance

I have a Django blog app with a Post model that includes a field called body. This field may contain Latex, so I utilize MathJax.js, as well as code snippets, for which I use highlight.js. Sometimes I use both, and other times neither. Is there a way to a ...