AngularJS to validate image dimensions (width and height) on upload

Hello, I am new to working with Angular JS. I have been experimenting with a login form that includes a file upload field for the user picture. The input field code looks like this:

<input type="file" file-model="userPic"/>

When I submit the form in the controller.js file and use console.log(userPic), I can see the file name, size, and modified date. However, I am looking to also retrieve the width and height dimensions of the uploaded picture before submitting the form. I do have jQuery installed as a bower component, and there is a dimensions.js file within it. Could that be useful for this task?

I attempted to use .width() to log the width of the input element by slightly modifying the HTML code to include an ID:

<input type="file" file-model="userPic" id="userId"/>

Then, in the controller.js file on form submission, I tried:

console.log($('#userId').width());

However, the output I received was not correct. Can you suggest how I should proceed from here?

javascriptangularjs

Answer №1

To access the original dimensions of an image, you can use naturalWidth and naturalHeight properties:

const picHeight = $profilePic.naturalHeight();
const picWidth = $profilePic.naturalWidth();

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

Utilizing the Express-busboy npm package to generate a new directory within the public folder of

While working on my controller, I encountered an issue when trying to readFile sent from the browser via AJAX. Unexpectedly, a directory was created in my public folder with a name like '3d6c3049-839b-40ce-9aa3-b76f08bf140b' -> file -> myfile ...

javascriptnode.jsajaxexpress

How does the designated callback function in the filter method effectively remove any missing values from the array?

//Snippet of JavaScript code let sparseArray = [5, , 3, , 1]; let denseArray = sparseArray.filter(() => true); console.log(denseArray); The filter function in the callback removes empty elements from the sparse array. Output: [5, 3, 1] Explanation: ...

javascript

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

Trigger a modal from one sibling Angular component to another

My application utilizes an Angular6 component architecture with the following components: <app-navbar></app-navbar> <app-dashboard></app-dashboard> The Dashboard component consists of: <app-meseros> </app-meseros> < ...

javascriptangularservicebootstrap-4angular6

Error: Node.js exceeds maximum call stack size while inspecting an objectlogging or debugging

After defining a class as shown below, I encountered an error stating RangeError: Maximum call stack size exceeded when attempting to review the properties of the Object. var Individual = (function () { function Individual(name, age) { this.na ...

javascriptnode.js

What is the relationship between JavaScript and the height of a window?

Consider the code snippet below: 24 <script type="text/javascript"> 25 26 function UpdateDisplay($isVisible){ 27 if($isVisible) 28 $('.relatedContent').stop().css({ 29 "transform": "tr ...

javascript

An unresolved $httpBackend in Angular's unit testing environment without a defined response

I'm currently facing some difficulties with my first test, so I would appreciate your understanding. The purpose of this test is to evaluate a function that performs an HTTP post request: $scope.formData= 'client=' + $scope.client_selected ...

angularjsunit-testingjasminekarma-runner

How to align scrolling images with their scroll origin - a step by step guide

Curious to know the name of the effect where images scroll in a different orientation than the page, creating a 2D appearance. Take a look at the Google Nexus website and scroll down - do you see the effect? What is this effect called? Is it created usin ...

javascriptjquerycssanimation

Surprising 'T_ENCAPSED_AND_WHITESPACE' error caught me off guard

Error: An error was encountered while parsing the code: syntax error, unexpected character (T_ENCAPSED_AND_WHITESPACE), expected identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\wamp\www\html\updatedtimel ...

javascriptphphtmlsyntax-error

Checking the formik field with an array of objects through Yup for validation

Here is a snippet of the code I'm working on: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx I am currently in the process of creating a form that will accept an array of objects called Criterion, which are of a specific type: export inte ...

javascriptreactjstypescriptformikyup

Issues with uploading files in NodeJs using express-fileupload are causing errors

I created a REST API in NodeJs for File Upload which is functioning correctly, however I am facing an issue. When I upload more than 2 images, only 2 or 3 get uploaded and sometimes one gets corrupted. I suspect that the loop is running too fast causing th ...

javascriptnode.jsrestexpressfor-loop

The instance is referencing "underscore" during render, but it is not defined as a property or method

I have experience as a skilled react developer, but I've taken over a vue.js project from another developer and managed it for quite some time. Regrettably, I haven't put in the effort to learn vue properly. When using lodash, I encountered an u ...

javascriptvue.js

Checking for a particular element's existence in an array using jQuery

Is there a way to verify the presence of the var element in the array sites? var sites = array['test','about','try']; var element = 'other'; ...

javascriptjquery

My function won't get called when utilizing Angular

My Angular code is attempting to hide columns of a table using the function shouldHideColumn(). Despite my efforts, I am unable to bind my tags to the <th> and <td> elements. An error keeps popping up saying Can't bind to 'printerColu ...

javascriptangulartypescript

Instructions for transferring a JavaScript array to a Java servlet

Greetings everyone! I am currently working on a web application with an orthodox approach, utilizing AJAX in Java and JavaScript. I am wondering if it is feasible to pass an array from JavaScript to a Servlet. ...

javascriptajaxservlets

Solution for repairing the display location button on Android within a React Native Map

I am facing an issue with the Location Button in my React Native Maps app. When the app is opened for the first time and the map is rendered, the button disappears. However, if I close the app but leave it running in the background, upon reopening the app, ...

javascriptcssreactjsreact-nativereact-native-maps

What's the best way to adjust the width of the <Input> component in Reactstrap?

How can I adjust the width of an input element in Reactstrap to be smaller? I've attempted to set the bsSize to small without success <InputGroup> <Input type="text" name="searchTxt" value={props.searchText ...

javascriptreactjsreactstrap

Enhance the performance of your React/NextJS app by controlling the rendering of a component and focusing on updating

I'm facing an issue with my NextJS application that showcases a list of audio tracks using an <AudioTrackEntry> component. This component receives props like the Track Title and a Link to the audio file from an external data source. Within the ...

javascriptreactjstypescriptnext.js

strange issue encountered while utilizing JavaScript's async/await syntax

Recently, I encountered an issue while trying to retrieve a random user from the randomuser API using code in my Vue frontend. // Here is the structure of the API response { info: { // details omitted }, results: [ {//random user data} ] } // This snippet ...

javascriptvue.jsasync-await

Having trouble with creating a new Next.js app using the latest version with npx?

Having some difficulty with the "npx create-next-app@latest" command while setting up Next.js. As a newcomer to both the community and Next.js, I could use some assistance in resolving this problem. Upon running the command, an unfamiliar message was displ ...

javascriptnode.jsnpmnext.jsnpx