ProcessWire - File Upload mit Blueimp jQueryFileUpload

https://github.com/blueimp/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.

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

if ($config->ajax) {// AJAX handeln falls nötig
	// 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()
	);

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.