ProcessWire - File Upload mit Blueimp jQueryFileUpload: Unterschied zwischen den Versionen
Steff (Diskussion | Beiträge) |
Steff (Diskussion | Beiträge) |
||
| Zeile 1: | Zeile 1: | ||
https://github.com/blueimp/jQuery-File-Upload | https://github.com/blueimp/jQuery-File-Upload | ||
| + | http://modules.processwire.com/modules/jquery-file-upload/ | ||
https://github.com/kongondo/JqueryFileUpload | https://github.com/kongondo/JqueryFileUpload | ||
| Zeile 11: | Zeile 12: | ||
Das Modul kann den kompletten benötigten Markup liefern oder auch nur Teile davon. Man kann also auch das HTML Markup selbst einfügen. Auf den ersten Blick sieht es so aus, als ob auch Sprachlabel angelegt sind, so kann man die Multilanguage Funktionaliät von ProcessWire nutzen. | Das Modul kann den kompletten benötigten Markup liefern oder auch nur Teile davon. Man kann also auch das HTML Markup selbst einfügen. Auf den ersten Blick sieht es so aus, als ob auch Sprachlabel angelegt sind, so kann man die Multilanguage Funktionaliät von ProcessWire nutzen. | ||
| − | === 1. Modul Initialisieren === | + | Wir gehen hier davon aus, das wir die den Markup für die Verwendung im Template zuerst mal in $jfuMarkup speichern. So können wir es später einfach über echo $jfuMarkup ausgeben. Zusätzlich haben wir noch ein paar Skripte die wir falls nicht schon vorhanden ausgeben müssen. |
| + | |||
| + | === 1. Notwendige Skripte === | ||
| + | Z.B. in footer-js.php oder im Header | ||
| + | <script src="<?=urls()->templates?>vendors/jquery/jquery.min.js"></script> | ||
| + | <script src="<?=urls()->templates?>vendors/jquery-ui-1.12.1/jquery-ui.js"></script> | ||
| + | |||
| + | === 2. Modul Initialisieren === | ||
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
$jfu = $modules->get('JqueryFileUpload'); | $jfu = $modules->get('JqueryFileUpload'); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | === AJAX Requests konfigurieren === | + | === 3. AJAX Requests konfigurieren === |
| − | Das Plugin kann über AJAX mit dem Server (und dem Plugin) kommunizieren. Was es dabei darf und was nicht kann man hier einstellen. | + | Das Plugin kann über AJAX mit dem Server (und dem Plugin) kommunizieren. Was es dabei darf und was nicht kann man hier einstellen. Die Default Einstellung ist recht restriktiv. |
<syntaxhighlight lang="php"> | <syntaxhighlight lang="php"> | ||
| Zeile 27: | Zeile 35: | ||
//'disableUploads' => true// disable uploads @note: matches similar setting in render() | //'disableUploads' => true// disable uploads @note: matches similar setting in render() | ||
); | ); | ||
| + | $jfuMarkup .= $jfu->processJFUAjax($ajaxOptions); | ||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | ==== 4. jQuery File Upload konfigurieren und Markup ausgeben ==== | ||
| + | // Optionen für das jQuery Plugin wenn gewünscht überschreiben | ||
| + | $jfuOptions = array( | ||
| + | 'imageMaxWidth' => 1280,// limit image width (will be resized) | ||
| + | 'imageMaxHeight' => 768,// limit image (ditto) | ||
| + | 'prependFiles' => true,// add new uploads to the top of the file listing | ||
| + | // allow to resize images. Default is true, i.e. to disable. | ||
| + | // We set this to false if we want IMAGES TO BE RESIZED CLIENT-SIDE BEFORE UPLOAD | ||
| + | 'disableImageResize' => false, | ||
| + | // custom option for this module: whether to show list of files currently on the server | ||
| + | 'showUploaded' => true,// if false, will stop the widget from sending requests to list uploads already on the server | ||
| + | ); | ||
| + | |||
| + | // ... und Speichern | ||
| + | $jfuConfig = $jfu->configsJFU($jfuOptions); // Im Backend gibt das ein Array zurück im Frontend einen JSON String | ||
| + | |||
| + | // Optionen für das Modul konfigurieren | ||
| + | $options = array( | ||
| + | // useful for allowing uploads to one group of users and not the other (e.g. registered versus non-registered) | ||
| + | // for security, we also pass this option to processJFUAjax($options) to reject any upload attempts | ||
| + | //'disableUploads' => true, | ||
| + | ); | ||
| + | |||
| + | // Plugin Konfiguration ausgeben | ||
| + | $additionalFooterData .= ' | ||
| + | <!--jfu config --> | ||
| + | <script type="text/javascript">var config = '.$jfuConfig.'</script> | ||
| + | '; | ||
| + | // Plugin Skripte ausgeben | ||
| + | $additionalFooterData .= $jfu->renderJFUScripts(array('noIframeTransport', 'noAudioPreview', 'noVideoPreview')); | ||
| + | // echo the file widget's markup using the render() method and passing to it any options we set earlier | ||
| + | $jfuMarkup .= $jfu->render($options); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
== Optionen == | == Optionen == | ||
Das Modul unterstützt alle Client Optionen und zusätzlich ein paar Serverseitige Optionen. | Das Modul unterstützt alle Client Optionen und zusätzlich ein paar Serverseitige Optionen. | ||
| Zeile 68: | Zeile 111: | ||
* useCustomScript: Same as above; not to output the module's main Javascript file JqueryFileUpload.js to instead use your own. | * useCustomScript: Same as above; not to output the module's main Javascript file JqueryFileUpload.js to instead use your own. | ||
* useCustomStyle: Same as above; not to output the module's main CSS file JqueryFileUpload.css to instead use your own. | * useCustomStyle: Same as above; not to output the module's main CSS file JqueryFileUpload.css to instead use your own. | ||
| + | |||
| + | == AJAX Kommunikation == | ||
| + | Nach dem Upload sieht die JSON Response etwa so aus. | ||
| + | <pre> | ||
| + | {files: [{name: "dsc_1771-1.jpg", size: 183479,…}]} | ||
| + | files: [{name: "dsc_1771-1.jpg", size: 183479,…}] | ||
| + | 0: {name: "dsc_1771-1.jpg", size: 183479,…} | ||
| + | name: "dsc_1771-1.jpg" | ||
| + | size: 183479 | ||
| + | url: "/www/01-Projekte/Kunden/INDIHAR/GKK-Dropzone/site/assets/files/jqfu/files/dsc_1771-1.jpg" | ||
| + | </pre> | ||
Version vom 8. Februar 2019, 12:56 Uhr
https://github.com/blueimp/jQuery-File-Upload http://modules.processwire.com/modules/jquery-file-upload/ https://github.com/kongondo/JqueryFileUpload
Das Modul kann Blueimp jQuery File Upload einbinden und über ProcessWire Funktionen zugänglich machen.
Installation
Über den Modulinstaller und den Modulklassennamen
JqueryFileUpload
Implementierung im Frontend Template
Das Modul kann den kompletten benötigten Markup liefern oder auch nur Teile davon. Man kann also auch das HTML Markup selbst einfügen. Auf den ersten Blick sieht es so aus, als ob auch Sprachlabel angelegt sind, so kann man die Multilanguage Funktionaliät von ProcessWire nutzen.
Wir gehen hier davon aus, das wir die den Markup für die Verwendung im Template zuerst mal in $jfuMarkup speichern. So können wir es später einfach über echo $jfuMarkup ausgeben. Zusätzlich haben wir noch ein paar Skripte die wir falls nicht schon vorhanden ausgeben müssen.
1. Notwendige Skripte
Z.B. in footer-js.php oder im Header
<script src="<?=urls()->templates?>vendors/jquery/jquery.min.js"></script> <script src="<?=urls()->templates?>vendors/jquery-ui-1.12.1/jquery-ui.js"></script>
2. Modul Initialisieren
$jfu = $modules->get('JqueryFileUpload');
3. AJAX Requests konfigurieren
Das Plugin kann über AJAX mit dem Server (und dem Plugin) kommunizieren. Was es dabei darf und was nicht kann man hier einstellen. Die Default Einstellung ist recht restriktiv.
if ($config->ajax) {// Als erstes AJAX handeln
// server-side options to send to the ajax handler
$ajaxOptions = array(
'uploadsDeletable' => 1,// disable attempts to delete upload (default)
'showUploaded' => 1,// don't send back response listing uploads
//'disableUploads' => true// disable uploads @note: matches similar setting in render()
);
$jfuMarkup .= $jfu->processJFUAjax($ajaxOptions);
}
4. jQuery File Upload konfigurieren und Markup ausgeben
// Optionen für das jQuery Plugin wenn gewünscht überschreiben $jfuOptions = array( 'imageMaxWidth' => 1280,// limit image width (will be resized) 'imageMaxHeight' => 768,// limit image (ditto) 'prependFiles' => true,// add new uploads to the top of the file listing // allow to resize images. Default is true, i.e. to disable. // We set this to false if we want IMAGES TO BE RESIZED CLIENT-SIDE BEFORE UPLOAD 'disableImageResize' => false, // custom option for this module: whether to show list of files currently on the server 'showUploaded' => true,// if false, will stop the widget from sending requests to list uploads already on the server );
// ... und Speichern $jfuConfig = $jfu->configsJFU($jfuOptions); // Im Backend gibt das ein Array zurück im Frontend einen JSON String
// Optionen für das Modul konfigurieren $options = array( // useful for allowing uploads to one group of users and not the other (e.g. registered versus non-registered) // for security, we also pass this option to processJFUAjax($options) to reject any upload attempts //'disableUploads' => true, );
// Plugin Konfiguration ausgeben $additionalFooterData .= ' <script type="text/javascript">var config = '.$jfuConfig.'</script> '; // Plugin Skripte ausgeben $additionalFooterData .= $jfu->renderJFUScripts(array('noIframeTransport', 'noAudioPreview', 'noVideoPreview'));
// echo the file widget's markup using the render() method and passing to it any options we set earlier $jfuMarkup .= $jfu->render($options); </syntaxhighlight>
Optionen
Das Modul unterstützt alle Client Optionen und zusätzlich ein paar Serverseitige Optionen.
Blueimp jQuery File Upload Optionen
https://github.com/blueimp/jQuery-File-Upload/wiki/Options#image-preview--resize-options
Zusätzliche Optionen
Options
JqueryFileUpload implements all the options that come with the jQuery File Upload plugin. In addition, it includes the following custom server-side options:
- showUploaded: Whether to show uploaded files (default is false).
- uploadsDeletable: Whether clients can delete uploads (default is false).
- disableUploads: If set to true, the widget becomes a file lister only. Default is false.
- responseType: If set to 1, module returns a JSON response to valid Ajax requests. If 2, it returns an Array. This can be useful if further processing is needed, e.g. in a module, before outputting final JSON. Default is to return a JSON response.
- privateUploadsDir: The non-web-accessible folder to save uploads to. If showUploaded is set to false, this (system) directory is used for saving uploads.
- thumbsPrivateDir: Set a non-web-accessible folder for thumbnails.
- uploadsDir: Set a web-accessible folder to upload images to. Default is under /sites/. Needed if displaying uploaded images.
- thumbsDir: Set a web-accessible folder for thumbnails. Needed if displaying uploaded images.
- setMaxFiles: Maximum number of files per upload. Default is 30.
- setOverwrite: If to overwrite files in case of name-collision. Default is false.
- useCustomForm: Whether to use a custom form + action buttons for uploads + upload actions.
- enableDropZone: Disable drop-zone features of the widget.
- showGallery: Whether to enable the widget to display uploaded images in a (blueimp) gallery.
- thumbsWidth: Set the width for image thumbnails: Default is 100.
- thumbsHeight: Set the height for image thumbnails. Defaults to 75.
- createThumb: Whether to create image thumbnails for uploads. Default is false.
- allowedImageMimeTypes: Array of allowed image mime types: Default is array('image/gif', 'image/jpeg', 'image/png').
- imageTypeConstants: Array of allowed image type constants. Default is array('gif' => IMAGETYPE_GIF, 'jpeg' => IMAGETYPE_JPEG, 'jpg' => IMAGETYPE_JPEG, 'png' => IMAGETYPE_PNG).
- allowedNonImageMimeTypes: Array of allowed non-image files mime types. Default is array('application/pdf', 'audio/mpeg', 'video/mp4').
- noGallery: Don't output the plugin's gallery scripts and CSS. For use in the two scripts and two styles methods listed below. Also see example usage below.
- noIframeTransport: Same as above; not to output iframe transport script.
- noResize: Same as above; not to output client-side image resizing script.
- noAudioPreview: Same as above; not to output script that enables preview of audio files pre-uploading them.
- noVideoPreview: Same as above; not to output script that enables preview of video files pre-uploading them.
- useCustomScript: Same as above; not to output the module's main Javascript file JqueryFileUpload.js to instead use your own.
- useCustomStyle: Same as above; not to output the module's main CSS file JqueryFileUpload.css to instead use your own.
AJAX Kommunikation
Nach dem Upload sieht die JSON Response etwa so aus.
{files: [{name: "dsc_1771-1.jpg", size: 183479,…}]}
files: [{name: "dsc_1771-1.jpg", size: 183479,…}]
0: {name: "dsc_1771-1.jpg", size: 183479,…}
name: "dsc_1771-1.jpg"
size: 183479
url: "/www/01-Projekte/Kunden/INDIHAR/GKK-Dropzone/site/assets/files/jqfu/files/dsc_1771-1.jpg"
