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



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



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


  • administrators

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

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

    Нет, я же в первом сообщении об этом писал:
    0_1560710785726_8ca701c9-b28c-4868-8288-0dcbd877d4ee-изображение.png

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



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

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

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

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

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


  • administrators

    @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



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


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


  • administrators

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

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

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

    Что бы ещё 12 дней не ждать, сгенерируйте новый интерфейс для своего скрипта
    0_1561788209227_ecedc5b8-a913-4f08-800c-131c3b75a268-изображение.png

    затем экспортируйте его в файл
    0_1561788291793_ca288533-107f-49ee-9f5c-25637dfc1de7-изображение.png

    и выложите сюда
    0_1561788332245_b2ee1022-1b3a-4ded-b1d9-608220126b74-изображение.png




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