Using the Coldfusion filemanager standalone as a file interface

Standalone filemanager exampleSomeone asked me today if you could use the Coldfusion filemanager plugin for CKeditor as a standalone application. That's a great idea, I thought. It can replace the regular file upload fields.

You can view a working example here.

 

Download

  • You still need to download the CKeditor with the filemanager, but you only need the directory "filemanager" and the files "jquery-1.3.2.min.js" and "standalone.html"

The source for the implementation is the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Coldfusion filemanager standalone - demo</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var fileeditorwin = null;
var destField = null;
function startfilemanager(destinationFieldID)
{
// open window?
if (!fileeditorwin || fileeditorwin.closed)
fileeditorwin = window.open('filemanager/index.html?type=File&currentFolder=/', 'fileeditorwin', 'width=800,height=500,resizable=true');
// focus window (handy if it blurred)
fileeditorwin.focus();
// remember the field ID where to store the path
destField = destinationFieldID;
}
function SetUrl(path, width, height)
{
$('#'+destField).val(path);
$('#imgwidth').val( (width||'') );
$('#imgheight').val( (height||'') );
}
</script>
</head>
<body>
<input type="text" name="filepath" id="filepath" size="100" style="width:500px;" value="" />
<input type="button" value="Upload/choose file" onclick="startfilemanager('filepath')" />
<br />
width: <input id="imgwidth" size="5" />
height: <input id="imgheight" size="5" /> (if chosen file is an image)
</body>
</html>
del.icio.us Digg StumbleUpon Facebook Technorati Fav reddit Google Bookmarks
| Viewed 5442 times
  1. Tim

    #1 by Tim - december 4, 2010 at 20:30

    Very nice!
  2. kristof polleunis

    #2 by kristof polleunis - februari 6, 2011 at 0:33

    links are broken
  3. Paul Klinkenberg

    #3 by Paul Klinkenberg - februari 6, 2011 at 13:18

    @Kristof: which links are broken? I just checked all of them, and they are all working fine :-/
  4. Mike

    #4 by Mike - maart 1, 2011 at 10:15

    Paul,
    First off thanks for this. It looks great. I have been trying to install it as a stand alone with a newer version of CKeditor. I have it so that the browser server button works and the window loads. I can see the folder/files on the left in the tree but the corresponding files on the right don't load. I just see the spinning icon and never loads the files. Any thoughts?

    Mike
  5. Paul Klinkenberg

    #5 by Paul Klinkenberg - maart 1, 2011 at 10:50

    Hi Mike, as follows: use firefox, install firebug extension, open firebug, go to the Console tab of firebug, and check what happens. I think you will see one or more red lines, indicating ajax errors. Right-click the red line, and choose "open in new tab". It will then show you the exact error.
    Also, see the install instructions for the filemanager itself, at http://www.railodeveloper.com/post.cfm/ckeditor-3-with-coldfusion-filemanager-version-2-0-for-free

    Good luck, Paul
  6. Mike

    #6 by Mike - maart 1, 2011 at 18:11

    @Paul,
    Thanks for the reply. This is what I'm getting in Firefox.
    GET http://bbqto:90/BBQ/maint/filemanager/connectors...anager.cfm?path=/&mode=getfolder&showThumbs=true
    GET http://bbqto:90/BBQ/maint/filemanager/connectors/cfm/filemanager.cfm?path=/&mode=getfolder&showThumbs=true
       
    500 Cannot declare local variable CFCATCH twice

    Any thoughts?
  7. Mike

    #7 by Mike - maart 1, 2011 at 21:54

    @Paul Klinkenberg

    Further investigation is showing this.

    Cannot declare local variable CFCATCH twice.
    Local variables cannot have the same names as parameters or other local variables.

    The error occurred in filemanager\connectors\cfm\Application.cfm: line 19

    17 : <!--- initialize the filemanager object if not yet existent --->
    18 : <cfif not structKeyExists(application, "filemanager_obj") or structKeyExists(url, "init")>
    19 :    <cfset application.filemanager_obj = createObject('component', 'filemanager-functions') />
    20 :    <cfif structKeyExists(url, "init")>
    21 :       <h1>Filemanager cache has been flushed!</h1>
  8. Mike

    #8 by Mike - maart 6, 2011 at 17:01

    @Paul Klinkenberg
    I hope you enjoyed Scotch on the rocks. I've been trying long and hard to solve my issue. Did a clean install. Initially I have my initial problem of folders/files loading on left side fine but files on right I just get spinning icon. In application.log it says.

    Cannot declare local variable CFCATCH twice.Local variables cannot have the same names as parameters or other local variables. The specific sequence of files included or processed is: Removedby me\filemanager\connectors\cfm\filemanager.cfm''

    I had figured out the other day that if i comment out the addfile function in filemanger-function.cfc line 303 refreshed the paged this corrected the issue. Then uncomment and its working on the right side. Which brings me to a new issue Adding a file doesn't work.

    Application.log says
    The method addFile was not found in component Removedby me\filemanager\connectors\cfm\filemanager-functions.cfc.Ensure that the method is defined, and that it is spelled correctly. The specific sequence of files included or processed is: Removedby me\filemanager\connectors\cfm\filemanager.cfm, line: 29

    Firebug is also showing a Syntax error on line 691 in filemanager.js
    var data = eval('(' + $('#uploadresponse').find('textarea').text() + ')');

    I really would like to get this working. Seems really nice.
  9. Paul Klinkenberg

    #9 by Paul Klinkenberg - maart 7, 2011 at 16:24

    Hi Mike, if you remove all occurences of the following line in the cfc, your problem will probably be solved:
    [cfset var cfcatch = "" /]
    what version of Coldfusion are you using btw?
  10. Mike

    #10 by Mike - maart 7, 2011 at 16:39

    @Paul Klinkenberg

    Hi Paul, Ok i removed the only instance of it. Restarted the server and the first error is gone CFCatch but I'm still getting addfile was not found. And the JQuery stytax error. I'm on CF9.01
  11. Mike

    #11 by Mike - maart 8, 2011 at 15:16

    @Paul Klinkenberg

    Ok I got it to work perfectly by removing the Application.cfm stuff to a higher level Application.cfc. So It's perfect now. Thank for the great tool.
  12. Fernando

    #12 by Fernando - april 1, 2011 at 10:58

    Hi! Thanks for all your job!

    I`ve tried it in both CF8 and CF9 versions and only works in CF9.

    In CF8 i can see the tree, and even i can create a folder and upload an image, but when i click on it, i only obtain the spin wheel in the right side.

    Thank U!!
  13. Paul Klinkenberg

    #13 by Paul Klinkenberg - april 1, 2011 at 12:21

    Hi Fernando, I think the latest version (2.1) will work on CF8 as well. See http://www.railodeveloper.com/post.cfm/ckeditor-3-with-coldfusion-filemanager-version-2-0-for-free
    Also, see the debugging tips on that page, so YOU can find out what is not working, and report that.
    Cheers, Paul
  14. Fernando

    #14 by Fernando - april 1, 2011 at 13:01

    Thanks! i just have written in that link!
(will not be published)
Leave this field empty

apparatus