ProcessWire - File Upload mit Blueimp jQueryFileUpload: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
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 8: Zeile 9:
 
  JqueryFileUpload
 
  JqueryFileUpload
  
−
== Implementierung im Frontend Template ==
+
== Upload Formular 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.
 
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 ====
 +
<syntaxhighlight lang="php">
 +
//  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(
 +
// Hier kann man z.B. für verschiedene Usergruppen unterschiedliche Dinge erlauben (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'));
  
 +
// Widget Markup ausgeben
 +
$jfuMarkup .= $jfu->render($options);
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
== Dateien weiter verarbeiten ==
 +
Was kann man jetzt mit den Dateien anstellen. Wenn man mit registrierten Benutzern arbeitet geht das wahrscheinlich einfacher, weil man einfach die richtige Zuordnung hat. Schwieriger ist der Fall in dem man unregistrierte Nutzer hat.
 +
 +
Im Forum schlägt Kogondo folgende Vorgehensweise vor:
 +
 +
# Upload files to your server to a specified temporary folder(s). During the process validate the files: JqueryFileUpload
 +
# Iterate over the folder with the uploads: I always use PHP SPL class for this, e.g. RecursiveDirectoryIterator
 +
# In each iteration, add valid files to specified pages (if those pages are not being created by the uploads): Use ProcessWire for this
 +
# Delete uploads in the temporary folder
 +
 +
Example code:
 +
https://processwire.com/talk/topic/10815-mass-create-pages-or-mass-upload-images-and-thus-create-pages/?p=101791
 +
https://processwire.com/talk/topic/8416-importing-many-pictures-in-a-page/
 +
 +
If you are adding to files to pages directly after they've been uploaded, you will want to listen to Ajax requests sent by JqueryFileUpload like so:
 +
<pre>
 +
if ($this->config->ajax) {
 +
  // you code here for iteration, creating and/or adding files to pages
 +
}
 +
</pre>
  
 
== 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.
 +
 +
Am Anfang etwas verwirrend, es gibt 3 Konfigurationsbereiche:
 +
# Optionen, die '''an das Plugin weitergegebe'''n und Client-Seitig verarbeitet werden  '''@see $this->configsJFU($options)'''
 +
# Optionen die Serverseitig verarbeitet werden und festlegen '''wie das Formular gerendert wird'''  '''@see $this->render($options).'''
 +
# Optionen die Serverseitig verarbeitet werden und festlegen wie mit den AJAX Anfragen des Formulars für die Verarbeitung der Upload-Dateien (upload/anzeigen/löschen) verfahren wird.@see $this->processJFUAjax($options).
 +
Standardmäßig müssen AJAX Requests explizit über die processJFUAjax() Funktion erlaubt werden. Optional kann man die AJAX Requests auch in eigenen Modulen oder im Template verarbeiten.
  
 
=== Blueimp jQuery File Upload Optionen ===
 
=== Blueimp jQuery File Upload Optionen ===
Zeile 39: Zeile 111:
 
Options
 
Options
  
−
JqueryFileUpload implements all the options that come with the jQuery File Upload plugin. In addition, it includes the following custom server-side options:
+
JqueryFileUpload implements all the options that come with the jQuery File Upload plugin.  
  
 +
'''Zusätzliche Serverseitige Optionen:'''
 
      
 
      
 
* showUploaded: Whether to show uploaded files (default is false).
 
* showUploaded: Whether to show uploaded files (default is false).
Zeile 68: Zeile 141:
 
*    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>

Aktuelle Version vom 8. Februar 2019, 17:01 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[Bearbeiten]

Über den Modulinstaller und den Modulklassennamen 

JqueryFileUpload

Upload Formular im Frontend Template[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

$jfu = $modules->get('JqueryFileUpload');

3. AJAX Requests konfigurieren[Bearbeiten]

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[Bearbeiten]

//  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(
	// Hier kann man z.B. für verschiedene Usergruppen unterschiedliche Dinge erlauben (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'));

// Widget Markup ausgeben
$jfuMarkup .= $jfu->render($options);

Dateien weiter verarbeiten[Bearbeiten]

Was kann man jetzt mit den Dateien anstellen. Wenn man mit registrierten Benutzern arbeitet geht das wahrscheinlich einfacher, weil man einfach die richtige Zuordnung hat. Schwieriger ist der Fall in dem man unregistrierte Nutzer hat.

Im Forum schlägt Kogondo folgende Vorgehensweise vor:

  1. Upload files to your server to a specified temporary folder(s). During the process validate the files: JqueryFileUpload
  2. Iterate over the folder with the uploads: I always use PHP SPL class for this, e.g. RecursiveDirectoryIterator
  3. In each iteration, add valid files to specified pages (if those pages are not being created by the uploads): Use ProcessWire for this
  4. Delete uploads in the temporary folder

Example code: 

https://processwire.com/talk/topic/10815-mass-create-pages-or-mass-upload-images-and-thus-create-pages/?p=101791
https://processwire.com/talk/topic/8416-importing-many-pictures-in-a-page/

If you are adding to files to pages directly after they've been uploaded, you will want to listen to Ajax requests sent by JqueryFileUpload like so: 

if ($this->config->ajax) {
  // you code here for iteration, creating and/or adding files to pages
}

Optionen[Bearbeiten]

Das Modul unterstützt alle Client Optionen und zusätzlich ein paar Serverseitige Optionen.

Am Anfang etwas verwirrend, es gibt 3 Konfigurationsbereiche:

  1. Optionen, die an das Plugin weitergegeben und Client-Seitig verarbeitet werden @see $this->configsJFU($options)
  2. Optionen die Serverseitig verarbeitet werden und festlegen wie das Formular gerendert wird @see $this->render($options).
  3. Optionen die Serverseitig verarbeitet werden und festlegen wie mit den AJAX Anfragen des Formulars für die Verarbeitung der Upload-Dateien (upload/anzeigen/löschen) verfahren wird.@see $this->processJFUAjax($options).

Standardmäßig müssen AJAX Requests explizit über die processJFUAjax() Funktion erlaubt werden. Optional kann man die AJAX Requests auch in eigenen Modulen oder im Template verarbeiten.

Blueimp jQuery File Upload Optionen[Bearbeiten]

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#image-preview--resize-options

Zusätzliche Optionen[Bearbeiten]

Options

JqueryFileUpload implements all the options that come with the jQuery File Upload plugin.

Zusätzliche Serverseitige Optionen:

  • 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[Bearbeiten]

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"
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=ProcessWire_-_File_Upload_mit_Blueimp_jQueryFileUpload&oldid=23597“