Image uploads into separate user folders

[King Wilder]

RadEditor version: 2009.2.701.35

I'm using the RadEditor in an ASP.NET MVC application and everything is working fine.  This is going to be a community application that allows users to post articles and such.

When a user posts an article using the RadEditor, if they upload an image to be used in the posting, I want that image to be uploaded to a folder with their user name.

Example:

Root Image upload folder: ~/UploadedImages

Folders for users:
~/UploadedImages/joe/myimage1.jpg
~/UploadedImages/joe/myimage2.jpg

~/UploadedImages/susan/myimage1.jpg
~/UploadedImages/susan/myimage2.jpg

~/UploadedImages/frank/myimage1.jpg
~/UploadedImages/frank/myimage2.jpg

etc...

I realize that I don't have access to the nice code-behind like in WebForms, and I've been looking through the Clientside API, but I can't find a good way of doing this.

Is this possible with ASP.NET MVC?

Thanks.

[Rumen]

Hi King,

You can put the server code in script tag with runat="server". You should check for the logged user and create a folder for it. After that set the ViewPaths, UploadPaths and DeletePaths properties to point to the user folder:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Test Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
       <form id="form1" runat="server">

    <h2>About</h2>
    <p>

        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <telerik:RadEditor ID="RadEditor1" ExternalDialogsPath="~/EditorDialogs"  DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"  runat="server">
        </telerik:RadEditor>

    <script type="text/C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            string loggedUser = "Peter";
            string[] viewImages = new string[] { "~/Images/" + loggedUser };
            string[] uploadImages = new string[] { "~/Images/" + loggedUser };
            string[] deleteImages = new string[] { "~/Images/" + loggedUser };

            if (!IsPostBack)
            {
                RadEditor1.ImageManager.ViewPaths = viewImages;
                RadEditor1.ImageManager.UploadPaths = uploadImages;
                RadEditor1.ImageManager.DeletePaths = deleteImages;
            }
        }
    </script>
    </p>
    </form>
</asp:Content>

Kind regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[King Wilder]

Rumen,

I just tried this and so far it's not completely working. 

The part that isn't work is, the "Upload" button in the Image Manager dialog is disabled.  I tried setting the ImageManager paths declaratively and the Upload button remains disabled.  It doesn't seem like the Page_Load event is being caught.

Here's what I did to test this:

1. I created a new ASP.NET MVC 1.0 web application
2. I selected the Visual Studio 2008 Telerik Menu item to convert the project to a Telerik project. I accepted the defaults.
3. I dragged a RadEditor onto the Index page
4. I added a RadScriptManager to the page
5. I copied the Page_Load script event from your example into my view
6. I tried to run it and I got an error when I opened the Image Manager dialog on the RadEditor.  The Error stated that I didn't have the Telerik.Web.UI.DialogHandler.axd set in the web.config.  I looked and it was there, but not exactly.  It was set there using the Convert to Telerik tool as:
   

   <add path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler" verb="*" validate="false" />

   Notice it is aspx, not axd. 
7. I changed it to axd and the error went away.  Now the dialog rendered properly, except the Upload button was disabled.
8. I tried adding the ImageManager element declaratively to the RadEditor and setting the paths properties, but the Upload button remained disabled.

Here is my complete Index view code.

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <h2>
        <%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
            http://asp.net/mvc</a>.
    </p>
    <telerik:RadEditor ID="RadEditor1" runat="server" ExternalDialogsPath="~/EditorDialogs"
        DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd">
        <Content>

        </Content>
        <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
    </telerik:RadEditor>

    <script type="text/C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            string loggedUser = "Peter";
            string[] viewImages = new string[] { "~/Images/" + loggedUser };
            string[] uploadImages = new string[] { "~/Images/" + loggedUser };
            string[] deleteImages = new string[] { "~/Images/" + loggedUser };

            if (!IsPostBack)
            {
                RadEditor1.ImageManager.ViewPaths = viewImages;
                RadEditor1.ImageManager.UploadPaths = uploadImages;
                RadEditor1.ImageManager.DeletePaths = deleteImages;
            }
        }
    </script>

    </form>
</asp:Content>

Any idea what I'm missing?

Thanks.

 

[Rumen]

Hi King,

Please, find attached a fully working project and video demonstrating how to enable the Image Upload tab.

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[King Wilder]

Got it! 

I see the only thing that was different between my application and yours is that you already had the users folder created (/Peter).  I didn't and that was the issue.

I see now that in order for the upload button to be enabled, the target directory has to exist before the view loads and renders the editor.

I can simply run a little code to detect if the users folder already exists, and if it doesn't, I create it in the controller before rendering the view.  Then it all works.

Thanks for the solution.