Как установить ограничение на количество принимаемых файлов и ограничение размера файла в DropzoneJS - PullRequest
Новая
       87

Как установить ограничение на количество принимаемых файлов и ограничение размера файла в DropzoneJS

0 голосов
/ 08 мая 2020

У меня проблема с настройкой конфигурации Dropzone JS, в настоящее время в журнале консоли отображается Dropzone is not defined. Я действительно не понимаю, почему возникает эта ошибка.

Я нашел решение, которое мне нужно, чтобы использовать функцию window.onload да, Dropzone не определен, решено. Однако конфигурация, которую я установил для параметров Dropzone, не работает, даже если ошибки не обнаружены.

Я покажу вам, ребята, мой пример сценария, который я использовал для настройки принимаемых файлов и ограничения загрузки изображений.

Версия Dropzone: 5.7.0 

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/dropzone.css"/>

Скрипт: 

Dropzone.dropzone = {
    acceptedFiles : 'image/*',
};

HTML: 

@extends('layouts.app')

@section('content')
<div style="margin-top:80px;">
    <div class="container">
        <h4>What are you listing today?</h4>
        <br/>
        <div class="row">
            <div class="col-md-4">
                <form action="/BusinessCenterAccount/upload_post_setup" class="dropzone" id="dropzone">
                    @csrf
                </form>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header"></div>
                    <div class="card-body"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Вывод конфигурации опций:

Output

Как видите, я добавляю acceptedFiles только все изображения, однако я могу получить доступ к папкам и другим типам файлов.

Ответы [ 2 ]

0 голосов
/ 10 мая 2020

Чтобы решить мою проблему, я просто изменил свою версию dropzone cdn js на 5.4.0 

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">
0 голосов
/ 09 мая 2020

Ваши параметры фактически не применяются. Dropzone.dropzone ничего не делает и не нацелен на вашу форму.

Из документов :

... если у вас просто HTML элементы с классом dropzone, то вы не создаете программные экземпляры объектов, поэтому вам нужно где-то сохранить конфигурацию, чтобы Dropzone знал, как настраивать зоны перетаскивания при их создании.

Это делается с помощью Dropzone.options объект.

Пример показывает: 

// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
...

Глядя на ваш HTML, ваша форма имеет ID dropzone. Итак, чтобы использовать синтаксис, показанный в примере, вы должны сделать: 

Dropzone.options.dropzone = {
    acceptedFiles : 'image/*',
};

Рабочий JSFiddle . А вот скриншот этого JSFiddle, на котором показаны только файлы изображений, доступные для выбора:

введите описание изображения здесь

...