Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Standard

Description

Purpose: The standard dropzone is used to drop files dragged from outside the browser window. The dropped files are presented to the user and can be uploaded to the server.
Composition: Standard dropzones consist of a visible area where files can be dropped. They MUST contain a message explaining that it is possible to drop files inside. The dropped files are presented to the user in a roundtrip modal, which contains a file input.
Effect: A standard dropzone is highlighted when the user is dragging files over the dropzone. After dropping, the dropped files are presented to the user with some meta information of the files such the file name and file size.

Rivals

Rival 1: A wrapper dropzone can hold other ILIAS UI components instead of a message.
Rival 2: A file-input can be used instead of this component if other values have to be submitted at the same time.

Rules

Accessibility

Standard dropzones MUST offer the possibility to select files manually from the computer.

Example 1: Base

no results yet.

Drag files in here to upload them!

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Dropzone\File\Standard;
 
function base()
{
    global $DIC;
 
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $wrapper = $DIC->http()->wrapper()->query();
 
    $submit_flag = 'dropzone_standard_base';
    $post_url = "{$request->getUri()}&$submit_flag";
 
    $dropzone = $factory
        ->dropzone()->file()->standard(
            'Upload your files here',
            'Drag files in here to upload them!',
            $post_url,
            $factory->input()->field()->file(
                new \ilUIAsyncDemoFileUploadHandlerGUI(),
                'your files'
            )
        )->withUploadButton(
            $factory->button()->shy('Upload files', '#')
        );
 
    // please use ilCtrl to generate an appropriate link target
    // and check it's command instead of this.
    if ($wrapper->has($submit_flag)) {
        $dropzone = $dropzone->withRequest($request);
        $data = $dropzone->getData();
    } else {
        $data = 'no results yet.';
    }
 
    return '<pre>' . print_r($data, true) . '</pre>' .
        $renderer->render($dropzone);
}

Example 2: Bulky

no results yet.

Drag files in here to upload them!

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Dropzone\File\Standard;
 
function bulky()
{
    global $DIC;
 
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $wrapper = $DIC->http()->wrapper()->query();
 
    $submit_flag = 'dropzone_standard_bulky';
    $post_url = "{$request->getUri()}&$submit_flag";
 
    $dropzone = $factory
        ->dropzone()->file()->standard(
            'Upload your files here',
            'Drag files in here to upload them!',
            $post_url,
            $factory->input()->field()->file(
                new \ilUIAsyncDemoFileUploadHandlerGUI(),
                'your files'
            )
        )
        ->withBulky(true)
        ->withUploadButton(
            $factory->button()->shy('Upload files', '#')
        );
 
    // please use ilCtrl to generate an appropriate link target
    // and check it's command instead of this.
    if ($wrapper->has($submit_flag)) {
        $dropzone = $dropzone->withRequest($request);
        $data = $dropzone->getData();
    } else {
        $data = 'no results yet.';
    }
 
    return '<pre>' . print_r($data, true) . '</pre>' .
        $renderer->render($dropzone);
}

Example 3: With additional input

no results yet.

Drag files in here to upload them!

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Dropzone\File\Standard;
 
function with_additional_input()
{
    global $DIC;
 
    $factory = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
    $wrapper = $DIC->http()->wrapper()->query();
 
    $submit_flag = 'dropzone_standard_with_additional_input';
    $post_url = "{$request->getUri()}&$submit_flag";
 
    $dropzone = $factory
        ->dropzone()->file()->standard(
            'Upload your files here',
            'Drag files in here to upload them!',
            $post_url,
            $factory->input()->field()->file(
                new \ilUIAsyncDemoFileUploadHandlerGUI(),
                'your files'
            ),
            $factory->input()->field()->text(
                'Additional Input',
                'Additional input which affects all files of this upload.'
            )
        )->withUploadButton(
            $factory->button()->shy('Upload files', '#')
        );
 
    // please use ilCtrl to generate an appropriate link target
    // and check it's command instead of this.
    if ($wrapper->has($submit_flag)) {
        $dropzone = $dropzone->withRequest($request);
        $data = $dropzone->getData();
    } else {
        $data = 'no results yet.';
    }
 
    return '<pre>' . print_r($data, true) . '</pre>' .
        $renderer->render($dropzone);
}

Relations

Parents

UIComponent
Dropzone
File