AngularJS - custom directive na input type=file

Question

Cześć!

w AngularJS mam taki dziwny problem z przyciskiem "wybierz plik". Jak wybieram plik o tej samej nazwie po raz drugi i kolejny, to nie może się on załadować do przeglądarki do pamięci. Ogólnie widzę że zmiana nazwy pliku wyzwala jego upload, bo występuje wtedy changeEvent, a chciałbym żeby ładował plik za każdym razem, kiedy zamykane jest okienko.

Ktoś tu może jest przekozakiem z AngularJS/javascriptu i powie gdzie leży problem?

Poniżej kod....

html

<input type="file" name="file" fileread="$ctrl.file" multiple="multiple" class="ng-isolate-scope">

fileupload.js

var main = angular.module('main');

main.directive("fileread", [function () {
    return {
        restrict: 'A',
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.fileread = [];
                for (let i = 0; i < changeEvent.target.files.length; i++) {
                    scope.fileread.push({ fileName: changeEvent.target.files[i].name });
                }

                for (let i = 0; i < changeEvent.target.files.length; i++) {
                    let reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(() => {
                            scope.fileread[i].content = loadEvent.target.result.split(";base64,").pop();
                        });
                    };
                    reader.readAsDataURL(changeEvent.target.files[i]);
                }
            });
        }
    };
}]);

 

Z góry dziękuję za pomoc!
 

Comments

Próbowałeś podpiąć się na input event (zamiast change)?

---

Z tego co obserwuję to zastąpienie change na input nie zmienia działania samego mechanizmu :(

main.directive("fileread", [function () {
    return {
        restrict: 'A',
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
            element.bind("input", function (inputEvent) {
                scope.fileread = [];
                for (let i = 0; i < inputEvent.target.files.length; i++) {
                    scope.fileread.push({ fileName: inputEvent.target.files[i].name });
                }

                for (let i = 0; i < inputEvent.target.files.length; i++) {
                    let reader = new FileReader();
                    reader.onload = function (loadEvent) {
                        scope.$apply(() => {
                            scope.fileread[i].content = loadEvent.target.result.split(";base64,").pop();
                        });
                    };
                    reader.readAsDataURL(inputEvent.target.files[i]);
                }
            });
        }
    };
}]);

Answer 1

Wygląda na to, że plik nie jest ładowany do pamięci przeglądarki z powodu przypisywania do scope.fileread pustej tablicy za każdym razem, gdy zmieniasz plik. To powoduje usunięcie poprzednio wybranych plików z pamięci przeglądarki. Aby rozwiązać ten problem, możesz usunąć linię scope.fileread = []; i zmienić pętlę na:
 

for (let i = 0; i < changeEvent.target.files.length; i++) {
    scope.fileread.push({ fileName: changeEvent.target.files[i].name });
    let reader = new FileReader();
    reader.onload = function (loadEvent) {
        scope.$apply(() => {
            scope.fileread[i].content = loadEvent.target.result.split(";base64,").pop();
        });
    };
    reader.readAsDataURL(changeEvent.target.files[i]);
}

To powinno pozwolić zachować już wczytane pliki w pamięci przeglądarki i dodawać kolejne pliki do listy.

Comments

Dzięki za podpowiedź! Generalnie pliki ładują się do pamięci, bo w inpucie mamy atrybut: multiple="multiple", więc wybieramy wiele plików za każdym razem, więc tutaj raczej nie musiałem nic zmieniać. Ogólnie udało się rozwiązać problem, ale to opisze może w odpowiedzi do pytania :)

Answer 2

Problem udało się rozwiązać na podstawie dwóch spostrzeżeń.

• event "click" wywołujemy przed "change" na inputcie,
• przez każdy event możemy odwołać się do konkretnego inputa przez "event.target".

Okazało się, że wystarczyło po każdym kliknięciu usuwać value z inputa, żeby każdy wskazany plik był tak jakby nowy. W skrócie trzeba było resetować aktualny stan inputa, żeby wywołał się change. Pewnie są lepsze sposoby na  to rozwiązanie, ale cóż...

<input type="file" name="file" fileread="$ctrl.file" ng-click="$ctrl.cleanFileCache($event)" multiple="multiple" />

    $ctrl.cleanFileCache = function (clickEvent) {
        if (clickEvent.target.files.length > 0) {
            clickEvent.target.value = null;
            $ctrl.file = [];
        }
    };