Reset state (file input, result image)

[ekzarov]

Big thanks you for this control. I have one ask, that I think will be useful for others.

I have modal dialog, in which I use your control markup(like in example), but as long as modal html is static and placed on the page (hidden until showed), after I open and fill file input by some file for specific person item(from grid, for example), control saves this file blob into my directive html (because file input was not destroyed and still exists in directive) and for the next new item (when I open modal dialog) I see previous file result. Is there any possibility to reset control at all, to initial state?

Thank you.

[fernoftheandes]

+1

[fernoftheandes]

In the meantime, this works for me:

scope.onPhotoSave = function(data) {
  // do something...
  scope.myImage = ''; // reset image (assumes image="myImage")
  $('#myModal').modal('hide');
};

[ketansp]

Sharing my code. Works perfectly in modal, even for multiple instances of image upload on same modal / page.

$scope.showQuestionImage = function () {
        angular.element(document.querySelector('#file-input'))[0].dataset = {};
        angular.element(document.querySelector('#file-input'))[0].files = [];
        angular.element(document.querySelector('#file-input'))[0].value = '';

        $scope.image = '';
        $scope.croppedImage = '';
        $('#image-upload-modal').modal({
            backdrop: 'static',
            keyboard: false
        });

        var handleFileSelect = function (evt) {
            var file = evt.currentTarget.files[0];
            if (file.type !== "image/jpeg" && file.type !== "image/png") {
                notify({
                    message: 'Only .jpg and .png files are accepted!',
                    classes: ["alert-danger"]
                });
                $('#modal-save-button').hide();
                return false;
            }
            if (file.size > 4194304) {
                notify({
                    message: 'Max file size is 4mb!',
                    classes: ["alert-danger"]
                });
                $('#modal-save-button').hide();
                return false;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                $scope.$apply(function ($scope) {
                    $scope.image = evt.target.result;
                });
            };
            reader.readAsDataURL(file);
            $('#modal-save-button').show();
        };
        angular.element(document.querySelector('#file-input')).on('change', handleFileSelect);

        var saveFunction = function () {
            $scope.$apply(function ($scope) {
                $scope.target.questionImage = $scope.croppedImage.toString();
            });
            $scope.image = '';
            $scope.croppedImage = '';
            $('#image-upload-modal').modal('hide');
            $('#modal-save-button').unbind('click', saveFunction);
        };

        var cancelFunction = function () {
            $scope.image = '';
            $scope.croppedImage = '';
            $('#image-upload-modal').modal('hide');
            $('#modal-cancel-button').unbind('click', cancelFunction);
            $('#modal-save-button').unbind('click', saveFunction);
        };

        $('#modal-save-button').unbind('click', saveFunction);
        $('#modal-save-button').bind('click', saveFunction);

        $('#modal-cancel-button').unbind('click', cancelFunction);
        $('#modal-cancel-button').bind('click', cancelFunction);

    };

[paulchill]

Can you tell me how what you had to change to allow multiple image uploads? i am trying to do this through looping the directive in an ng-repeat but when i loop i can't get it to work? any ideas?