Form plugin disable Dropzone

Archive
1

I am using the Form Plugin which works quite well except the Dropzone feature which seems not work in my form. It does not do anything nor provides a button or clickable area. (see image attached) Dropzone .

However I want to use the Jquery.Filer Plugin which I already tested outside of Grav and it works well. So I basically only need to attach an ID to the file field and the jQuery Plugin will recognize it and provide the functionality. But I need to disable Dropzone first. Any idea how to do this ?

2

You can override any form field code (any Twig actually) by copying its Twig from the Form plugin to your theme, in the templates/forms folder.

3

Thanks - yes I already did that but I was wondering if not the Dropzone functionality is somehow tied to the form processing / validation and I don’t want to loose any core functionality of the form plugin itself.

4

Another one related to Dropzone - how can I modify the options for Dropzone? I found the main.js in the form/app folder but changes seem not to apply. Is there a way to override the options in my own custom javascript file? (for example I want to include a remove button).

5

You really can’t configure it to that degree without overriding the default field and modifying it with your own changes.

6

Thanks for letting me know. Then i have no choice other than replacing it with my own File Upload (Jquery Filer). Cheers

7

Hi there - having a bit trouble disabling the Dropzone functionality and replace it with another one (since Dropzone seems not to allow modifying the preview template. Its somehow baked in to your form.min.js).
Anyway I was trying to get rid of the functionality by stripping down the file.html.twig to only allow basic multiple files (see example below).

{% set defaults = config.plugins.form %}
{% set files = defaults.files|merge(field|default([])) %}
{% set limit = not field.multiple ? 1 : files.limit %}

{% block input %}
    {% set page_can_upload = exists or (type == 'page' and not exists and not (field.destination starts with '@self' or field.destination starts with 'self@')) %}
    {% set settings = {name: field.name, paramName: (scope ~ field.name)|fieldName ~ (files.multiple ? '[]' : ''), limit: limit, filesize: files.filesize, accept: files.accept} %}
    
    <div class="form-input-wrapper files-upload form-input-file {{ field.size }}" data-grav-file-settings="{{ settings|json_encode|e('html_attr') }}">
        <input
                {# required attribute  structures #}
                {% block input_attributes %}
                    type="file"
                    name="{{ (scope ~ field.name)|fieldName ~ (files.multiple ? '[]' : '') }}"
                    {% if files.multiple %}multiple="multiple"{% endif %}
                    {% if files.accept %}accept="{{ files.accept|join(',') }}"{% endif %}
                    {% if field.disabled %}disabled="disabled"{% endif %}
                    {% if field.random_name %}random="true"{% endif %}
                    {{ parent() }}
                {% endblock %}
        />
    </div>
{% endblock %}

However when I try to access the data now (with my own plugin), it seems that the files are not processed by the form plugin anymore. I can get their values by accessing $_FILES directly but than I miss all the validation and message stuff provided by the form plugin. It somehow does not get included into the data array which seems to hold all formular data. Can you please pinch me in the right direction how to solve this problem?

Here is a little code snippet:

<?php
namespace Grav\Plugin;

use Grav\Common\Data\Data;
use Grav\Common\Grav;
use Grav\Common\Plugin;
use Grav\Common\Uri;
use Grav\Common\Utils;
use RocketTheme\Toolbox\Event\Event;

class MyPlugin extends Plugin{
    
    public static function getSubscribedEvents()    {
        return [
            'onPluginsInitialized' => ['onPluginsInitialized', 0]
        ];
    }

    public function onPluginsInitialized()
    {
        if ($this->isAdmin()) {
            $this->active = false;
            return;
        }

        $this->myplugin_config = (array) $this->config->get('plugins.myplugin');

        $this->enable([
            'onFormProcessed' => ['onFormProcessed', 0]
        ]);
    }

    public function onFormProcessed(Event $event){
        $form = $event['form'];
        $action = $event['action'];
        $params = $event['params'];

        if (!$this->active) {
            return;
        }

        switch ($action) {
            case 'myaction':
                if(isset($_POST)) {  
                    $data = array();
                    $domain = 'somedomain.com';
                    $domain_host = $this->myplugin_config['host'];
                    $upload_folder = $this->myplugin_config['upload_folder'];

                    $formdata = $form->value()->toArray();
                    dump($formdata) // gives me everything but not the files

Thanks in advance for your help.