Download Plugin (zip)

Stats

Version

0.5

Wheels Compatibility

1.1.8, 1.1.7, 1.1.6

Downloads

454

Last Updated

March 9, 2013

About Plugins

Plugins allow you to extend or modify default Wheels application behavior. To use, you just drop the zip file into your plugins directory and reload your application.

Read Using and Creating Plugins for more information.

BlueImp File Uploader

A short CFC for utilising the BlueImp Ajax uploader with CFWheels

Author

Simeon Cheeseman

Project Home

http://sdevgame.wordpress.com/cfwheels-blueimp-plugin/

Description

This is a simple plugin for including the Ajax file uploader called BlueImp (http://blueimp.github.com/jQuery-File-Upload/) and integrating it with cfWheels controllers.

Usage/Examples

Basic Usage for including the fileUploader in a view or partial is:

#blueImpMultiFile(controller="controllerName", action="fileUploadProcess", key="key")#

This will include all the HTML and javascript for the fileUploader as at http://blueimp.github.com/jQuery-File-Upload/. Note that the parameters are the same as startFormTag with an extra param called headFlag on whether to load the css and js files blueImp Needs - the plugin only loads these once per request.

Also you need to include the templating scripts, the examples from the blue imp site are:

<!-- The template to display files available for upload --> <script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-upload"> <td class="preview"><span class=""></span></td> <td class="name"><span>{%=file.name%}</span></td> <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> {% if (file.error) { %} <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> {% } else if (o.files.valid && !i) { %} <td> <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div> </td> <td>{% if (!o.options.autoUpload) { %} <button class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>Start</span> </button> {% } %}</td> {% } else { %} <td colspan="2"></td> {% } %} <td>{% if (!i) { %} <button class="btn btn-warning cancel"> <i class="icon-ban-circle icon-white"></i> <span>Cancel</span> </button> {% } %}</td> </tr> {% } %} </script> <!-- The template to display files available for download --> <script id="template-download" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-download"> {% if (file.error) { %} <td></td> <td class="name"><span>{%=file.name%}</span></td> <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td> {% } else { %} <td class="preview">{% if (file.thumbnail_url) { %} <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a> {% } %}</td> <td class="name"> <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a> </td> <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> <td colspan="2"></td> {% } %} <td> <button class="btn btn-danger delete" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"{% if (file.delete_with_credentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> <i class="icon-trash icon-white"></i> <span>Delete</span> </button> <input type="checkbox" name="delete" value="1" class="toggle"> </td> </tr> {% } %} </script>

And in the controller the function should look like (Note attachmentsData variable should be a list of filePaths stored in the table or similar):

<cffunction name="fileUpload">
<!--- Load the data for the object the files are attached to, in this case the list of filePaths into attachmentsData --->
<cfset thisNote = model("note").findByKey(params.key)>
<cfif GetHttpRequestData().method EQ "GET">
<cfscript>
var result = ArrayNew();
for(i = 1; i LTE ListLen(attachmentsData, ";"); i++){
var urlpath = ListGetAt(attachmentsData, i, ";");
var fileInfo = GetFileInfo(urlpath);
result.append({
"name": fileInfo.Name,
"size": fileInfo.Size,
"url": urlpath,
"deleteurl": URLfor(action="fileUpload", key=params.key, method="DELETE", params="file=#urlpath#"),
"deletetype": "DELETE"
});
}
</cfscript>
<cfelseif GetHttpRequestData().method EQ "POST">
<cffile action="upload" fileField="files[]" destination="#ExpandPath('/files/uploads')#" nameConflict="makeUnique" result="upload">
<cfset var urlPath = "#SERVER.separator.file#files#SERVER.separator.file#uploads#SERVER.separator.file##upload.serverfile#">
<cfset thisNote.update(attachments="#urlPath#;#attachmentsData#")>
<cfscript>
 result = [{
"name": fileInfo.Name,
"size": fileInfo.Size,
"url": urlpath,
"deleteurl": URLfor(action="fileUpload", key=params.key, method="DELETE", params="file=#urlpath#"),
"deletetype": "DELETE"
}];
</cfscript>
  <cfelseif GetHttpRequestData().method EQ "DELETE">
<cffile action="delete" file="#ExpandPath('/#URL.file#')#">
<cfset attachments = ListDeleteAt(attachmentsData, ListContainsNoCase(attachmentsData, "#URL.file#", ";"), ";")>
<cfset thisNote.update(attachments="#attachments#")>
<cfset result = URL.file>
</cfif>
<cfreturn renderWith(result)>
</cffunction>

Please note that if you are using URLRewriting you need to add to the plugins folder to the exceptions, or at least the plugins/BlueImp folder so wheels can load the JS and CSS files.

Change Log

Version 0.5—March 9, 2013 Download

Bugfixes and update to work with 1.1.8


Wheels compatibility: 1.1.6, 1.1.7, 1.1.8.

Version 0.4—February 16, 2012 Download

  • Fixed Some Bugs with the jquery
  • Fixed the example to use fileField="files[]" not files
  • Updated the readme.
  • Wheels compatibility: 1.1.6, 1.1.7.

Version 0.1.2—December 20, 2011 Download

  • Compatable With 1.1.7
  • Wheels compatibility: 1.1.6, 1.1.7.

Version 0.1.1—December 11, 2011 Download

  • Initial release.
  • Wheels compatibility: 1.1.6.