Multi Assets Upload module

Edition

Incubator (services)

Issues

Git

Git

Latest

1.0

Compatible with Magnolia 6.2.18+.

The Multi Assets Upload module provides an action in the Assets app to easily upload multiple digital assets in the dam-workspace.

This module is at the INCUBATOR level.

Installing with Maven

Maven is the easiest way to install the module. Add the following to your bundle:

<dependency>
  <groupId>info.magnolia.ui</groupId>
  <artifactId>magnolia-ui-framework-javascript</artifactId>
  <version>1.1.7</version>
</dependency>
The above is actually installing the JavaScript Dialog Fields module. The JavaScript Dialog Fields module is a prerequisite for using the Multi Assets Upload module.

Export the Multi Assets Upload module repo

You just need to export the git repo into your light-module folder as shown here.

  1. Go to your light-modules repository.

  2. Clone the Multi Assets Upload module.

    git clone https://git.magnolia-cms.com/scm/services/multi-assets-upload.git

Alternatively, you can extract the multi-assets-upload.zip file directly to your light-modules folder.

Usage

Once installed, you get a new action Multi Upload in your "Assets" App.

Instructions

  1. When clicking on this action, a dialog pops up which allows you to upload digital assets via Drag and Drop or a file selection dialog.

    multi assets upload

  2. When you are happy with your selection, hit the black submit files button. The files are then uploaded with Magnolias Nodes API.

    After that the files disappear from the dialog, it can be examined in the Assets-App after closing the dialog with "Save Changes".

Good-to-knows

  • File size maximum is 20MB.

    There are no restriction on the file type.
  • Added files are shown as thumbnails after the drop. If a file is bigger than the size restriction a red error box is showing that issue. A user can also remove the added files with the "Remove file" link.

Develop Multi Assets Upload module

The Multi Assets Upload module makes sure of dropzone. We configured and adapted it to use the Nodes API.

If you need to update dropzone, be aware that we have modified for use in this module in the following places:

  • dropzone lines 8243-8248

  • dropzone lines 10446-10447

See lines 8243-8248 for more details.

this.clickableElements.forEach(function (clickableElement) {
  return _this2.listeners.push({
    element: clickableElement,
    events: {
      click: function click(evt) {
        // Only the actual dropzone or the message element should trigger file selection
        if (clickableElement !== _this2.element || evt.target === _this2.element || Dropzone.elementInside(evt.target, _this2.element.querySelector(".dz-message"))) {
          // Code executed at first load. Not working if you press too many clicks, it waits 1 second.
          if(clickEventTimeStamp == null || clickEventTimeStamp + 1000 < evt.timeStamp)
          {
            _this2.hiddenFileInput.click(); // Forward the click
            clickEventTimeStamp = evt.timeStamp;
          }
        }
        return true;
      }
    }
})

See lines 10446-10447 for more details.

// Prevent double-clicks in Google Chrome Browser
let clickEventTimeStamp = null;

Develop and release

You can use npm run zip to create multi-assets-upload.zip.

See the package.json for the list of files and directories which are included into the distribution.

You can automate that by creating a git hook (as long as we have no CI/CD in place here).

  1. Create a file called .git/hooks/pre-commit in the root of your Multi Assets Upload module directory with the following lines:

      #!/bin/bash
      npm run zip
      git add multi-assets-upload.zip
  2. Make it executable with chmod +x .git/hooks/pre-commit.

Each time you do a git commit -m "Testing git client hooks", the zip file will be automatically built and uploaded.

Changelog

Version Notes

1.0

Initial release of the module.

Feedback