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)
http://jquery.com/

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.

  1. Hi.. thanks for writing this plugin! I am trying to install and I am getting a js error in the applications.js file on line 54:

    TypeError: $(this).fileupload is not a function
    [Break On This Error]

    dropZone: $(this)

    Any ideas?

    • Hi, From what I can tell, the issue is that the fileuploader plugin is not being loaded (I’d guess somewhere you are calling with headFlag=”false” or loading via ajax) and I forgot to update the readme.txt and this with the new function I added for loading all of the libraries it uses. Try replacing the old javascript and stylesheet loads with the new function: blueImpCheckLoaded() – or adding it, to the bottom of any pages you intend to use it on. This ensures that all the libraries are loaded.
      Otherwise it could be that you are using URLRewriting, in this case you’ll have to modify the rewrite rules to NOT rewrite calls to the plugins/BlueImp folder.
      If that doesn’t work I’ll go and have a look at it again later – I haven’t had need to use it in a bit.

  2. Was wondering if this works with wheels 1.1.8 and jQuery 1.10 … I can’t get it to upload. I can get the preview of the various files (images) but when i hit start.. (the start upload button does nothing).. it will post to my action page.. but the files array will be empty.. any thoughts?

    • Hey. In theory it should work. Have you checked if any errors are occurring on the console? You could try replace the older js files in the plugin with newer ones off the blue-imp main project page as I haven’t updated it in quite some time as I don’t actually use it anymore.

      • That was going to be my next step.. I just seen the plugin on cfwheels plugin page.. tested it.. and really really liked the preview.. i’m planning on using it as an upload a profile picture thingy… anyways.. i’ll try that out.. and read blueImps documentation…i’ll let you know.. thanks!

    • Did you found a solution because I have the same issue right now. The array is always empty. I’ve try to update the files from Github but I get other errors with AngularJS. Thanks

      • @Yannick

        Sorry for taking so long to respond, no I haven’t figured it out. I don’t use the plugin anymore or CFWheels much for that matter.
        From your post you are using AngularJS, the blue-imp plugin is the jQuery plugin version not the AngularJS plugin so that may cause some of your problems.
        I’m not going to be able to help you out on this one I’m afraid as I have too much work to do else where, sorry.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: