DropzoneJS Demo

Drupal integration for DropzoneJS - an open source library that provides drag’n’drop file uploads with image previews.

How to install

The non-composer way

  1. Download this module
  2. Download DropzoneJS library and place it in the libraries folder (/libraries). Use the dist.zip and put the files in the libraries/dropzone folder (the full path to the required files should be /libraries/dropzone/dropzone-min.js and /libraries/dropzone/dropzone.css).
  3. Install dropzonejs the usual way.

Note: if you use bower to fetch the library, be sure to fetch the package named dropzone (NOT dropzonejs) that points to the correct repository.

The composer way

This assumes that the type:drupal-library is set up to be installed in
web/libraries.

Add a custom package to the root composer.json file. Its repositories key
looks like the following. Adjust version numbers according to current release.

Dropzone 5:

    "repositories": [
        ...
        {
            "type": "package",
            "package": {
                "name": "enyo/dropzone",
                "version": "5.9.3",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/dropzone/dropzone/releases/download/v5.9.3/dist.zip",
                    "type": "zip"
                }
            }
        }
    ]

Dropzone 6:

    "repositories": [
        ...
        {
            "type": "package",
            "package": {
                "name": "enyo/dropzone",
                "version": "6.0.0-beta.2",
                "type": "drupal-library",
                "dist": {
                    "url": "https://github.com/dropzone/dropzone/releases/download/v6.0.0-beta.2/dist.zip",
                    "type": "zip"
                }
            }
        }
    ]

Run composer require drupal/dropzonejs enyo/dropzone, the DropzoneJS library
will be installed to the `libraries` folder automatically as well.

To also install exif-js for optional client-resize, define another repository.

    {
        "type": "package",
        "package": {
            "name": "exif-js/exif-js",
            "version": "v2.3.0",
            "type": "drupal-library",
            "dist": {
                "type": "zip",
                "url": "https://github.com/exif-js/exif-js/archive/refs/tags/v2.3.0.zip",
            }
        }
    },

And require it with composer require exif-js/exif-js

Current module state

This module currently provide an element that can be used in forms and three Entity Browser widgest:

  • a simple one that generates (default core) file entities
  • one that generates Media entities
  • one that uses Inline entity form to provide forms for generated media entities
Supporting organizations: 
Maintenance

Project information

Releases