Upload erstellen

Falls du ein Redakteur bist und kein Entwickler, kannst du Upload-Felder mit dem QUIQQER Contact Modul erstellen. Siehe beim https://dev.quiqqer.com/quiqqer/package-contact.

Ein Upload kann über verschiedene Wege erstellt / generiert werden. Die einfachste Art ein Upload zu erstellen ist direkt per PHP (serverseitig). Mit der bereitgestellten QUIQQER QUI\Upload\Form kann schnell ein Upload generiert werden. Möchtest du etwas mehr Flexibilität, kannst du auch per JavaScript ein Upload erstellen.

Falls du auf fertige Uploads nicht selbst reagieren möchtest ist es nicht nötig eine eigene Klasse zu erstellen, welche von QUI\Upload\Form erbt. Wenn du jedoch ein eigenes Verhalten implementieren möchtest für die hochgeladenen Dateien, musst du eine neue Klasse erstellen, die von QUI\Upload\Form erbt.

PHP

Als Erstes zeigen wir dir einmal, wie du schnell und einfach ein eigenes kleines Upload-Formular erstellen kannst:

$UploadForm = new \QUI\Upload\Form();
$content    = $UploadForm->create(); // generiert das HTML für das Formular

Für smarty:

{$UploadForm->create()}

Über PHP ist es möglich das Formular mit einigen Einstellungen anzupassen:

$UploadForm = new \QUI\Upload\Form([
    'contextMenu' => true,
    'multiple'    => true,
    'sendbutton'  => true,
    'uploads'     => 1,
    'hasFile'     => false,
    'deleteFile'  => true,

    'allowedFileTypes'  => false, // eq: ['image/jpeg', 'image/png'] - nur nutzbar mit eigener Klasse
    'allowedFileEnding' => false, // eq: ['.gif', '.jpg']  - nur nutzbar mit eigener Klasse
    'maxFileSize'       => false, // eq: 20000000 = 20mb  - nur nutzbar mit eigener Klasse

    'typeOfLook'     => 'DragDrop', // DragDrop, Icon, Single
    'typeOfLookIcon' => 'fa fa-upload'
]);

Wichtig: allowedFileTypes, allowedFileEnding und maxFileSize können nur mit einer eigenen Klasse überschrieben werden, d.h. möchtest du in deinem Upload nicht die Standardrechte nutzen, musst du eine eigene Klasse erstellen

Möchtest du nun auf fertige Uploads reagieren, wie zum Beispiel die Dateien in bestimmte Ordner verschieben, musst du eine neue Klasse erstellen, die von QUI\Upload\Form erbt.


class MyNewUpload extends \QUI\Upload\Form {

}

Um nun auf einen Upload zu reagieren, musst du die onFileFinish Methode überschreiben.


class MyNewUpload extends \QUI\Upload\Form {

    public function onFileFinish($file, $params)
    {

    }

}

Beispiele

DragDrop

new \QUI\Upload\Form();

Single

new \QUI\Upload\Form([
    'typeOfLook' => 'Single'
]);

Icon

new \QUI\Upload\Form([
    'typeOfLook' => 'Icon'
]);

JavaScript

Du kannst ein Upload Formular auch direkt per JavaScript erstellen. Dadurch hast du einiges an mehr Flexibilität. Du kannst auf verschiedenen Events reagieren, wie DragDrop Events, kannst dem Benutzer direkt Hinweise liefern oder direkt bei der Bildauswahl mit dem Bild arbeiten.

var Form = new UploadForm({
    contextMenu: true,  // add context menu
    multiple   : true,  // selection of multiple files allowed?
    sendbutton : true,  // add send button
    uploads    : 1,     // upload count
    styles     : {},    // css styles
    Drops      : [],    // drop elements for drag drop on which the form react
    hasFile    : false, // 
    deleteFile : true,  // delete selected files are allowed?
    events: {
        onDragenter: function (event, Elm) {
            
        },

        onDragleave: function (event, Elm) {
            
        },

        onDragend: function (event, Elm) {
            
        },

        onFinished: function (Form) {
            
        },

        onError: function (Form, Message) {
            
        },

        onAdd: function (Control, File) {
            
        }
    }
});

// ajax function + ajax params which are called after the file is uploaded
Form.setParam('onfinish', 'my_ajax_function');
Form.setParam('package', 'package/from_my_ajax_function');