General advice about how to implement user photo albums

[Paul]

Hi. This isn't a Telerik specific question but I do want to implement the solution with Telerik controls where possible and appropriate. I just wondered whether anyone could offer any initial comments or guidance.

I have external users for a site that I am developing and they can create photo albums and upload photos. I would appreciate any comments about how best to implement this. In particular:

- I assumed that all photos would be uploaded under a single folder (?) but should each user effectively have their own directory or should I just put all photos (potentially a large number) in one directory

- I had considered renaming files on upload and just creating a guid which I convert to a string and use as the filename on the server. I was then going to have a database table to record which user "own" the photo and the photo's filename. A further table can then create "virtual photo album" (ie have fields for album name, user...). The first table can have an additional field that allocates the photo to an album.

- Is there a way to resize .jpg files on upload?

- Are there any code examples here that show something similar to the above.

[Dobromir]

Hi Paul,

Regarding the question how to store images, I would personally recommend you to have a separate folder for each user. You can dynamically configure RadFileExplorer's ViewPaths / UploadPaths / DeletePaths according to the currently logged user. This approach could eliminate the need of storing information about the files in a database and you can use the RadFileExplorer's default filebrowser content provider.
The following is a sample how to configure user folders:

if (loggedUser)
{
    string folderPath = MapPath("~/" + loggedUser["folderName"]);
    if (Directory.Exists(folderPath))
    {
        RadFileExplorer1.Configuration.ViewPaths = new string[] { folderPath };
        RadFileExplorer1.Configuration.UploadPaths = new string[] { folderPath };
        RadFileExplorer1.Configuration.DeletePaths = new string[] { folderPath };
    }
    else
    {
        //create new folder with the desired name and set it to the RadFileExplorer's properties
    }

Regarding the file renaming upon upload, I believe the following KB article will help you implement this functionality: Giving the uploaded files unique names

In addition, RadFileExplorer offers the possibility to implement custom filebrowser content provider to store files in a database, FTP, etc. You can find detailed information on the subject in the following live demo and help article:
FileExplorer / Custom File Content Provider
Using custom FileBrowserContentProvider

Also, you can find examples of various custom content providers in the KB Articles and CodeLibrary sections of our site.

Best wishes,
Dobromir
the Telerik team

[Paul]

Thank you for the reply which was helpful. I am trying to develop a site single-handed and its a bit of a daunting task. I am concerned about security because users will effectively be unknown (public) but registered. I have therefore been unsure about using the FileExplorer because I was not sure whether there were any security issues and whether there is any risk that users could either see site files and/or upload anything other than in a strictly controlled context. I was therefore planning on a simple upload feature with strict validation and without the users seeing the actual server file system.

I realise that there are vast amounts of info on the Telerik site but if you have chance to provide a quick answer:
1. Is there a configuration/setting where the FileExplorer is secure (in terms of protecting the site and also one user's files from another)

Also I was intending to post a question about the RadEditor. I have a security concern there but perhaps you could answer that at the same time. I want to make sure that in using the RadEditor I have a configuration where there is no risk of the user embedding anything harmful or that could represent a security risk within the content that they create. Essentially I want to allow the users to create pages that the site then displays. The site will save the editor content to a database record and when the relevant page is requested will load that content to a <div>, I only want to allow users basic formating, ability to include images in the page, tables, <ul>, etc. but certainly no script.

Thanks

[Dobromir]

Hi Paul,

By design, RadFileExplorer have access only to the folders set to its ViewPaths / UploadPaths / DeletePaths properties. In addition, you can use SearchPatterns properties to filter the displayed file types, or you can even manually filter the displayed files / folders as demonstrated in this live demo.

Regarding RadEditor, by default RadEditor has enabled several built-in content filters, one of which is RemoveScripts. This filter removes any <script> tags from the content, however it does not remove any scripts registered to the html elements. In order to remove such scripts you will need to a implement custom content filter. e,g:

function OnClientLoad(editor, args)
{
    editor.get_filtersManager().add(new MyFilter());
}
MyFilter = function ()
{
    MyFilter.initializeBase(this);
    this.set_isDom(true);
    this.set_enabled(true);
    this.set_name("RadEditor filter");
    this.set_description("RadEditor filter description");
}
MyFilter.prototype =
{
    getHtmlContent: function (contentElement)
    {
        //alert(1);
        var childElements = contentElement.childNodes;

        for (var i = 0; i < childElements.length; i++)
        {
            var child = childElements[i];

            if ($telerik.isIE)
            {
                child.onclick = null;
            } else
            {
                child.removeAttribute("onclick");
            }

            child.setAttribute("onclick", "");
            //add additional attributes accepting and executing scripts
        }

        return contentElement;
    },

    getDesignContent: function (contentElement)
    {
        var childElements = contentElement.childNodes;

        for (var i = 0; i < childElements.length; i++)
        {
            var child = childElements[i];

            if ($telerik.isIE)
            {
                child.onclick = null;
            } else
            {
                child.removeAttribute("onclick");
            }
            //add additional attributes accepting and executing scripts
        }

        return contentElement;
    }
}
MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

Please note that this is just an example and you might need to extend the custom content filter to strip all the attributes.

All the best,
Dobromir
the Telerik team