Using Plupload For Drag & Drop File Uploads In ColdFusion

This is absolutely fantastic, just what I have been waiting for! Just wondering how easy it would be to prevent uploaded filenames from dissapearing from the upload queue after being uploaded and have a small 'x' or icon appear next to it so that it can be removed (without a page refresh) to enable another file to be uploaded in it's place.

A couple of thoughts, How can you limit the number of file uploads to say 6? and how could you stipulate allowable upload file extentensions, i.e. jpg, gif and png?

Would including a thumbnail of the uploaded image be possible?

I think these would be useful features!
In any case, this is a brilliant long awaited solution for integrating Plupload into ColdFusion.

It's nifty stuff like this that makes me wish I worked for your startup or Epicenter. I stare all day at ERP and CRM systems, and realize that I'd have to do half the typing if it were in ColdFusion.

Thanks Ben, Not really sure where to begin, but I will give your suggestions a go and post back if I come up with anything.

In the meantime I will wait patiently for any solutions you come up with.

Thanks once again!

Just need to confirm I'm doing the right thing here. I tried adding the 'filters' property to filter file types by jpg,gif and png (in the uploader.js within the views folder):

// Create an initialize the Plupload instance.
this._uploader = new Plupload.Uploader({

// Try to load the HTML5 engine and then, if that's not supported, the Flash fallback engine.
runtimes: "html5,flash",

// Filter files by their extensions
filters : [
{title : "Image files", extensions : "jpg,gif,png"}
],

// The upload URL.
url: this._uploadUrl,

// The ID of the drop-zone element.
drop_element: "pluploadDropzone",

// To enable click-to-select-files, you can provide a browse button. We can use the same one as the drop zone.
browse_button: "pluploadDropzone",

// For the Flash engine, we have to define the ID of the node into which Pluploader will inject the <OBJECT> tag for the flash movie.
container: "pluploadContainer",

// The URL for the SWF file for the Flash upload engine for browsers that don't support HTML5.
flash_swf_url: this._swfUrl

});

But it doesn't work. Am I in the right area of your code Ben?

Hi Ben

Thanks for getting back to me. Appreciated!
Yes, I am able to select other types of file types such as *.txt, *.doc ect.

I have managed to limit the number of files uploaded to 6 (in my case) by placing a counter within the upload page. Once 6 files (images in my case) have been uploaded, it simply ignores additional files.

Just need to try and resolve the file types now! I will keep trying. If you ca think of a way to overcome this, then any assistance would be welcomed!

Thanks once again!

Using your example/demo how would one pass variables into the upload handler? ie upload_files.cfm?eventID=#whatever# . I see where you can hardcode it in main.js, but if I wanted to do it on the fly?

@Jay,

I apologize, I figured out the solution. I am hardcoding the upload handler in main.js (upload_files.cfm) and then appending the variables to the end of this._uploadUrl in uploader.js by attaching ID's to elements on the display page and then pulling them out via jqueries .attr('id') function. Then using these values as the appended variables.

GREAT POST! I love your work!

Hello Ben, I hope you are doing well after Sandy. We all have seen all the damage and disaster it created.

Just a question, is this script supported in CF8?

Thank you Ben.

I tested the uploader with multiple browsers, it worked Great with Chrome and Firefox, however it did not work with
IE. It currently uploads one file and stops.

I checked a few things and compared it to the example Pupload application and found:

In the developer tools network console the flash initiates a Post.

(example)
/uploader.cfm POST 201 text/html
0.51 KB 0.64 s Flash

However when I use the Drag and Drop ColdFusion Demo it does not record a network connection.

_handlePluploadFileUploaded(), Never fires.

Added a binder for StateChange status and it fires one time and never closes.

Any suggestions or thoughts?
John

Hey Ben, thanks for sharing this. I have a question, have you ever worked with CFWheels? Do you think it's possible to work this into the Wheels framework?

Thanks.

Hi Ben,

Late to the party but thanks for this. I am having an issue with files over 30 mb. I have installed your demo but when I drop and drag a file over 20mb, I get a 404 error on upload_files.cfm. Anything under uploads fine.

Thanks,

Jeff

Thanks Ben,

I increased the limit to the post size just in case but that made no difference. I see nothing related to this 404 in the CF Logs either.

Jeff

Ben,

I did not see you after Pete Freitag's Lockdown session at cfObjective but he said that IIS sets file size limits at 30MB by default which just happened to be the threshold for file size when I got the 404 errors. I will look at that angle as soon as I revisit this project but I suspect that is the root of the problem.

Thanks,

Jeff

No luck. At least I have uncovered the cause, URLScan 3.1.

Here is what I see in the IIS log when a file is over 30mb.

2013-05-21 23:29:05 10.105.45.128 GET /plupload/assets/jquery/jquery-1.8.0.min.js...

2013-05-21 23:29:13 10.105.45.128 POST /plupload/upload_files.cfm...

2013-05-21 23:29:17 10.105.45.128 GET /Rejected-By-UrlScan ~/plupload/upload_files.cfm 80 ...

I then update the urlscan.ini RequestLimits to

MaxAllowedContentLength=2000000000
MaxUrl=560
MaxQueryString=2048

And IIS request filtering is set to allow up 2gb, as well.

After increasing to the values above, I do an IIS restart but it still stops at 30mb.

When I remove UrlScan from the server, I no longer get the 30MB limit.

Ben,

Thanks so much for this tutorial, just what I was looking for. Having a bit of trouble in IE, but works great in Chrome.

I would like to insert a CFQuery so I can log the file uploaded to a database, how would I capture the file name and at what point would you recommend I place the query?

Any input would be appreciated.

Thanks

If I'm looking at things correctly, looks like I can handle it right from upload_files.cfm.

I will play with it a bit. Any success on getting it stable in IE?

Thx

I've got this working great in all browsers except IE, and I see there are others here who've had this issue. Has anyone had any luck with this?

From what I can see, it seems that IE picks up the _handlePluploadUploadProgress calls once or twice only, and then seems to just...stop. The file is still uploaded though, so there's nothing wrong with the upload part.

It's happening in all IE versions I can get my hands on, from 8 to 11.

Hola Ben estoy probando la aplicación y funciona muy bien, solo me queda una gran duda por mi falta de experiencia y es ¿como puedo pasarle variables URL o CLIENT de índex.cfm a upload_files, ya que no me permite agregar en este ultimo la etiqueta <cfapplication> ya que me marca error?
básicamente estoy tratando que en una sola plantilla se suban archivos a un álbum y usuario especifico, mismos que están declarados en variables URL o CLIENT sin embargo NO FUNCIONA colapsa el script, gracias de antemano por tu respuesta

@Daniel,

I didn't know Ben speaks Spanish...

Hi Ben I'm testing the application and it works great, I just have one big question for my lack of experience and how can I pass URL variables or CLIENT to upload_files index.cfm, it does not allow me to add in this last label <cfapplication> as I mark error?
I'm basically trying to template files in a single album and a specific user, same variables are declared in URL or climb CLIENT DOES NOT collapses however, thanks in advance for your answer script

@Phil,

I added the following and the uploads in IE started working....but the drag and drop still doesn't.

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Hello Ben, I'm using this plugin for a client to allow them upload multiple files.
Their application is big and they have multiple forms that may need this feature.
All these forms are displayed in a tabbed environment. This is, in the main page all the forms are <cfincluded>, but they will show only when the right tab is on.
So I added the first implementation and everything worked smooth.
When I added the second implementation, everything stopped working.

Basically when I click the drop hot area in the first form I have implemented, I see the file selection dialog. However it won't open when I do the second implementation.

Can these IDs ( <div id="pluploadContainer" class="uploader">) be part of the problem? If so, should I change also the uploader.js?

I have tried many things and I'm not able to make it work.

Thank you for your help Ben!

Thank you Ben! I'll give it a try.

Hummm...

I copied the GitHub folder on my server and changed the index.htm to index.cfm.

This is what I get (from the application.cfc):

Invalid CFML construct found on line 4 at column 9.
ColdFusion was looking at the following text:
output

The CFML compiler was processing:

A script statement beginning with component on line 3, column 1.
A cfscript tag beginning on line 1, column 2.

The error occurred in C:\wwwroot\test\Application.cfc: line 4
2 :
3 : component
4 : output = "false"
5 : hint = "I define the application settings and event handlers."
6 : {

Any hints ??!

I run CF8

Thanks

Gilles

I think the problem is CF8...which will not take the script notation for the application.

Try wrapping it like this:

<cfcomponent output="false" accessors="true" displayname="Name" name="test">
<cfscript>

what the application.cfc file has between the <cfscript> tag goes here.

</cfscrip>
</cfcomponent>

@dani

No use, doesn't work... Is it possible to have a "translation" of the application.cfc in <cfcomponent> style ?!?

Thanks

Gilles

Hey

@Gilles,

please see my code: http://pastebin.com/XVnFF96H

@dani

I added these lines in your code, just after the <scfscript> and it's working fine:

this.name = hash( getCurrentTemplatePath() );
this.applicationTimeout = createTimeSpan( 0, 0, 10, 0 );
this.sessionManagement = false;

Thanks so much, I'll add the code to insert the image name in the database as well.

Gilles

Thank you @Gilles, happy that it works now.

@dani

In the upload_files.cfm, after the <cffile>, I try to get the file name to insert it in the database.

Unfortunatelly, the #cffile.serverfile# does not seem to work... Any way to go around so I can get the name ?!?

Thanks

After the file is save via cffile (upload_files.cfm), why can't I access it and insert the name in my database with #cffile.serverFile# ??

The code:
<cffile
result="upload"
action="upload"
filefield="file"
destination="#application.uploadsDirectory#"
nameconflict="makeunique"
/>

<cfquery datasource="test">
INSERT INTO images (id, file)
VALUES (#id#, '#cffile.serverFile#')
</cfquery>

Weird...

Gilles