Create a md-dialog box for image upload with image view, crop and upload in angularjs

Question

I want to create a md-dialog box using Angular material which show the choose file option for image selection. Once image selected, it should show the image and provide crop facility and also provide the preview of the crop image. For cropping, I am using ng-img-crop

Below is my link which trigger the md-dialog:

<span class="edit_image" ng-click="uploadPic()">

Below is my controller function called by above function:

$scope.uploadPic = function(ev){
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;
         $mdDialog.show({
            controller: imageUploadCtrl,
            templateUrl: 'uploadImage.tmpl.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose:true,
            fullscreen: useFullScreen
        });

Below is my html template which i am using:

<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
    <img-crop image="myImage" result-image="myCroppedImage"></img-crop>

</div>
    <div>Cropped Image:</div>
    <div><img ng-src="{{myCroppedImage}}" /></div>
<md-dialog-actions layout="row">
    <md-button ng-click="cancel()">
        Cancel
    </md-button>
    <span flex></span>
    <md-button type="submit" class="md-raised md-primary" ng-click="saveImage()">
        Upload
    </md-button>
</md-dialog-actions>

Image upload controller :

function imageUploadCtrl($scope, $mdDialog){

        $scope.myImage='';
        $scope.myCroppedImage='';

        var handleFileSelect=function(ev) {
            console.log('trigger');
            var file=ev.currentTarget.files[0];
            var reader = new FileReader();
            reader.onload = function (ev) {
                $scope.$apply(function($scope){
                $scope.myImage=ev.target.result;
                });
            };
            reader.readAsDataURL(file);
        };
        angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);

        $scope.hide = function () {
            $mdDialog.hide();
        };
        $scope.cancel = function () {
            $mdDialog.cancel();
        };
        $scope.saveImage = function () {
            Notifier.success("Image Uploaded Sucessfully");
            $mdDialog.hide();
        };
    }

Above code is perfectly working, if I am doing this process in a new page. But not working in md-dialog box. Can anyone please help me to complete it.

score 0 · Answer 1 · answered Oct 09 '17 at 21:21

I was having the same exact issue. You didn't specify the exact problem you were having but I assume you were having the same problem with the file input change listener used in the demo code not working with md dialog (and I have no idea why it doesn't work still).

Work around is to use this file upload change directive shown below and found from here: https://stackoverflow.com/a/41557378/1000610

angular.module("YOUR_APP_NAME").directive("ngUploadChange",function(){
return{
    scope:{
        ngUploadChange:"&"
    },
    link:function($scope, $element, $attrs){
        $element.on("change",function(event){
            $scope.$apply(function(){
                $scope.ngUploadChange({$event: event})
            })
        })
        $scope.$on("$destroy",function(){
            $element.off();
        });
    }
}});

Change the file input html to:

<input type="file" id="fileInput" ng-upload-change="handleFileSelect($event)"/></div>

Then change the handleFileSelect function to scope var

$scope.handleFileSelect = function(evt) {...

And remove this old change listener line:

angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);

Also noticed for some reason ng-change and onchange didn't work as well.

Create a md-dialog box for image upload with image view, crop and upload in angularjs

1 Answers1