Стандартный диалог выбора файлов в веб интерфейсе

[Fox]

А вот загружать файлы в скрипт через 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

Результат:

Экспортированный интерфейс

[GhostZ]

Кастомный интерфейс по умолчанию имеет 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>

Результат:


При нажатии на поле или кнопку открывается окно с выбором файла

[A Former User]

Drag and drop тоже там есть
https://getuikit.com/docs/upload#drop-area

[boltzzzz]

Возможно ли с помощью стандартного диалога указать путь до папки, (например куда будут сохраняться файлы)?!

[Fox]

@boltzzzz said in Стандартный диалог выбора файлов в веб интерфейсе:

Возможно ли с помощью стандартного диалога указать путь до папки, (например куда будут сохраняться файлы)?!

Нет, я же в первом сообщении об этом писал:

возможно только указать путь в виде строки

[boltzzzz]

Объясните пожалуйста что и куда нужно вставить в этом коде что бы список начал подхватываться (пытаюсь настроить стандартный диалог выбора файла)* , у меня не получается...

В скрипте который описывается тут (создал отдельно)* - работает

Основной код моего скрипта который не могу настроить

										<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>

К сожалению не работает, подскажите пожалуйста как сделать?

[Fox]

@boltzzzz said in Стандартный диалог выбора файлов в веб интерфейсе:

Объясните пожалуйста что и куда нужно вставить в этом коде что бы список начал подхватываться (пытаюсь настроить стандартный диалог выбора файла)* , у меня не получается...

В скрипте который описывается тут (создал отдельно)* - работает
К сожалению не работает, подскажите пожалуйста как сделать?

В функции GetResourceValue() в условии нужно указывать название своего ресурса:

function GetResourceValue(ResourceName) {
    if (ResourceName == "имя своего ресурса") {
        return res
    }
    return GetValue(ResourceName)
}

Так же тип ресурса должен быть "строка" а не "из файла" (data-resource-type="LinesFromFile")

[boltzzzz]

@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

[GhostZ]

@boltzzzz

<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>

[boltzzzz]

@ghostz Способ не работает(

[Fox]

@boltzzzz said in Стандартный диалог выбора файлов в веб интерфейсе:

@ghostz Способ не работает(

Способ работает, скорее всего вы допустили где то ошибку. Хоть и разжевано всё с примерами, скриншотами и готовыми вариантами.

Что бы ещё 12 дней не ждать, сгенерируйте новый интерфейс для своего скрипта

затем экспортируйте его в файл

и выложите сюда

---

[olegtut]

Drag and drop выглядит симпатично. Вообще стандартный обозреватель файлов хоть на вид и минималистичен и вписывается в любой дизайн, очень неудобен в обращении. Прочти я эту статью годиком раньше, у меня бы не кипела голова в поисках решений. Хотя, как уже правильно ответили выше, решение очень простое, всего лишь нужно поиграться с uikit.