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

Transforming a Python list into a JavaScript array

Hey there, I'm in the process of creating a JavaScript array of dates to input into a jQuery datepicker addon. Here is my Django view: def autofill_featured(request): show_id = request.GET.get('show_id') show = Show.objects.get(id=s ...

What is the proper way to execute a JavaScript function within a JavaScript file from an HTML file?

I have the following content in an HTML file: <!DOCTYPE html> <!-- --> <html> <head> <script src="java_script.js"></script> <link rel="stylesheet" type="text/css" href="carousel.css"> & ...

Problem with detecting collisions in Three.js

Currently, I am developing a simple game where players can add objects (cubes) to the scene at the position of a raycaster (mouse) click on a large ground plane. To prevent cubes from overlapping with each other, I have implemented basic collision detectio ...

When I click, I expect to retrieve the tr element, but instead, I am receiving the td element

When I have a table and click on a tr element, the function returns a td element instead. Can someone explain why this is happening? let func = function () { $("tr").on("click", (event) => { event.preventDefault(); event.stopPropaga ...

Unable to retrieve context value for authentication requirements

I have implemented a feature in my application where I redirect users to the login page for certain special pages if they are not logged in. The implementation involves using react-router. Here is the code snippet for my RequireAuth component: const Requir ...

Determine total number of covid-19 cases with JavaScript

I am looking to incorporate a real-time COVID-19 total cases tracker for Russia on my website. In order to achieve this, I am sending a request to using the following script: function httpGet(theUrl) { var xmlHttp = new XMLHttpRequest(); xmlHttp.o ...

Unable to retrieve the image

When trying to fetch an image, I encountered the following error: Failed to load resource: the server responded with a status of 404 (Not Found) TopBar.jsx import { useContext } from "react"; import { Link } from "react-router-dom"; ...

Getting the value of a button using JavaScript

Is there a way to retrieve the value of a button when multiple buttons are generated dynamically? I have a JavaScript function that creates buttons in a list based on my search history, with each button labeled as a city name. However, after clicking on o ...

The div height adjustment peculiarities in IE7 and IE8 are causing quite a stir

I recently encountered a problem with my HTML/JS code that I thought was simple. The code is designed to expand the size of a div on mouseover and then collapse it back on mouseout. Here's how the code looks: CSS: .sign-in-up { position: absolut ...

Pause before proceeding to the next iteration in the loop

I am currently facing an issue while trying to send a message through an API using a function. The function returns a value called messageLogId, which I'm attempting to update in the main loop at Attendence. However, when executing the code, the value ...

Firebase onCall function is executing properly, however, it is only delivering {data: null} as the

I am facing an issue with my cloud function where everything runs smoothly until I attempt to return a response back to the front-end. Despite successfully modifying databases, the final log points D and G still show {data:null} as the output. I have a fe ...

What could be causing the isAuthenticated function to return false in the local strategy of passport.js even after a user

Here is the code I am using for authentication with passport-local strategy: routes.post("/login", passport.authenticate("local"), (req, res) => { res.json(req.user); }); function ensureAuth(req, res, next) { console.log(req.isAuthenticated()) ...

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

The second function is not being executed during the callback

I've done some research on callbacks, but I'm still having trouble with my code. I've defined my functions and tried to run them onload, but something isn't quite right. The getelements() function works fine on its own. My goal is to l ...

"Encountering a Twilio POST error when attempting to send SMS

After spending hours struggling with this issue, I could definitely use some assistance. The problem I'm facing involves sending an SMS message through Twillio on a click event in Angular. The function SendTestMessage is called when the button is cli ...

Efficiency in Javascript coding techniques

Hey there, I'm seeking some feedback on the efficiency of my aspect ratio function. This function is designed to determine the aspect ratio and limit the size of an image. Take a look and let me know what you think! function constrainTwoNumbers(optio ...

Ways to apply autofocus to one element once another element already has it?

I have encountered an issue while attempting to give a textarea autofocus using the autofocus attribute. Upon doing so, I receive an error message in the console that says: Autofocus processing was blocked because a document already has a focused element. ...

Incorporate communication between the front-end and backend

I encountered an error while attempting to import the getUser function in my backend code. The actual function is located in the frontend at ../utils/auth. How can I successfully import between front-end and backend? Or might there be another issue at pla ...

How to Override Certificate Expiry in JavaScript

Is there a way to bypass security for an expired certificate when making an Https post request in Javascript? I have been successful in doing this with C# and Java, but unsure about how to proceed in JavaScript. function post() { var xmlhttp; xmlhtt ...

AngularJS allows users to easily select and copy all text from both div and span elements within a specified range. This feature makes it

I am working on implementing a select all feature using AngularJS for text displayed in a structure similar to the one below. Once all the text is selected, users should be able to press ctrl + c to copy it. <div ="container"> <div class="header ...