dropzone.html.twig

{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'dropzone',
        eyebrowText: 'Styled Upload Zone'
    } %}
        {% block title_header %}
            Native Upload Dropzone <em>with style</em>
        {% endblock %}

        {% block sub_content %}
            Upgrade your upload field to a stylized "Dropzone"
            with file previews.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock filename="src/Form/DropzoneForm.php" />
{% endblock %}

{% block code_block_right %}
    <twig:CodeBlock
        filename="templates/ux_packages/dropzone.html.twig"
        targetTwigBlock="demo_content"
    />
{% endblock %}

{% block demo_title %}UX Dropzone{% endblock %}

{% block demo_content %}
    {% for message in app.flashes('dropzone_success') %}
        <div class="alert alert-success" data-turbo-cache="false">{{ message }}</div>
    {% endfor %}

    {{ form_start(form) }}
        {{ form_widget(form) }}
        <button type="submit" class="btn btn-primary">Upload it!</button>
    {{ form_end(form) }}

    <div class="d-flex eyebrows pt-5">
        <div>NOTE: this library does not integrate with the Dropzone.js JavaScript library.</div>
    </div>
{% endblock %}