Changing a file object into an image object in AngularJS

Can a file object be converted to an image object?
I am in need of the width and height from the file (which is an image). Here is my code:

view:

<button id="image_file" class="md-button md-raised md-primary"
type="file" ngf-select="uploadFile($file)">
SELECT FILE
</button>

<md-input-container>
<div class="raised">
<input id="image_file_name" type="text" ng-model="vm.file.name"></input>
 </div>    
</md-input-container>

controller:

app.controller('imageController', function($scope, fileService) {

$scope.vm = {};

$('.intro').show(1000);

$scope.uploadFile = function(file) {
$scope.vm.file = "";
$scope.vm.file = file;    //<---- for instance here, how should it be done?
   fileService.uploadFile($scope);
}

service:

angular.module('app')
.service('fileService', function ($http,  validationService) {

      this.uploadFile = function ($scope){
        if (validationService.isFileValidate($scope)) {
            $scope.vm.acceptableFormat = true;
        }  else {
            $scope.vm.acceptableFormat = false;
        }

    };

     });

Answer №1

The library seems to provide most of the functionalities you need. It allows you to access width and height properties of files or images.

 //To only filter images, add the accept option
 <button id="image_file" class="md-button md-raised md-primary"
 type="file" accept="image/*" ngf-select="uploadFile($file)">
 SELECT FILE
 </button>

In the controller section:

$scope.uploadFile = function(file) {
 $scope.vm.file = "";
 $scope.vm.file = file;    
// Display all file properties
 console.log(file); // Displays available properties
 console.log(file.$ngfWidth +','+ file.$ngfHeight) // Width and height details
 fileService.uploadFile($scope);

}

Make sure to explore its Features.

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

Error encountered with NG6 Angular sass files

Lately, I've been experimenting with NG6 Angular and it's growing on me. However, I hit a roadblock when attempting to switch from its default stylus to SASS, which is my preferred style in other projects. I have all the necessary dependencies in ...

Linking chained functions for reuse of code in react-redux through mapStateToProps and mapDispatchToProps

Imagine I have two connected Redux components. The first component is a simple todo loading and display container, with functions passed to connect(): mapStateToProps reads todos from the Redux state, and mapDispatchToProps requests the latest list of todo ...

Send an object to query when using Router.push in Next.js

Just getting started with NextJs and I'm experimenting with passing an object to another page through a component. Let me show you the code and explain what I'm attempting to accomplish: The object I want to pass looks like this: objectEx = { ...

Is it possible to identify in Next.js whether scrollRestoration was triggered, or if the back button was pressed?

I've been utilizing the scrollRestoration functionality within Next.js to save and restore the page position whenever a user navigates using the back button. However, I've encountered an issue with it not restoring the horizontal scroll position ...

I am facing an issue where my AngularJS code is not executing properly on JSF

I'm trying to clear the text inside a textarea using AngularJS after typing and clicking on a button. Here's the link to the fiddle for reference: http://jsfiddle.net/aman2690/2Ljrp54q/10/ However, I keep encountering the following error messag ...

Is there a more efficient method for managing nested promises?

I am currently facing a challenge as a new developer. In the scenario I'm working on, there is a possibility of encountering a lock issue when the user saves their work. The user should be given an option to override the lock if it occurs. Since REST ...

The data type 'boolean' cannot be assigned to the type 'CaseReducer<ReportedCasesState, { payload: any; type: string; }>'

I recently developed a deletion reducer using reduxjs/toolkit: import { createSlice, PayloadAction } from "@reduxjs/toolkit"; import { AppThunk } from "../store"; import { ReportedCase, deleteReportCase } from "../../api/reportedCasesApi"; import history ...

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

Display header right button based on a condition in React Native using React Navigation

I am looking to conditionally display the Entypo new-message icon in the top right corner of the header based on a boolean variable (if true, then show the icon in the header). Here is a snippet of code where this functionality can be replicated. Thank y ...

Is there a way to update the color of a button once the correct answer is clicked? I'm specifically looking to implement this feature in PHP using CodeIgniter

Within my interface, I have multiple rows containing unique buttons. Upon clicking a button, the system verifies if it corresponds to the correct answer in that specific row. The functionality of validating the responses is already functional. However, I a ...

Is there a way for me to immediately send data after receiving it?

When I try to perform onPress={() => kakaoLosing() I am attempting to retrieve data (profile) from getProfile using async await and immediately dispatch that data to KAKAOLOG_IN_REQUEST, This is my current code snippet: import { ...

The Express server is set up with CORS enabled, however, it continues to encounter issues when attempting to make asynchronous HTTP requests from

We're currently experiencing an unusual issue and are seeking assistance to resolve it. Initially, our Express server is functioning well as an API when accessed from the same domain. However, we also need to utilize this API on our computers for tes ...

The function '.save' is not recognized by Mongoose

As a newcomer, I have been trying to understand the code in this calendar app that I created using express-generator. Everything seems to be working fine with connecting to MongoDB, but I am facing issues when trying to save a document. The section of my ...

Verify the presence of incorrect query parameters before generating an error in a (node.js) environment

Is there a way for me to identify and handle all invalid query parameters in my small node.js app? If an invalid query parameter is detected, I would like to simply throw an error with status code 422. I attempted the following approach but it did not wor ...

Why does adding to an array in the Vuex store replace all existing values with the last entry?

Utilizing vuex-typescript, here is an example of a single store module: import { getStoreAccessors } from "vuex-typescript"; import Vue from "vue"; import store from "../../store"; import { ActionContext } from "vuex"; class State { history: Array<o ...

Error in typescript: The property 'exact' is not found in the type 'IntrinsicAttributes & RouteProps'

While trying to set up private routing in Typescript, I encountered the following error. Can anyone provide assistance? Type '{ exact: true; render: (routerProps: RouterProps) => Element; }' is not compatible with type 'IntrinsicAttribu ...

Rearrange lists by dragging and dropping them according to specific criteria

In my AngularJS project, I am utilizing the angular-drag-and-drop-lists library from here to create two lists with the following functionalities: Dragging items from list A to list B Dragging items from list B to list A Reordering items in list A Reorder ...

The :first selector examines the parent's parent as a reference point, rather than the immediate

I am facing a challenge with shuffling large elements within my layout because of floating them and attempting to display them. Specifically, the elements with the class .gallery-large always need to be the first child inside the .item container. There are ...

how do I modify my JavaScript code to achieve the desired outcome

How can I program a button to disable after being pressed 10 times in less than a minute, but continue counting if not pressed for 1 minute? function buttonClicked() { if (totalCount + accCounter > 9) { document.getElementById("btn").disabled = ...

What could be the reason why my useRouter function isn't working as expected?

I'm currently working on developing an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) : I've encountered a navigation issue despite following the documentation diligently. To illustrate, here's a bas ...