0

Всех приветствую. Пишу веб-приложение на Flask. Я хочу сделать так, чтобы пользователю при нажатии на ссылку (или другую сущность) сначала было предложено выбрать файл из его файловой системы, затем после того, как он его выберет, произошло перенаправление по заданному url, причём так, чтобы я мог в дальнейшем работать с этим файлом на открывшейся странице (кажется, просто так файлы между страницами Flask не позволяет передавать и необходимо будет сначала этот файл сохранить на сервере?).

Я попробовал так:

Внутрь ссылки поместил input и label для него. Затем скрыл отображение input через css, чтобы при нажатии на текст тега label, открылось окно, где пользователь может выбрать интересующий файл. К самой же ссылки я привязал url, на который хочу перенаправить пользователя (с файлом). Однако после того, как файл выбран, перенаправления не происходит. Я так полагаю, label "закрывает" собой саму ссылку.

index.html

...
<a class="button predict_button" href="{{ url_for('on_predict')}}">
    <input type="file" name=dataset accept=".csv" id="file">
    <label for="file">predict</label>
</a>
...

Также я попробовал так, однако теперь ссылка "закрывает" label и происходит только перенаправление без возможности выбора файла.

...
<input type="file" name=dataset accept=".csv" id="file">
    <label for="file">
        <a class="button predict_button" href="{{ url_for('on_predict')}}">
            predict
        </a>
    </label>
...

Таким образом, мой вопрос заключается в том, как реализовать задумку и можно ли это сделать только средствами Flask без использования javascript? Если без костылей не получится, то как сделать через javascript, я бы хотел знать.

Спасибо.

1
  • Это делается на JS, без костылей. Делать это на HTML/CSS - это и правда костыль.
    – ISD
    27 дек 2020 в 10:21

1 ответ 1

1

Почему код первого варианта не работает?

Когда кликают по некоторому элементу в HTML, то создаётся событие, которое "всплывает" вверх по DOM. То есть, в такой структуре:

html
  head
    title
  body
    main
      div
        button.btn

Событие клика на .btn сначала запустится на button, затем на div, затем на main, body и в конце на html.
Однако, программно можно остановить событие на каком-то элементе (скажем, на main). Тогда событие дойдёт до main, а body и html не заметят его. То же самое происходит и с label: событие клика по нему дальше не идёт.

Что не так со вторым вариантом?

Тег a сразу перекидывает на другую страницу.

Как это сделать на JS?

<form id="form" method="POST" action="{{ url_for('on_predict')}}">
    <input 
        type="file"
        name="dataset"
        accept=".csv"
        id="file">
    <label for="file">predict</label>
</form>
</form>
const form = document.querySelector('#form');
const input = document.querySelector('#file');

input.addEventListener('change', function() { // Как только значение поля ввода меняется
    form.submit(); // Отсылаем форму
})

Файл в таком случае уйдёт через POST на нужный URL.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.