Некоторые проблемы при развертывании дропзоны в AngularJS 1.4.9 - PullRequest
1 голос
/ 25 мая 2019

Когда я пытаюсь стереть изображение в зоне сброса, на нем есть следы, которые не позволяют мне загрузить его снова, если я не загружал и не стирал другое изображение раньше.Я использую версию 1.4.9 AngularJS

// controller

app.controller('AppController',function($http){
var ctrl = this;
ctrl.data = { upload:[] }  // <= upload data get pushed here 
ctrl.upload= function(){
    console.log(ctrl.data);
    $http({ 
        method  : 'POST',
        url     : 'upload.php',
        data : ctrl.data,
    }).success(function(data){
        alert(data);
    }); 
}
ctrl.delete= function(){
    ctrl.data = { upload:[] };
}

});

// а здесь указана директива, управляющая загрузкой и преобразованием base64 изображения

   app.directive('dropZone',[
    function(){
        var config = {
            template:'<label class="drop-zone">'+
                     '<input type="file"  accept="jpg,png" />'+
                     '<div ng-transclude></div>'+       // <= transcluded stuff
                     '</label>',
            transclude:true,
            replace: true,
            require: '?ngModel',
            link: function(scope, element, attributes, ngModel){
                var upload = element[0].querySelector('input');    
                    upload.addEventListener('dragover', uploadDragOver, false);
                    upload.addEventListener('drop', uploadFileSelect, false);
                    upload.addEventListener('change', uploadFileSelect, false);                
                    config.scope = scope;                
                    config.model = ngModel; 
            }
        }
        return config;   


        // Helper functions
        function uploadDragOver(e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; }
        function uploadFileSelect(e) {
             console.log(config.scope.app.data.upload);

            if (config.scope.app.data.upload.length+1==1) {
                /* console.log("Hola"+config.scope.app.data.upload.length); */
                 e.stopPropagation();
                e.preventDefault();
                var files = e.dataTransfer ? e.dataTransfer.files: e.target.files;
                for (var i = 0, file; file = files[i]; ++i) {
                    /* console.log(file); */
                    var reader = new FileReader();
                    reader.onload = (function(file) {
                        return function(e) { 
                            // Data handling (just a basic example):
                            // [object File] produces an empty object on the model
                            // why we copy the properties to an object containing
                            // the Filereader base64 data from e.target.result
                            var data={
                                data:e.target.result,
                                dataSize: e.target.result.length
                            };
                            for(var p in file){ data[p] = file[p] }

                            config.scope.$apply(function(){ config.model.$viewValue.push(data) })
                        }
                    })(file);
                    reader.readAsDataURL(file);
                }
            }else{console.log("Solo puedes subir una foto.")}

        }
    }
])

Что я ожидаю

Когда вы удаляете изображение в зоне сброса, вы можетезагрузите это снова.Это ожидаемый результат.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...