Uploading images with FreeTextBoxWrapper control

Although CommunityServer supports automatic creation of blogs and galleries for each new user, and the post editor supports upload of images while posting with the use of "Content Selector", the number of people asking how to upload an image on the server, while posting is increasing.

In the next paragraphs, I will describe how to set up FreeTextBoxWrapper control in order to upload a picture in the server.

FreeTextBox control provides the functionality to upload pictures through its ImageGallery support control. FreeTextBoxWrapper control implements a special "Insert Image from Gallery" button that navigates a user to its directory – assuming that his directory is named after his username. This button is available through "FreeTextBox Enhanced" editor.

Let’s suppose we want all the pictures to be stored in a folder called "Users" under the root folder of the site – "~Users". In order to setup the directory that the images are going to be stored, we need to modify the Skin-Editor-FTBEnhanced.ascx in ~themesdefaultskins folder. We add the ImageGalleryPath attribute:

In order to set the users permissions, in order to allow them, upload/delete images in this folder, we need to modify ftb.imagegallery.aspx in ~/FreeTextBox3 folder. We change imageFolder variable:

We have to choose the FreeTextBox Editor from the user profile in order to use it:

Next thing is to locate the "Insert Image from Gallery" button in the editor:

As soon as one presses the button the gallery window pops up. If there is a folder named after the username, then the user is navigated to that folder, where he has the permissions to upload/delete images. In case there isn’t, the user is navigated to the root images folder, where we can navigate and select an image already uploaded

In order to upload a picture, press "Browse" and select the image from the local drive, and press "Upload"

If the upload is successful you will have a status

You can see image’s thumbnail in the gallery window and select it to enter it to your post.

This is it!