Метод File OnChange при вызове во второй раз принимает предыдущий файл, который выбирается первый раз - PullRequest
Новая
       33

Метод File OnChange при вызове во второй раз принимает предыдущий файл, который выбирается первый раз

0 голосов
/ 01 марта 2020

Я использую пакет Eel python, который помогает мне интегрировать Html / CSS / js с python, поэтому я динамически генерирую Html теги с помощью JS на основе ввода в файл python в основном это чатбот, и пользовательский интерфейс этого чатбота создается с помощью Html / js

main. js, который динамически создает теги 

eel.expose(selectPDF);
function selectPDF(moduleSelection){ // moduleSelection is coming from python
    console.log("select pdf called")
    var DemoDom = document.createElement("input");
    DemoDom.setAttribute('type','file'); //creating tag for input file
    DemoDom.setAttribute('name','myfile');
    DemoDom.id = "agenttext";
    DemoDom.setAttribute('class','selectButton');
    DemoDom.setAttribute('multiple','multiple');
    DemoDom.setAttribute('onchange','showname("'+moduleSelection+'")')
    chatBox.appendChild(DemoDom);

}
eel.expose(showname); //this is eel package syntax
function showname(moduleSelection){
    console.log("i am here")
    var name = document.getElementsByClassName('selectButton');
    var fileList = [];
    // if only one file is selected do this
    if(name[0].files.length === 1){
        console.log("File name: ", name[0].files[0].name)
        var temp = name[0].files[0].name;
        eel.getFileName(temp,moduleSelection); // passing file to python function getFileName
    }
    else{
        for (var i = 0; i < name[0].files.length; i++) {
            console.log("File name for loop: ", name[0].files[i].name)
           fileList.push(name[0].files[i].name); // push all file to list 
        }
        eel.getFileName(fileList,moduleSelection); // passing filelist to python function getFileName
    }
    return
}

Теперь, когда я вызываю selectPDF () в первый раз он создает тэг ввода и метод onchange вызова, все работает нормально

, но теперь, когда я вызываю его во второй раз, js снова создает тэг ввода и вызывает метод onchange, и он берет предыдущий файл, а не новый, который я хочу выбрать

см. изображение

Ignore red errors

ПРОСТО ВИДЕТЬ ИМЯ ФАЙЛА: image.png

игнорировать все другие красные ошибки

, как вы можете видеть на изображении, когда я в первый раз вызываю «изображение в текст», он работает нормально, создает DOM и продолжает работу, но когда второй Когда я вызываю «изображение в текст», он создает DOM, но выбирает предыдущий файл image.pn g вместо Sample.pdf

Вы можете увидеть имя файла консоли, для которого следует выбрать Sample.pdf вместо image.png при повторном вызове

1 Ответ

1 голос
/ 01 марта 2020

Похоже, ваше приложение выполняет этот код каждый раз 

if(name[0].files.length === 1){
        console.log("File name: ", name[0].files[0].name)
        var temp = name[0].files[0].name;
        eel.getFileName(temp,moduleSelection); // passing file to python function getFileName
    }

1. Выбор индекса

Есть ли причина, по которой вы выбираете первый индекс из name[0] каждый раз? Может быть, просто проверка на name.files.length будет работать?

2. Если / else алгоритм

Если вы немного лучше структурируете свой код, он может удивительно работать лучше. Попробуйте использовать метод Javascript Array.forEach () вместо вашего l oop. Это выглядело бы примерно так 

function showname(moduleSelection) {
    console.log("i am here");
    var files = document.getElementsByClassName('selectButton');

    var fileList = [];
    if (files.length > 0) {
        files.forEach(file => {
            console.log("File name: ", file.files[0].name);
            fileList.push(file.files[0].name);
        })
        eel.getFileName(fileList, moduleSelection);
    }
    return;
}

Я надеюсь, что это будет возможно надеюсь помочь!

РЕДАКТИРОВАТЬ:

Если вы хотите удалить предыдущие файлы после вызова файлов, вам нужно будет пометить текущие выбранные файлы на document.getElementsByClassName('selectButton') как , уже названные .

Вы можете сделать это по-разному, например, можно изменить имя класса с selectButton на selectButtonDone после того, как имя файла было помещено в массив fileList[].

Вы можете сделать это, в частности, выполнив file.className = 'selectButtonDone'; в конце функции files.forEach().

...