heimrichhannot/contao-multifileupload-bundle

Contao front end widget that provides dropzonejs.com functionality.

, _(*1)

Contao Multi File Upload Bundle

Contao front end widget that provides dropzonejs.com functionality to both back and front end., _(*2)

, _(*3)

Features

• javascript written in native javascript
• support for jquery ajaxComplete and mootools ajax_change events
• support for Encore Bundle
• support for Formhybrid Compatibility Bundle Bundle formhybrid_ajax_complete event

Setup

Install

1. Install heimrichhannot/contao-multifileupload-bundle via composer or contao manager, _(*4)

   composer require heimrichhannot/contao-multifileupload-bundle
   

2. Update your database, _(*5)

Usage

Create a widget of inputType multifileupload. It is usable in the contao backend or in the contao frontend in combination with Formhybrid., _(*6)

$GLOBALS['TL_DCA']['tl_example']['fields']['example_upload'] = [
    'inputType' => 'multifileupload',
    'eval'      => [
        'extensions'     => string, # A comma-seperated list of allowed file types (e.g. "jpg,png"). Default: 'Config::get('uploadTypes')'
        'fieldType'      => 'radio'|'checkbox', # Use radio for single file upload, checkbox for multi file upload
        'uploadFolder'   => array|string|callable, # Set the folder where uploaded files are stored after submission. Can be a static string (e.g. 'files/upload') or a callback function.
        'maxFiles'       => int, # Maximum number of files that can be uploaded. Works only if multi file upload is allowed (see fieldType). Default: 10
        'maxUploadSize'  => int|string, # Maximum upload size in byte, KiB ("100K"), MiB ("4M") or GiB ("1G"). Default: minimum from Config::get('maxFileSize') and ini_get('upload_max_filesize')
        'minImageWidth'  => int, # Minimum image width in pixel. Default: 0
        'minImageHeight' => int, # Minimum image height in pixel. Default: 0
        'maxImageWidth'  => int, # Maximum image width in pixel. Default: Config::get('imageWidth')
        'maxImageHeight' => int, # Maximum image height in pixel. Default: Config::get('imageHeight')
        'labels'         => [ # Optional. Custom text that will be placed in the dropzone field. Typically a reference to the global language array.
            'head' => string,
            'body' => string ,
        ],
        'skipDeleteAfterSubmit' => boolean, # Prevent file removal from filesystem. Default false
    ],
    'uploadPathCallback' => [[MyUploadCallback::class, 'onUploadPathCallback']],
    'validateUploadCallback' => [[MyUploadCallback::class, 'onValidateUploadCallback']],
    'sql'       => "blob NULL",
];

Example for simple single image file upload:, _(*7)

$GLOBALS['TL_DCA']['tl_example']['fields']['example_upload'] = [
    'inputType' => 'multifileupload',
    'eval'      => [
        'tl_class'      => 'clr',
        'extensions'    => Config::get('validImageTypes'),
        'fieldType'     => 'radio',
        'uploadFolder'        => 'files/uploads'
    ],
    'sql'       => "blob NULL",
];

Example for simple multiple image file upload:, _(*8)

$GLOBALS['TL_DCA']['tl_example']['fields']['example_upload'] = [
    'inputType' => 'multifileupload',
    'eval'      => [
        'tl_class'       => 'clr',
        'extensions'     => Config::get('validImageTypes'),
        'fieldType'      => 'checkbox',
        'uploadFolder'   => 'files/uploads'
    ],
    'sql'       => "blob NULL",
];

Example for multi image upload with additional config (maximum 5 files with custom image size):, _(*9)

$GLOBALS['TL_DCA']['tl_example']['fields']['example_upload'] = [
    'inputType' => 'multifileupload',
    'eval'      => [
        'tl_class'       => 'clr',
        'extensions'     => Config::get('validImageTypes'),
        'fieldType'      => 'checkbox',
        'maxFiles'       => 5,
        'minImageWidth'  => 600,
        'minImageHeight' => 300,
        'maxImageWidth'  => 1600,
        'maxImageHeight' => 1200,
        'uploadFolder'   => 'files/uploads'
    ],
    'sql'       => "blob NULL",
];

Documentation

Supported dropzone config options

The bundles support most dropzone config options. Just pass them as eval attribute. See Dropzone Documentation for more information. Some additional node:, _(*10)

• addRemoveLinks (boolean, default true): If true, this will add a link to every file preview to remove or cancel (if already uploading) the file.
• maxFilesize: Is set by maxUploadSize eval property

Flow chart

A flowchart with description of the full upload procedure with callback injection can be found here: Flowchart., _(*11)

Additional eval properties

Additional properties can be set in your fields eval section., _(*12)

Field Callbacks