Posted in jQuery, ColdFusion | Posted on 03-29-2010 | 7,458 views
A few weeks ago I blogged an example of a "complete" cffileupload demo. Most examples of this tag are very simplistic and don't reflect what a typical form would consist of - ie both a multi-file uploader along with other form fields. A reader commented that they were curious if this could be combined with some sort of preview. I had recently done a blog entry on a related JavaScript library but today I've modified the CFFILEUPLOAD one to add a preview. As this uses most of the code from the original example, I strongly urge you to read that one first. I'll just be explaining the differences and none of the existing code.
To begin, I modified my cffileupload tag to run JavaScript on every file upload. That was as simple as adding the oncomplete argument:2 maxfileselect="5" title="Portfolio Images" url="fileupload.cfm?#urlEncodedFormat(session.urltoken)#"
3 oncomplete="previewfile">
(By the way, I also added PDF to the list of extensions, more on the later.) The previewfile function will be passed an object containing the filename and the result from our server side code that handles uploads. Our demo code uses the same name as the user's file, so there is no need to worry about the file having a different name on the server. Here is what I did with the result:
2<script>
3function previewfile(file) {
4 var previewHTML = '<span class="previewSpan"><img src="preview.cfm?s=' + file.FILENAME + '"></span>'
5 $("##previewArea").append(previewHTML)
6}
7</script>
Pretty complex, eh? All I needed to do was create some simple HTML. I point to a new CFM called preview and pass in the file name. Let's take a look at preview.cfm.
2
3<cfif isImageFile(session.myuploadroot & "/" & url.s)>
4 <cfimage action="read" source="#session.myuploadroot#/#url.s#" name="img">
5 <cfset ext = listLast(url.s,".")>
6 <cfset imageScaleToFit(img,125,125)>
7<cfelse>
8 <cfimage action="read" source="default.jpg" name="img">
9 <cfset ext = "gif">
10</cfif>
11
12
13<cfset bits = imagegetblob(img)>
14<cfcontent type="image/#ext#" variable="#bits#">
So what's going on here? Remember that we use a special folder in the virtual file system for the user's uploads. Because of this we can source a CFIMAGE to the file requested. We can also check to see if the file is a valid image. If it isn't, we can use a default picture instead. The final thing we do is get the actual bits and serve it up via cfcontent. Here is a screen shot of the result. Notice that I could have made this look far nicer.
Hopefully this makes sense and is useful!
I have never used cfcontent to show back an image like this, I just upload it then show the location in ram just like a reg hhd location.
I don't have an example on hand of just an image but just made a short clip of a video uploader that uploads the video then converts and grabs a thumbnail img from video and displays it back kinda in this same train of thought but it's after the submission because it's grabbed during the video conversion but could just be as easy if doing just an image.
http://www.deliciouscoding.com/assets/content/vide...
I watched your video - cool stuff. What are you using to handle video conversion? ffmpeg?
I also upload to a folder outside the webroot then virus scan and rename to a uuid right away then pass it into the ram drive for all the processing so that it can be used like just like this for immediate feedback without being in the webroot and thus not needing cfcontent. Nothing wrong with cfcontent just more overhead. The ram drive is a god send! I can't even begin to tell you how much code I am able to take out of uploads by just using it.
The video conversion is done via Railo's cfvideo tags and yes it used ffmpeg. It's crazy how fast it does the conversion. When you see the thumb pop in everything is already done.
One drawback to ffmpeg though is that it rips out all the metadata so the resulting flv can't supply the player with metadata and things like the scrubber bar won't work. What I do is grab the metadata before the conversion then re-inject it back in after the conversion but you got to install some some other tools into os to do that.
In other words - yes - a mistake. :)
- what is that admin tool you are using? asside from the uploader function, is that something you've built yourself.
it looks like it's nicely designed and might be useful. what theme is that and is it available for download?
also, what are you using to crop that video on screen? is that cropped live or in post?
That admin is just one I made.
The screenie of the video is done during the video conversion process and its part of the Railo video tag. So basically you tell it when to extract the image and where to put it then you can do whatever u want with it. I choose to show it back with the thumb but you could certainly do anything with it at that point.
thanks :0)
if I try to use cffileupload on our production server nothing shows up, like there was nothing on the page. If I put simple text I see the text but not the supposed interface. Server is using CF9.0
I just used the exemple on the adobe help section.
function previewfile(file) {
4 var previewHTML = '<span class="previewSpan"><img src="preview.cfm?s=' + file.FILENAME + '"></span>'
5 $("##previewArea").append(previewHTML)
6 }
7 </script>
With this $("##previewArea").append(previewHTML)
we can do it as
$("#previewArea").append(previewHTML) and then define the
<div id="previewArea"></div> at the below
and it will work. I am also trying to add the lighbox effect to the generated images to see how it can work, once done i will share the code
<cfset bits = imagegetblob(img)>
causes this error;
An error occured in converting the image to base64 in the required image encoding. Base64 images can be created with ColdFusion in BMP,JPEG,PNG,PNM,and TIFF formats.
Also if I try and to convert the pdf to a jpg thumbnail with cfpdf It does not recognize it as image and displays the default;
[Add Comment] [Subscribe to Comments]