dante dante - 24 days ago 8
AngularJS Question

AngularJS - convert file object to image object

Is it possible to convert file object to image object?

I need width and height from 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 example here, how it should 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

The library already seems to give most of what you require. To read width and height properties of the file/image .

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

Controller

$scope.uploadFile = function(file) {
 $scope.vm.file = "";
 $scope.vm.file = file;    
// show all file properties
 console.log(file); // Show available properties
 console.log(file.$ngfWidth +','+ file.$ngfHeight) // Your width and height
 fileService.uploadFile($scope);

}

You should probably check out it's Features.