Documentation

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

File

Description

Purpose: A File Input is used to upload one or multiple files, using the native filebrowser of a browser or Drag&Drop.
Composition: A File Input is composed as a Dropzone and a list of files. The Dropzone contains a Shy Button for file selection.
Effect: According to configuration, the input will accept files of certain types and sizes. Dragging files from a folder on the comuter to the Page in ILIAS will highlight the Dropzone. Clicking the Shy Button which starts the native browser file selection. Droppping the file onto the Dropzone or selecting a file in native browser will directly upload the file and add a info-line beneath the dropzone with the title and the size of the file and a Remove Glyph once the upload has finished. Clicking the Remove Glyph will remove the file-info and calls the upload-handler to delete the already uploaded file. Invalid files will lead to a error message in the dropzone.

Context

Upload icons for items in the MainBar (https://docu.ilias.de/goto_docu_wiki_wpage_3993_1357.html)

Rules

Usage

The consuming component MUST handle uploads and deletions of files.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\File;
 
/**
 * Example of how to create and render a file input field and attach it to a form.
 */
function base()
{
    // Step 0: Declare dependencies.
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    // Step 1: Define the input field.
    // See the implementation of a UploadHandler in Services/UI/classes/class.ilUIDemoFileUploadHandlerGUI.php
    $file_input = $ui->input()->field()->file(new \ilUIDemoFileUploadHandlerGUI(), "Upload File", "you can drop your files here");
 
    // Step 2: Define the form and attach the field.
    $form = $ui->input()->container()->form()->standard("#", [$file_input]);
 
    // Step 4: Render the form.
    return $renderer->render($form);
}

Example 2: In form

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field\File;
 
/**
 * Example of how to process passwords.
 * Note that the value of Password is a Data\Password, not a string-primitive.
 */
function in_form()
{
    // Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
 
    // Step 1: Define the input field.
    // See the implementation of a UploadHandler in Services/UI/classes/class.ilUIDemoFileUploadHandlerGUI.php
    $file = $ui->input()->field()->file(new \ilUIDemoFileUploadHandlerGUI(), "File Upload", "You can drop your files here");
 
    // Step 2: Define the form and attach the field.
    $form = $ui->input()->container()->form()->standard('#', ['file' => $file]);
 
    // Step 3: Define some data processing.
    $result = '';
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    }
 
    // Step 4: Render the form/result.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}

Relations

Parents

UIComponent
Input
Field