Custom Element Video Tutorial: drop-files

Today I propose to you to discover a library rather nice to manage fields of sending of multiple file @ grafikart / drop-files-element.

Why not Dropzonejs?

When it comes to creating a drag'n drop file filing system the Dropzonejs library is often acclaimed. The main concern of this library (and other similar libraries) is that it requires to manage the processing of Ajax files which often requires server-side adaptations.

This approach is particularly problematic in the case of content creation where the images do not have to be sent before the persistence of the basic content.

My solution

The goal of my library is to offer a solution that integrates well with the back-end framework and requires minimal intervention to integrate with existing code.

To manage a multiple file send, we use a file type field with the multiple attribute.

Such a field already offers the desired features but the interface is not obvious to enter for the user. The goal is to keep the function while changing the shape.

The first step is to load the script that will register the "Custom Built in element". This can be done via a simple import

import '@ grafikart / drop-files-element'

or via unpkg

Then you have to assign the custom element to the field using the attribute is. You can also add hints for the user using the attributes label and help.

There you go ! That's it. For more information do not hesitate to visit the documentation.