Upload image using RadUpload - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Upload image using RadUpload

  • Upload image using RadUpload
  • I am attempting to upload an image in a custom backend tool using the RadUpload control.  The form is submitting just fine but the upload control has no images.  Here is my event handler code:
    protected void InsertButton_Click(object sender, EventArgs e)
        try
        
            RadUpload upload = this.GetControl<RadUpload>("NewEmployeeImage");
            upload.AllowedFileExtensions = new string[] ".jpg", ".png", ".jpeg", ".gif" ;
            if (upload.UploadedFiles.Count < 1)
            
                this.Message.ShowNegativeMessage("Please select a file to upload");
                return;
            
            if (upload.InvalidFiles.Count > 0)
            
                this.Message.ShowNegativeMessage("Allowed file types are " + String.Join(", ", upload.AllowedFileExtensions));
                return;
            
            IDictionary<string, string> data = new Dictionary<string, string>();
            data.Add("FirstName", this.GetControl<TextBox>("txtCreateFirstName").Text);
            data.Add("LastName", this.GetControl<TextBox>("txtCreateLastName").Text);
            data.Add("Position", this.GetControl<TextBox>("txtCreatePosition").Text);
            data.Add("Email", this.GetControl<TextBox>("txtCreateEmail").Text);
            data.Add("Info", this.GetControl<RadEditor>("reCreateBio").Content);
            ModelImage img = this.Module.CreateEmployee(data, upload.UploadedFiles[0]);
        
        catch (Exception ex)
        
            this.Message.ShowNegativeMessage(ex.Message);
            return;
        
        this.Message.ShowPositiveMessage("Employee photo has been successfully created");
        this.RefreshData();

    and the ASCX:
    <telerik:RadUpload ID="NewEmployeeImage" runat="server" AllowedFileExtensions=".jpg, .png, .jpeg, .gif" MaxFileInputsCount="1" Width="100%" InputSize="45" ControlObjectsVisibility="None" />

    This is pretty much just adapted from the JobsModule in the sdk examples.  All of the other values from the form come through just fine except the RadUpload control.

    Thanks for the help.
    Bryan


  • 229023_raduploadcoll.zip
    Hello Bryan,

    I am sending you a sample control that should work properly at your end


    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Telerik.Sitefinity.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace CustomModule
        class Class6 : SimpleView
        
     
            protected override void InitializeControls(GenericContainer container)
            
                Trigger.Click += new EventHandler(Trigger_Click);
            
     
            void Trigger_Click(object sender, EventArgs e)
            
     
                RadUpload upload = this.RadUploadControl;
                upload.AllowedFileExtensions = new string[] ".jpg", ".png", ".jpeg", ".gif" ;
                if (upload.UploadedFiles.Count < 1 || upload.InvalidFiles.Count > 0)
                
                    Page.RegisterClientScriptBlock("NoI", "<script>alert('no file or invalid to upload');</script>");
                    return;
                
                else
                
                    var file = upload.UploadedFiles[0];
                    Page.RegisterClientScriptBlock("ok", "<script>alert('" + file.FileName + "');</script>");
                       
           
            
     
            protected override string LayoutTemplateName
            
                get return "RadUploadControl";
            
     
            public override string LayoutTemplatePath
            
                get
                
                    return "~/Controls/RadUploadControl.ascx";
                
                
            
     
            protected virtual Button Trigger
            
                get
                
                    return this.Container.GetControl<Button>("InsertButton1", true);
                
            
     
            protected virtual RadUpload RadUploadControl
            
                get
                
                    return this.Container.GetControl<RadUpload>("NewEmployeeImage", true);
                
            
        

    template

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="RadUploadControl.ascx.cs" Inherits="SitefinityWebApp.Controls.RadUploadControl" %>
     
     
     
    <telerik:RadUpload ID="NewEmployeeImage" runat="server" AllowedFileExtensions=".jpg, .png, .jpeg, .gif" MaxFileInputsCount="1" Width="100%"
    InputSize="45" ControlObjectsVisibility="None" />
     
    <asp:Button runat="server" ID="InsertButton1"  Text="Upload Your Image" />

    I attached a short video where you can see that the items collection is properly populated.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hey Ivan,

    There is still no file content coming in the http post.  I noticed on the rendered HTML that the form doesn't have the enctype="multipart/form-data" attribute:

    Here's the form rendered inside Sitefinity:
    <form method="post" action="Employees" id="aspnetForm">

    Then when I create a quick, simple .NET form with a FileUpload control I get this:
    <form method="post" action="TestFileUpload.aspx" id="form1" enctype="multipart/form-data">

    Might this have something to do with it?  The form I'm trying to add to the Sitefinity back end doesn't use any ajax since I don't have time to spin up on it (I've been stuck in the .NET 1.1 world for the last 5 years).  Does Sitefinity require all posts use the ajax frameworks?

    Thanks for your help.
    Bryan
  • Hello Bryan,

    The control that I am using inherits from SimpleView. Generally you can edit the backend page you have from Administration >> Backend pages and drop the control on a page. I checked this scenario an it also works fine.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • OK, that's probably the difference.  Mine is created by a module.  My module loosely follows the JobsModule SDK example.  In the Install method of the module I create the group page and add my back end page then I add my EmployeesOverview control to that page using the Sitefinity API.  My EmployeesOverview also inherits SimpleView.

    I will code it up as a back end page and see what kind of results I get.  FWIW, here's the code I use to create the page in the module Install method:

    sf.Page().CreateNewStandardPage(this.LandingPageId, this.SubPageId).Do(p =>
        p.Name = "Employee Photos";
        p.ShowInNavigation = false;
        p.Description = "Add and modify employee photos";
        p.Attributes["ModuleName"] = EmployeesModule.MODULE_NAME;
        p.Title = "Employee Photos";
        p.UrlName = "EmployeePhotos";
    ).CheckOut().Do(draft =>
        draft.TemplateId = sf.Page().PageManager.GetTemplates().Where(t =>
            t.Name == SiteInitializer.BackendTemplateName).SingleOrDefault().Id
        ).Control().CreateNew(new EmployeesOverview(), "Content")
            .Done()
            .Publish();
    restart = true;

    Thanks,
    Bryan
  • Hello Bryan,

    I checked this by adding the control programmatially on the page and it should with the code below


    Telerik.Sitefinity.Modules.Pages.PageManager pManager = new PageManager();
              Guid templateGuid = pManager.GetTemplates().First().Id;
              App.WorkWith()
              .Page()
              .CreateNewStandardPage(new Guid("597e0c2b-f1d3-4386-bb7f-714c640573b3"), new Guid("8F532FEE-58A2-427B-BF87-2C6AADC2BD7D")).Do(p =>
                  
                      p.Name = "some name";
                      p.ShowInNavigation = true;
                      p.Description = "some desc";
                      p.Title = "some title";
                      p.Page.HtmlTitle = "some html title";
                      p.UrlName = "urlname";
                      p.Page.Title = "backend page title";
                  )               
              .CheckOut()
              .SetTemplateTo(templateGuid)               
                  .Control()
                  .CreateNew(new Class6(), "T063CD6ED000_Col00")
                  .Done()
              .Publish()
              .SaveChanges();




    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  • Hey Ivan,

    I am still having no luck with this.  I reworked the code and turned it into a back end page with my control.  All data with the exception of the RadUpload UploadedFiles is coming through.  I have also tried using a plain old asp:FileUpload control and it doesn't work either.  I have noticed there is no enctype="multipart/form-data" attribute in the render asp.net form.  Might this be the cause?

    In trying different solutions to try to get this to work, I placed the control on a public page and it works while placing the control on a back end page does not. Any suggestions?

    Thanks,
    Bryan
  • Hello Bryan,

    I was not able to reproduce this issue at my end. Both on the front end page and backend page the control works fine. Actually there is not a big difference between backend and front page, because this is one SiteMap with two parent nodes. The RadEditor is a wrapper of FileUpload and the problem could be somewhere in the server you use or in the browser.

    Regards,
    Ivan Dimitrov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.