Haitham's Blog


Let's move your ASP.NET applications to the professional level...

Uploading Images Using FCKeditor with ASP.NET

I’ve a project in which I need to insert images in the the FCKeditor working area.. I Thought it’s simple just press the insert image icon, browse for it and we are done, but actually it’s not that simple, it needs some configurations which I’d like to share it with you..

There are two scenarios of inserting an image weather you are going to insert it from a URL (the easy one) and the second if you want to insert an image from your hard drive (needs configurations)

A)To insert an image from a URL:

Just click the insert image icon  image_button   and paste the URL of the image and click ok and its done.

B) To Upload image from your hard drive:

1- Create a base folder to be the folder used by the users of your website to upload photos in your application base directory, by default its name is “userfiles”, or name it whatever you need as we’ll use this name in the following steps.

2-Under this folder create another folder and you must name it “image”.

3- In the “fckconfig.js” file:

  • Change the following
    • “var _FileBrowserLanguage    = 'php' ;” to “var _FileBrowserLanguage    = 'aspx' ;”
    • “var _QuickUploadLanguage    = 'php' ;” to “var _QuickUploadLanguage    = 'aspx' ;”

Those two lines defines which File Browser connector and Quick Upload  "uploader" to use.

4- In the previous step we defined the connector to be used that’s why the connector in the folder “FCKeditor\editor\filemanager\connectors\aspx” will be used, in this folder there is “Config.ascx'” file, open it using Visual Studio and do the following changes:

  • Change the following
    • “UserFilesPath = "/userfiles/";”  to “UserFilesPath = "~/userfiles/";”
    • Note that you can replace “userfiles” by the folder name you used in step 1.

5- In the same File “Config.ascx” there is a function called “CheckAuthentication” which returns a true in case of the user is authenticated, for this function to communicate with you application it uses a session parameter name it anything you like and edit this function to check its value and return true to authenticate the user to upload images, to explain more I’d like to borrow the comment of the function from the “Config.ascx” as follows:

       // WARNING : DO NOT simply return "true". By doing so, you are allowing
        // "anyone" to upload and list the files in your server. You must implement
        // some kind of session validation here. Even something very simple as...
        //
        //return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
        //
        // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
        // user logs in your system.

6- Now to insert an image from your hard drive

  • Click the insert image icon image_button .
  • Click Browse Server.
  • A popup window will open, at the bottom click Browse, and browse for the image on your local hard drive and click upload.
  • The image is now uploaded to the “/userfiles/image” folder on the server.
  • click on the image name from the pop up window, then ok, and it’ll be inserted in the FCKeditor.

I hope this helps..

 

Leave a Comment

(required) 

(required) 

(optional)

(required)