Стандартный диалог выбора файлов в веб интерфейсе
-
Меня
задолб.. спрашивают часто на счёт стандартного диалога выбора файлов в веб интерфейсе. По этому приведу пример реализации, чтобы не пересказывать всем одно и тоже.А ещё @support запланировал немного изменить диалог выбора файла:
Есть несколько причин, почему @support сделал кастомную реализацию выбора файла:
@support said in Конструктор интерфейса.:
В следующей версии интерфейс можно будет запускать только на том же пк, где находится бот. Но потом его можно будет запускать отдельно, на любом устройстве, в том числе и на мобильном.
Именно для этого был сделан свой диалог открытия файла, чтобы использовать файл на сервере, где работает БАС, а не там, где запущен интерфейс.
БАС и дальше будет развиваться в этом направлении, будут еще несколько компонентов, которые работают в браузере отдельно от софта, например, планировщик, управление фермой.Так же браузер не позволяет получить путь к файлу. Поэтому придется пересылать в BAS содержание файла. Это не очень удобно.
Вместо этого используется своя реализация, но вы можете использовать и системный диалог, для этого его просто нужно прописать в коде. Здесь пример, как это можно сделать https://wiki.bablosoft.com/web-interface/#/codeeditor?id=adding-custom-components
По этому единственный способ передать содержимое файла в скрипт через стандартный диалог выбора файла, это прочитать файл в веб интерфейсе через File API и перенести содержимое в ресурс с типом "строка". Вариант с передачей содержимого файла через глобальную переменную или базу я расскажу в следующий раз.
Для начала создадим проект и добавим в него ресурс file с типом "строка"
выгрузим проект на сервер bablosoft и сгенерируем интерфейс скрипту:
Далее надо создать простой input для выбора файла в любом удобном для вас месте:
<input type="file"/>
чтобы пользователь не изменял содержимое файла в строке, спрячем элемент с ресурсом:
<div class="table-row" hidden="true">
Затем находим строку /////Events в окне Javascript и создаём обработчик события с чтением файла в переменную:
$("input:file").change(function(){ var reader = new FileReader(); reader.onload = function (e) { res = e.target.result; }; reader.readAsText(this.files[0]); }) });
следом находим функцию GetResourceValue, она идёт тремя строками ниже, и добавляем в неё условие для ресурса file
var res = ""//объявляем переменную чтобы небыло ошибки, если пользователь не укажет файл и запустит скрипт. function GetResourceValue(ResourceName){ if(ResourceName == "file"){ return res } return GetValue(ResourceName) }
В скрипте всего два действия:
Вот так выглядит результат:
Самый простой вариант применения, это в функции OnApplicationStart распарсить строку по переносу строк
\r\n
в массив и перенести его в локальный ресурс, чтобы в скрипте использовать как обычный ресурс:
-
Не знаю для чего может понадобится выгрузка нескольких файлов в скрипт через стандартный диалог выбора файла, но для этого надо будет добавить в input атрибут multiple:
<input type="file" multiple/>
изменить обработчик события для input:
$("input:file").change(function () { for (var i = 0; i < this.files.length; i++) { var reader = new FileReader(); reader.onload = function (e) { res = res + e.target.result + "\r\n"; } reader.readAsText(this.files[i]); } })
функция GetResourceValue() остаётся такой же:
var res = "" function GetResourceValue(ResourceName){ if(ResourceName == "file"){ return res } return GetValue(ResourceName) }
результат:
Экспортированный интерфейс
-
А вот загружать файлы в скрипт через Drag and drop выглядит уже по приличнее:
html
<div id="drop_file" align="center" >Перетащите сюда файлы</div>
css
#drop_file { border: 2px dashed #ccc; border-radius: 20px; width: 280px; font-family: sans-serif; margin: 20px auto; padding: 20px; } #drop_file.highlight { border-color: purple; }
js
function handleFileSelect(evt) { evt.stopPropagation(); evt.preventDefault(); var files = evt.dataTransfer.files; var output = []; for (var i = 0, f; f = files[i]; i++) { output.push(escape(f.name)); var reader = new FileReader(); reader.onload = function (e) { res = res + e.target.result + "\r\n"; } reader.readAsText(f); } $("#drop_file").text(output.join(', ')) } function handleDragOver(evt) { $("#drop_file").addClass('highlight') evt.stopPropagation(); evt.preventDefault(); evt.dataTransfer.dropEffect = 'copy'; } var drop_file= document.getElementById('drop_file'); drop_file.addEventListener('dragover', handleDragOver, false); drop_file.addEventListener('drop', handleFileSelect, false);
Без минимального оформления можно было сделать, но выглядело это всё ужасно. А так, хоть готовый вариант для ленивых
:D
Результат:
Экспортированный интерфейс
-
Кастомный интерфейс по умолчанию имеет uikit, благодаря которому можно изменять вид формы ввода файла так как вы захотите, просто поместив <input type="file"> в контейнер с атрибутом uk-form-custom подробнее в документации ukit
Пример:
<div uk-form-custom="target: true"> <input type="file"> <input class="uk-input uk-form-width-medium" type="text" placeholder="Select file" disabled> <button class="uk-button uk-button-default" type="button">Select</button> </div>
Результат:
При нажатии на поле или кнопку открывается окно с выбором файла
-
Drag and drop тоже там есть
https://getuikit.com/docs/upload#drop-area
-
Возможно ли с помощью стандартного диалога указать путь до папки, (например куда будут сохраняться файлы)?!
-
@boltzzzz said in Стандартный диалог выбора файлов в веб интерфейсе:
Возможно ли с помощью стандартного диалога указать путь до папки, (например куда будут сохраняться файлы)?!
Нет, я же в первом сообщении об этом писал:
возможно только указать путь в виде строки
-
Объясните пожалуйста что и куда нужно вставить в этом коде что бы список начал подхватываться (пытаюсь настроить стандартный диалог выбора файла)* , у меня не получается...
В скрипте который описывается тут (создал отдельно)* - работает
Основной код моего скрипта который не могу настроить
<div uk-alert="" data-resource-name="Добавить файл5" data-resource-type="LinesFromFile" data-visibility-condition-value="Подписаться по списку" data-visibility-condition-variable="Выбрать способ" data-default-value=""> <div class="resource-label">Что будем делать</div> <div class="server-side-file-dialog" id="iepqkn"> <input type="text" placeholder="Path to file" validation-file="true" tab-index="3" value="" class="uk-input ui-internal" id="iascfg"> <button class="uk-button uk-button-default ui-internal" id="i12vv2"> <span uk-icon="file-edit"></span> </button> </div> </div>
в JS в Events . указал как предлогается выше
/////Events $("input:file").change(function() { var reader = new FileReader(); reader.onload = function(e) { res = e.target.result; }; reader.readAsText(this.files[0]); }) }); var res /////Resource values are obtained through this function when hitting run button, you can change it. /////For example, you can edit value entered by user, make custom validation, or replace resource system compleatelly function GetResourceValue(ResourceName) { if (ResourceName == "file") { return res } return GetValue(ResourceName) }
Пробовал изменять свой основной код подобными вариациями
<div uk-alert="" uk-form-custom="target: true" data-resource-name="Добавить файл6" data-resource-type="LinesFromFile" data-visibility-condition-value="Лайкнуть по списку" data-visibility-condition-variable="Выбрать способ" data-default-value=""> <input type="file"> <input class="uk-input uk-form-width-large" type="text" placeholder="Выбрать файл" disabled> <button class="uk-button uk-button-default">Нажать</button> </div>
К сожалению не работает, подскажите пожалуйста как сделать?
-
@boltzzzz said in Стандартный диалог выбора файлов в веб интерфейсе:
Объясните пожалуйста что и куда нужно вставить в этом коде что бы список начал подхватываться (пытаюсь настроить стандартный диалог выбора файла)* , у меня не получается...
В скрипте который описывается тут (создал отдельно)* - работает
К сожалению не работает, подскажите пожалуйста как сделать?В функции GetResourceValue() в условии нужно указывать название своего ресурса:
function GetResourceValue(ResourceName) { if (ResourceName == "имя своего ресурса") { return res } return GetValue(ResourceName) }
Так же тип ресурса должен быть "строка" а не "из файла" (data-resource-type="LinesFromFile")
-
@fox
HTML<div uk-alert="" uk-form-custom="target: true" data-resource-name="Добавить файл6" data-resource-type="FixedString" data-visibility-condition-value="Лайкнуть по списку" data-visibility-condition-variable="Выбрать способ" data-default-value=""> <input type="file"> <input type="text" placeholder="Выбрать файл" disabled="" class="uk-input uk-form-width-large"> <button class="uk-button uk-button-default">Нажать</button> </div>
JS
/////Events $("input:file").change(function() { var reader = new FileReader(); reader.onload = function(e) { res = e.target.result; }; reader.readAsText(this.files[0]); }) }); var res /////Resource values are obtained through this function when hitting run button, you can change it. /////For example, you can edit value entered by user, make custom validation, or replace resource system compleatelly function GetResourceValue(ResourceName) { if (ResourceName == "Добавить файл6") { return res } return GetValue(ResourceName)
Всё равно не подхватывает, что сделал: заменил на строку (data-resource-type="FixedString"), добавил имя ресурса в JS
-
<div uk-alert="" uk-form-custom="target: true" data-visibility-condition-value="Лайкнуть по списку" data-visibility-condition-variable="Выбрать способ" data-default-value=""> <input type="file"> <input type="text" placeholder="Выбрать файл" disabled="" class="uk-input uk-form-width-large"> <button class="uk-button uk-button-default">Нажать</button> </div> <div uk-alert="" data-resource-name="Добавить файл6" data-resource-type="FixedString" data-default-value="" hidden="true"> <input type="text" placeholder="" value="" class="uk-input"> </div>
-
@ghostz Способ не работает(
-
@boltzzzz said in Стандартный диалог выбора файлов в веб интерфейсе:
@ghostz Способ не работает(
Способ работает, скорее всего вы допустили где то ошибку. Хоть и разжевано всё с примерами, скриншотами и готовыми вариантами.
Что бы ещё 12 дней не ждать, сгенерируйте новый интерфейс для своего скрипта
затем экспортируйте его в файл
и выложите сюда
-
Drag and drop выглядит симпатично. Вообще стандартный обозреватель файлов хоть на вид и минималистичен и вписывается в любой дизайн, очень неудобен в обращении. Прочти я эту статью годиком раньше, у меня бы не кипела голова в поисках решений. Хотя, как уже правильно ответили выше, решение очень простое, всего лишь нужно поиграться с uikit.