Bonjour à tous,
je vous explique mon problème,

J'ai un input de type file sur le quel j'ai attaché une directive. file-upload.

Celle ci lui attache des événement drag and drop pour récupérer un fichier . Cependant tous fonctionne mais seulement qu'une seule fois. Ensuite mon drag and drope n'as plus d'effet et le navigateur ouvre le fichier dropé ..

auriez vous une piste ou un problèmde déjà rencontré similaire j'ai aucune idée du pourquoi du comment.

le tempalte :

                                    <input ng-file-upload="searchAudio" id="drop" type="text" readonly class="dragndrop-title" ng-model="fileName">

la directive


    app.directive("ngFileUpload", function($state, $stateParams, $localStorage, researchRepository, fileStorage, $rootScope, $compile, toolService) {

        return {
            link: function($scope, el, attr) {
                var bar = $("#search-progress-bar"),
                    parentBar = bar.parent();

                function addEventHandler(obj, evt, handler) {
                    if (obj.addEventListener) {
                        // W3C method
                        obj.addEventListener(evt, handler, false);
                    } else if (obj.attachEvent) {
                        // IE method.
                        obj.attachEvent('on' + evt, handler);
                    } else {
                        // Old school method.-
                        obj['on' + evt] = handler;
                    }
                }

                function cancel(e) {
                    if (e.preventDefault) { e.preventDefault(); }
                    return false;
                }

                if (attr.ngFileUpload == 'searchAudio') {

                    var drop = el[0];
                    var parent = el.parent();
                    // Tells the browser that we *can* drop on this target
                    addEventHandler(drop, 'mouseup', function(e){
                         e = e || window.event; // get window.event if e argument missing (in IE)
                        if (e.preventDefault) { e.preventDefault(); } // stops the browser from redirecting off to the mp3.
                    })
                    addEventHandler(drop, 'dragover', cancel);
                    addEventHandler(drop, 'dragleave',function(e){
                        angular.element('#drop').css("border","1px solid #797979");
                    });
                    addEventHandler(drop, 'dragover', function(e){
                        angular.element("#drop").css('border','2px solid rgba(255,255,255,1)');
                    });
                    addEventHandler(drop, 'dragenter', cancel);
                    addEventHandler(drop, 'drop', function(e) {
                        e.preventDefault();

                        angular.element('#drop').css("border","1px solid #797979");

                        var dt = e.dataTransfer;
                        var file = dt.files;
                        $scope.currentFile = file;
                        //now we have the file on the browser, we need to analyse it
                        if (file[0].type == 'audio/mpeg' || file[0].type == 'audio/wav' || file[0].type == 'audio/mp3') {

                            $scope.fileName = file[0].name;
                            $scope.fd = file[0];
                            angular.element($('#drop')).val($scope.fileName);

                            //we send directly the data to the query
                            fileStorage.removeFile();
                            if ($scope.fileName != undefined) {
                                //we remove the query from the search selectize
                                $("#researchBarId").empty();
                                var selectize = $("#researchBarId")[0].selectize;
                                selectize.lastQuery = "";
                                selectize.lastValue = "";
                                $scope.request = null;
                                selectize.setTextboxValue(selectize.lastQuery);

                                $localStorage.audioF = $scope.fd;
                                $stateParams = {} // on vide les autres paramètres

                                fileStorage.stockFile(file[0]);

                                $scope.removeAllPreviousTag();

                            }
                        } else {
                            alert(file[0].type)
                            file = null
                            $scope.fileName = null
                            $scope.fd = null
                        }

                        toolService.updateProgressBar(file,el,bar);

                    });
                } else {
                    el.bind("click", function(e) {
                        if ($localStorage.currentUser)
                            $scope.sendFile($scope.file);
                    });
                }
            }
        }

    });

Je ne suis pas l'auteur de se composant mais en cas de question je peux vous éclairer si besoin ...
Merci beaucoup pour votre futur aide

2 réponses


Salut,

Une fois le fichier dropé, tu l'upload ? Est-ce que tu penses à passer ton model à null ?

Polaris
Auteur

Pas directement il est stocké dans le local storage.  Oui je reset bien le modèle j'ai vérifié.  C'est bizarre mon drag ans drop c'est comme si les évents n'existait plus