Dec

14

ColdFusion 8: Enable File, Image and Flash upload in the rich text editor in five steps

Filed Under ColdFusion | 64 Comments


[Update] : Hotfix for Security issue with FCKeditor : Please refer to this post

[Update] : If you are on ColdFusion 8.0.1, then refer my recent post

As most of us know, the file, image or swf upload is disabled in the rich text editor available as a part of the Ajax support in ColdFusion 8. The FCKeditor, the rich text editor integrated in ColdFusion 8, allows such an upload. By default, this is disabled by ColdFusion to prevent security issues that might arise. But you may still want to use this feature provided supported by FCKeditor. This post will detail how this can be done in easy steps.
<cfform>
<cftextarea richtext=true name=”richtext01″/>
</cfform>
This will give out the rich text editor as we know. More details about the usage of the tag can be found here.
Now to enable upload functionality.
Step 1 : Add the entries to the toolbar in fckconfig.js
ImageButton, Link, Unlink, Image, Flash
Add only the entries that are required iamong the above ones onto the fckconfig.js present under /CFIDE/scripts/ajax/FCKeditor/ directory.
Here’s how I have added the entires.
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','HiddenField'],
['ImageButton','Link','Unlink','Image','Flash'],
‘/’,
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Anchor'],
['Table','Rule','Smiley','SpecialChar','PageBreak'],
‘/’,
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
Step 2 : Set _FileBrowserLanguage and _QuickUploadLanguage in fckconfig.js
Find _FileBrowserLanguage and _QuickUploadLanguage properties and set them to cfm.
var _FileBrowserLanguage = ‘cfm’;
var _QuickUploadLanguage = ‘cfm’;
Step 3 : Copy the cfm files into the directories under FCKeditor
Download fckcfms.zip
Extract it.
Copy config.cfm and connector.cfm under connectors/cfm into /CFIDE/scripts/ajax/FCKeditor/editor/filemanager/browser/default/connectors/cfm/ directory.
Copy config.cfm and upload.cfm under upload/cfm into /CFIDE/scripts/ajax/FCKeditor/editor/filemanager/upload/cfm/ directory.
Step 4 : Set the enabled property to true in both the config.cfm files copied
browser/default/connectors/cfm/config.cfm
config.enabled = true;
upload/cfm/config.cfm
config.enabled = true;
Step 5 : Create directories under the upload directory.
The config.cfm under the upload directory has a property called userFilesPath which points to the directory where the uploaded files will be stored.
config.userFilesPath = “/userfiles/”;
Under this directory create folders Image, File and Flash to support upload of image, file and flash files respectively.
There are a whole lot of config properties in the two config.cfm files which can be used to set everything from paths to file formats supported.

And that’s it! You can now start using the upload functionality in the ColdFusion rich text editor.

Comments

64 Responses to “ColdFusion 8: Enable File, Image and Flash upload in the rich text editor in five steps”

  1. Azadi Saryev on December 14th, 2007 7:58 am

    Great post,Rakshith! And perfect timing (well, at least for me… :) )

  2. Anuj Gakhar on December 14th, 2007 9:03 am

    That is really nice. I remember struggling once to do that. Thanks.

  3. Dan Sorensen on December 14th, 2007 9:43 am

    Thank you for sharing the details of this option. I’ve been waiting to see functionality this for some time. :-)

  4. Rakshith on December 14th, 2007 11:12 am

    Dan, Anuj and Azadi – Thank you. Am glad this post will be of help.

  5. Michael Santoroski on December 14th, 2007 2:24 pm

    FCKeditor as shipped with CF8 doesn’t work with Safari. I’d love to find a way to upgrade the built in FCK to the latest on on their site (version 2.5). Does anyone know how to do that? Thanks, and this upload will be a big help too!!

  6. Rakshith on December 14th, 2007 7:22 pm

    @Michael – Thanks Michael. FCKeditor 2.5 does work well on safari and opera. We are already working on the upgrade to 2.5.

  7. Shigeru on December 15th, 2007 2:12 am

    About “connectors/cfm/connector.cfm”,

    Line 82 should be below
    userFilesServerPath = userFilesPath & url.type ….

    Live 100 should be below

    connector.cfm automatically create directories like File,Image,Flash,Media. Why not upload.cfm??

  8. Shigeru on December 15th, 2007 2:13 am

    Hmmmm… tag was deleted

    Line 100 should be below
    cfset currentPath = serverPath

  9. Rakshith on December 15th, 2007 4:14 am

    Wow. That’s surely a bug in FCKeditor. Nice find Shigeru. We got to report this bug to FCKeditor. The bugs can be reported at http://dev.fckeditor.net. Can you go ahead file a bug out there or do you want me to file one. Let me know.

    Thanks Shigeru.

  10. Shigeru on December 15th, 2007 6:18 pm

    Hi, Rakshith.

    Nice to see you. Could you log this bug instead me?

  11. Dave Phipps on December 16th, 2007 3:17 pm

    Hi,

    I found having to use the UserFiles folder with the Image, File etc subfolders a little restrictive so I modified the connector to allow any directories to be specified. For example in our system we have an images dir, a downloads dir. These are both in the webroot. I then specify ‘/’ as the UserFiles path and there are some extra settings that can be added to the config.cfm to specify the subdirectories to use for each type (file,image, flash etc). If anyone wants to take a look let me know.

    Cheers,

    Dave

  12. Rakshith on December 17th, 2007 1:00 am

    @ Shigeru : Sure. I will log this one. So you are saying that by making this change, the creation of directories issue will be solved, right?

    @ Dave : Thanks for that Dave. If it makes sense for us to contribute this change back to FCKeditor, we can do that as well. Let me know.

  13. Dave Phipps on December 19th, 2007 10:38 am

    @Rakshith : I found most of the code on the FCKeditor site so I think they are already aware, but it took quite a bit of digging to find it.

    I will gladly share the code with the cf community though. Haven’t really got anywhere to upload it to at the moment. I also need to go through and document the changes that I made.

    Cheers,

    Dave

  14. Mike Sharp on December 20th, 2007 9:06 am

    Rakshith,

    Can these files be added to a local copy, ie like you mention here….
    http://www.rakshith.net/blog/?p=22 comments 18 ish – as in to the files specified in the basepath, im thinking this as its shared hosting that i am on :)

    thanks again

  15. Rakshith on December 20th, 2007 11:37 pm

    Yes Mike. You can use the basepath attribute on a shared hosting and point to your local copy of the editor files.

  16. Mike Sharp on December 21st, 2007 2:12 am

    @Rakshith,

    Thanks for the replies – i have it almost working, but am seeing some strange behaviour.

    The upload works a treat – and i can see the files uploaded via my ftp client fine, but the file browser isnt.

    On investigation the file browser is looking outside of the wwwroot file. When i create a folder in the filebrowser window a folder called wwrootImage is created next to the wwwroot folder.

    Im using the files in the folder referenced by the baseref attribute

    am i missing something?

  17. Mike Sharp on December 21st, 2007 2:43 am

    I have replaced your connector.cfm with an original and it works – i fear you may have missed something, – a couple of lines were different :)

  18. Mike G. on December 23rd, 2007 6:41 am

    I’m submitting some code to you guys. I been working on this for 8 plus hours. I cannot get either richtext=”true” or tinymce to work with this cf8 program. I have a feeling the grid is messing with it, because when i took out the grid and dropped references to it in the cftextareas it worked. very frustrated.

    The row action for #Counter# is:
    #Form.gridCFR.rowstatus.action[Counter]#

    DELETE FROM Table_CFR
    WHERE CFR_ID=

    UPDATE Table_CFR
    SET CFR_Sub_Part_ID=#Form.gridCFR.CFR_Sub_Part_ID[Counter]#,
    CFR_Title_ID=#Form.gridCFR.CFR_Title_ID[Counter]#,
    Section=’#Form.gridCFR.Section[Counter]#’,
    Sub_Section=’#Form.gridCFR.Sub_Section[Counter]#’,
    Contents=’#Form.gridCFR.Contents[Counter]#’,
    Comments=’#Form.gridCFR.Comments[Counter]#’
    WHERE CFR_ID=

    INSERT into Table_CFR (CFR_Sub_Part_ID, CFR_Title_ID, Section, Sub_Section, Contents, Comments)
    VALUES
    (
    #Form.gridCFR.CFR_Sub_Part_ID[Counter]#,
    #Form.gridCFR.CFR_Title_ID[Counter]#,
    ‘#Form.gridCFR.Section[Counter]#’,
    ‘#Form.gridCFR.Sub_Section[Counter]#’,
    ‘#Form.gridCFR.Contents[Counter]#’,
    ‘#Form.gridCFR.Comments[Counter]#’
    )

    Error: #cfcatch.detail#

    SELECT *
    FROM dbo.Table_CFR
    ORDER BY “CFR_Sub_Part_ID” ASC, “Section” ASC, “Sub_Section” ASC

    SELECT *
    FROM dbo.Table_CFR_Sub_Part

    SELECT *
    FROM dbo.Table_CFR_Title
    ORDER BY “Title” ASC

    tinyMCE.init({
    mode : “textareas”,
    theme : “simple”
    });

    —>

  19. Steve on December 28th, 2007 3:28 pm

    I’ve got multiple sites that are on 1 server that I would like to use the image/file uploading for. I followed all the steps and tried to update it via the comments posted above but for some reason I can only get the files to post to C:\inetpub\wwwroot\userfiles\ and not the actual folder the sites sit in. On my server I have D:\websites\site1.com\, D:\websites\site2.com\, D:\websites\site3.com\, etc… and would need each site to contain its OWN userfiles.

    I’ve accomplished this on CF7 and back installing individual copies of fckeditor on each site and coding the pages manually but wonder if its possible to do in CF8?

  20. Rakshith on January 1st, 2008 8:27 pm

    @Mike – Thanks for pointing out the difference in connector.cfm. I will see what is the exact change in the latest connector.cfm and will include the same in this version of connector.cfm.

    Are you still facing an issue with grid and rich text area?

    @Steve – In the config.cfm under the upload directory, you can change the default value of userFilesPath which points to “/userFiles” to what is required in your case. Let me know if this helps.

  21. Marxan on January 3rd, 2008 6:30 am

    I have a problem with image upload, when I upload a file, it is added in the Ressources browser. But when I try to put it in the editor I get an blank image with a red cross inside. Does someone has an idea what could be the problem?

    Thanks in advance

  22. Rakshith on January 8th, 2008 9:50 pm

    Marxan,
    Look for your image files in the upload directory (\userFiles\ by default) to check if they really got uploaded to the server. If they are present, click on the source button of the editor to check if the source is pointing to the right path on the server.

    Hope it helps.

    Thanks!

  23. Branden deBuhr on February 4th, 2008 10:01 pm

    I am trying to do essentially the same thing as steve is with regard to uploading image files into multiple sites all with different folder/drive locations. I know you said you could change the variable or location in the config.cfm file. But could you be more specific on the type of variable I can set in the config.cfm file as well as in my application settings for my website? So for example, on the page where I call the fckeditor, I’d like to do something like and then call that variables.folderpath inside the config.cfm file. But since the fckeditor is in my root path, can I pass in that variable?

    Please be specific on variables and such which I’d need to use to make this work. I haven’t found any code examples on doing this anywhere.

    Thanks, This would be a big help!

  24. Branden deBuhr on February 4th, 2008 10:04 pm

    Ooh, One more thing, I’d like to if possible, disable some of the tabs in the image upload pages so that flash is not an option. Plus, I want to take out some form elements on these pages. Is this also possible? Basically I need to dummy it down a bit for people using my site. These will be used by random people so security is a concern.

    Thanks again!

  25. Branden deBuhr on February 4th, 2008 10:05 pm

    I just noticed in the post above, my cf code I posted is missing. Not sure why…

  26. Dave Miller on February 8th, 2008 2:12 pm

    Is there a way to set the userFilesPath via javascript or in the cftextarea tag so that multiple sites can use the files?

  27. Rakshith on February 12th, 2008 2:31 pm

    Dave,
    Unfortunately, there is no way yet to set the userFilesPath via JavaScript or in the cftextarea tag.

  28. Rakshith on February 12th, 2008 2:37 pm

    Branden,
    Its pretty straight forward to disable the tabs that you do not want to show up in the upload option.

    Set these properties in the fckconfig.js based on what you need and dont:

    FCKConfig.LinkBrowser = false ;
    FCKConfig.ImageBrowser = false ;
    FCKConfig.FlashBrowser = false ;
    FCKConfig.LinkUpload = false ;
    FCKConfig.ImageUpload = false ;
    FCKConfig.FlashUpload = false ;

    But there is no way that I know of to set these properties directly from JavaScript without editing these files or setting the variables such as userFilesPath in the cfm.

  29. Stick on February 15th, 2008 10:05 am

    I had to change connectors\cfm\config.cfm to:

    config.userFilesPath = “/inetpub/wwwroot/userfiles/”;
    config.serverPath = “D:\inetpub\wwwroot\userfiles\”;

    But how do I change it so that a differnt “userfiles” directory is uses for each site?

  30. Branden deBuhr on February 18th, 2008 9:21 pm

    Ok, I didn’t really mean to set the userfiles path in javascript or even in the cftextarea tag. I would like to set a variable in my application and then call that variable within the config.cfm file which specifies where the files go.

    I guess another way to say it would be how do I get a variable I set in my application to carry through into the fck editor files? Since the files are called and or used within my site directory as a virtual directory, does that mean that I can set an application variable or a request variable? Or, can I do an include inside the config.cfm file to the file in my application which needs to set the file location. Any help would be great!

    BTW, thanks for setting me straight on the fckconfig.xxxproperties=false; That looks easy enough now.

  31. Bruce Sorge on February 21st, 2008 11:36 am

    OK, here is my issue. I followed the steps above. When I go to create a link, I of course select the Hyperlink button, and the window opens. I select Browse Server. I then create a new folder. Once that is done I see the folder. I click on the folder to open it, and select Browse to load a new file into that folder. I find the file, click OK, then click Upload, and it appears to work fine. I click on the file and make the hyperlink. Problem is, there is no folder being created and there is no file being uploaded. I did a complete search on my server for the folder name and file name on the entire drive and still I cannot figure out where the folders and files are. It is strange that FCK will “create” a folder and “upload” a file, and by the looks of the editor they are there, but in reality they are not. Any assistance would be greatly appreciated.

    Bruce

  32. Rakshith on February 21st, 2008 10:41 pm

    Branden,
    Check out my post titled ‘All about the rich text editor’. There is a specific attribute called the basepath using which you can actually move the fckeditor files out of the CFIDE directory into perhaps your application directory.

    Once you do that, your application scope will be available in the config.cfm as well.

  33. Rakshith on February 21st, 2008 10:42 pm

    Bruce,
    Are you saying that the upload does not seem to be working at all? That’s actually strange.

  34. Lonnie on March 10th, 2008 9:26 pm

    Excellent post! This is the exact information I was looking for today, and you had it.

    Thanks for saving the day!

  35. Cathy on March 18th, 2008 3:43 pm

    Great post, do you know if there is any way to implement this in a coldfusion flash form?

  36. Rakshith on April 1st, 2008 12:05 am

    @Lonnie : Am glad this helped you.
    @Cathy : ColdFusion Flash Form does not have a rich text editor built in. So you cannot get this working on a ColdFusion Flash form.

  37. Chris on April 3rd, 2008 5:06 am

    I have followed these instructions, but the new toolbar buttons are not showing up in the rich text editor. I have moved the entire FCKeditor directory to a location in my local files. I have followed all of the instructions listed, but still do not see the new buttons. Any ideas as to what is wrong?

  38. brian on April 7th, 2008 3:29 am

    Looks like things have changed with 8.01. are the directories different?

  39. Rakshith on April 7th, 2008 3:43 am

    Yes, its actually much easier to get the file upload working in 8.01. It has also been documented on how it get it working. Let me know if you are not able to find the update on docs.

  40. brian on April 7th, 2008 4:02 am

    I’ve set FCKConfig.ImageBrowser = true ; and FCKConfig.ImageUpload = true ; in fckconfig.js but when I select the image insert icon the dialog box that comes up only has a URL box which you can type in to. This works as far as it goes but there is no option to upload a new image or browse to an existing one.

  41. brian on April 7th, 2008 5:49 am

    deleting my temporary internet files seems to have fixed it

  42. John on April 22nd, 2008 5:21 pm

    I had a problem with copying and pasting the lines of code from this blog into Dreamweaver. The single quotes and commas may have been in a different character set.

    This solution did not work at first (screen was blank). After I deleted and re-typed the commas and quotes in this line:
    [’ImageButton’,'Link’,'Unlink’,'Image’,'Flash’],
    (See how some single quotes are slanted, some are straight up and down)

    New:
    ['ImageButton','Link','Unlink','Image','Flash'],

    It worked! Just thought I would share)

  43. Charley Ruggiero on May 2nd, 2008 10:18 am

    This is a little complicated, but I would like the image uploader to put it in an arbitrary place on my server for example

    c:/domains/imgserver/httpdocs/fckuploads/

    and then have the FCK spit out code that will point the img src to

    http://www.myimages.com/fckuploads/myimg.jpg

    which is an absolute URL and has nothing to do with the site the FCK happened to be on

    Is this possible?

  44. richard steele on May 20th, 2008 6:20 pm

    Can code be added to limit the upload size? If so which file would it be added to and what might the code look like? Many thanks.

  45. Donna Stewart on May 23rd, 2008 9:48 am

    Hi – thank you so much for this. I have followed all of the instructions, but when I try to upload an image, it keeps creating a wwwrootImage folder in wwwroot and uploading the image there. Not in /userfiles/Image. So of course, the editor is not finding the image. Any ideas/suggestions?

    Thank you!
    Donna

  46. Rakshith on May 27th, 2008 10:34 pm

    @ John – Thanks for the update.

    @ Charley – You will have to play with the cfm files under the FCKEditor to find out if this is possible.

    @ Richard – I am not aware of this one. But I suggest you take look the cfms responsible for the upload(there are just a couple I believe). That should give you an idea on what is happening on the CF side during upload.

    @Donna – Are you on ColdFusion 8.1? There was an issue and it has been fixed with the updater. I suggest you to move to the updater and try it out. And it is much simpler to enable file upload in the updater without having to go through the changes mentioned in this blog post. It has also been documented in the updater on how to enable file upload and spell checker on FCKEditor.

  47. james carberry on July 9th, 2008 6:04 am

    i must be missing some small step as I was able to insert the toolbar and unzip / modify the specified files, but the “upload” option still does not show.

    I will pay you via PayPal to do a GotoMeetting with me and have you fix if you can. Thx. -j

  48. james carberry on July 9th, 2008 6:17 am

    please ignore my last question – your last post solved it for me. Thx!

  49. Rakshith on August 1st, 2008 11:54 am

    @james – Good to know that the issue got solved. Where’s my payment? Just kidding :)

  50. Ryan on September 3rd, 2008 12:50 pm

    Hello,

    I’m attempting to place the userfiles/image directories into a directory other than the default directory that houses the CFIDE and cfdocs directories.

    Is there a setting to control this location?
    I’m only able to find config.userFilesPath that pertains to relative path naming but not to a specific directory outside of the relative root path.

    Thank you for any input!
    Ryan

  51. Ryan on September 4th, 2008 8:30 am

    Hello Again,

    OK, I figured out the directory situation except one small issue: The FCKeditor is including an image directory and placing the image files in it.

    How can the image directory not be included? Is there a setting for this somewhere?

    Thanks,
    Ryan

  52. moumita on November 20th, 2008 6:35 am

    Hi,I have few issues with CF8
    1.I am trying to upload a blank text file in CF 8 and it throws an error .
    I have tried to fix with cgi.content_length but looking for a better option.

    2.Another issue is how to upload a file in a different server.Like i have CF server in server1 and i want to the file upload in server2

    Will appreciate any help.Thanks

  53. Jay Smith on May 4th, 2009 9:34 am

    Hi I’m having the same issues as Donna. When I try to upload an image, it keeps creating a wwwrootImage folder in wwwroot and uploading the image there. Not in /userfiles/Image. So the editor is not finding the image.
    Thank you!
    Jay

  54. lwill on May 27th, 2009 5:07 am

    I find it hard to believe that I have to have multiple instances of the fckeditor on my site in order to customize the upload path for /userfiles/.
    I have tried application and session vars to no avail. I have the editor sitting at the root c:\inetpub\wwwroot and many sites below. How do I get specific paths into the config structure so that each site uploads images to their own directory without having multiple copies of the editor?
    c:\inetpub\wwwroot\site1\files\userfiles\images
    c:\inetpub\wwwroot\site2\files\userfiles\images
    I’ve been working on this and reading blogs for days with no luck.
    my basepath is set to /fckeditor/ and that mapping works. I just can’t seem to get the application vars passed.
    Help?

  55. Rakshith on June 29th, 2009 1:07 am

    @Iwill : Check out a post that I have, where a solution to get the exact stuff that you are trying to get working has been described on the FCKEditor site.

  56. Rakshith on June 29th, 2009 1:15 am

    @ Jay: Are you are CF 8.0.1? I remember there was a similar issue on ColdFusion 8 and was fixed in CF 8.0.1.

  57. mwoods on January 18th, 2010 12:38 am

    I seem to be having a problem. I am using CF 8.01 on Linux and I have followed the directions on this guide (which is great by the way) and I seem to be having some problem.

    I have made all of the changes and I have the proper permissions on the /userfiles directory but every time I try to upload an image I get an “Invalid file” error.

    I have checked the allowed extensions and jpg and gif images are in the allowed extensions.

    I’m at a loss and I really would like to use the FCKeditor for this client and allow them to upload and manager their own content. Any help would be appreciated.

    Thanks

  58. Vicki on January 28th, 2010 10:05 am

    can this (file fckconfig.js) be saved in local and modified without impating others? (if i only need for my app)

  59. Rakshith on January 28th, 2010 11:27 pm

    @mwoods: Can you give more details about the error? Are you sure you have followed all the steps? Also make sure to apply the security fix for CF 8.0.1 for the fckeditor file upload issue.

  60. Rakshith on January 28th, 2010 11:32 pm

    @Vicki: I am not sure I understand you question completly. But yes fckconfig.js is a file that can be customized based on what configuration you desire.

  61. Vicki on January 29th, 2010 7:57 am

    hi Rakshith, What i understand is this file is stored in the server and i don’t want to mess with this because of the security. My question is if i can take this file and place in my local folder for particular app and modify it to work only for my app?

    thanks

  62. vicki on February 5th, 2010 9:33 am

    I followed the 5 steps above, but the code from upload/cfm/config.cfm has been encrypted, is there the way i can see the coldussion code?

    thanks

  63. FALCONSEYE on February 10th, 2010 10:58 am

    Just found this entry. Great info, but I have a question. On IE 7, i click on insert/edit image button. Nothing happens when i click on the “browse server” button in image info tab. (in the image properties pop-up). Driving me nuts! This works in FireFox.

  64. FALCONSEYE on February 10th, 2010 11:02 am

    O wow, the retarded IE was somewhat blocking the second pop-up. #!!@#@!#! mikrosuk

Leave a Reply