CFWheels BlueImp Plugin (Inactive)

This plugin is no longer under active development or support.

This page is for everything related to my BlueImp plugin for the CFWheels Framework.

Plugin available at: http://cfwheels.org/plugins/listing/74

Third party software used:
http://blueimp.github.com/jQuery-File-Upload/ (contained in plugin)

jQuery

Requires:

# Wheels 1.1.6, 1.1.7
# jQuery 1.7.1+

TO USE

1) Place the BlueImp-X.X.zip in your plugins folder

2) Reload your Wheels application.
Example: http://localhost/index.cfm?reload=true

You should be good to go now.

EXAMPLES OF USE

Basic Usage:

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

<!-- 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>

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.

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 --->
	<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":			upload.serverfile,
				"size":			upload.filesize,
				"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>

IF you want to load the Blue Imp uploader by ajax, but you MAY have already loaded it, use the following code at the end of the layout.cfm:

#blueImpCheckLoaded()#

A tip on the database attachments field if you use this, make sure you use an unlimited field like varchar(MAX) or you will have mysteriously disappearing files when you reload pages.