Changing the look of RadUpload

15 posts, 1 answers
  1. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2008

    Posted 06 Aug 2008 Link to this post

    Hi,

    Firstly, love the control - thank you for making my life so much easier.  After struggling with WebClients, Handlers and Sockets for a week this solution is an elegant way to upload without the headaches!

    I would like to be able to change the look and feel of the control.  Is it possible to change the text where it says "Select files to upload:" and to stop the browse button from appearing once uploading commences.

    I also want to save the file under a different name on the server to stop different files with the same name being overwritten.

    I only want one file uploaded at any one time as I'm saving other information pertaining to the file in a database.

    Thanks.
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 06 Aug 2008 Link to this post

    Hello Ryan,

    you need to modify the control template of the upload control to apply the layout changes that you need. To do this - define the new template and use the Template property to set it.

    OverwriteExistingFiles property can be used to prevent files from being overriden, or if you need more control over the server side processing of files - renaming/saving to database you should inherit our RadUploadHandler or to just create a new ASHX file.

    Let me know if need more help on this - your feedback will help us on shaping the control better.

    Thanks! 

    Kind regards,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. DevCraft banner
  4. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2008

    Posted 07 Aug 2008 Link to this post

    Hi,

    Thanks for the advice.  I'll look into changing the template.

    Stopping people overwriting files won't really be enough as I'm handling video uploads so will be best to inherit the RadUploadHandler.

    I'm struggling to find examples online of overloading your handler though?  Am I looking in the wrong places or do you have the source code available?

    Thanks again.

    Ryan
  5. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 07 Aug 2008 Link to this post

    Hi Ryan,

    There are no examples provided yet - we will try to do so for the next release.
     
    For the moment I'm attaching you the source of the Upload handler and the builded dll file. What you can do is to create a new handler from the source code provided and to handle the upload requests in the way you want. 

    You can see an example about how to declare a new handler in the downloaded zip file with our controls. There is a definition of the RadUploadHandler.ashx in the "SilverlightExamples" project.

    If you need any help understanding the specifics - please let us know - we will be glad to help.

    Kind regards,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2008

    Posted 14 Aug 2008 Link to this post

    Hi Valentin,

    First I'd like to say thanks for attaching the upload handler - it helped me achieve what I needed to get done.

    However, after changing the control template to use my own control buttons and progress bar I'm now getting a "Object reference not set to an instance of an object" error when calling the StartUpload() method.  It was working fine before I used a control template.

    Is there something I am doing wrong?

    Best regards,

    Ryan
  7. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 14 Aug 2008 Link to this post

    Hello Ryan,

    Most probably the new template that you have created is not using the same naming convention for the elements as the original one. Can you please check that the names of the XAML elements are equal. If this doesn't solve the problem please send us the template that you have create and we will check-out what is wrong with it.


    Greetings,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2008

    Posted 15 Aug 2008 Link to this post

    Hi Valentin,

    The control template I'm using is really simple although I can't find a single example of the the correct naming conventions for the components in the RadUpload control.  Expression Blend doesn't break the control down into its component parts either for some reason.

    Is there any documentation available that shows the default control template for the RadUpload control?

    My template is as follows:

    <my:RadUpload.Template> 
        <ControlTemplate> 
            <StackPanel Orientation="Vertical" Loaded="radUploadTemplate_Loaded"
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"
                    <TextBlock x:Name="selectedFileTb" Text="Select File: " Foreground="{StaticResource textColour}" VerticalAlignment="Center"/>     
                    <TextBox Height="30" Width="200" Style="{StaticResource TextBoxStyle}" x:Name="selectedFileTxt" MaxLength="50" IsReadOnly="True"></TextBox> 
                    <Button x:Name="browseBtn" Content="..." Height="30" Margin="5" Click="BrowseBtn_Click" Style="{StaticResource ButtonStyle}" VerticalAlignment="Bottom" Visibility="Visible"/> 
                </StackPanel> 
                <TextBlock x:Name="uploadStatusText" Foreground="{StaticResource textColour}" HorizontalAlignment="Center" Visibility="Collapsed"/> 
                <my1:RadProgressBar x:Name="uploadProgressBar" Width="200" Height="30" Minimum="0" Maximum="100" Visibility="Collapsed" HorizontalAlignment="Center"/> 
            </StackPanel> 
        </ControlTemplate> 
    </my:RadUpload.Template> 
    Thanks,

    Ryan
  9. Answer
    Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 19 Aug 2008 Link to this post

    Hi Ryan,

    Sorry for the late reply.

    Here is the template for the RadUpload below:

    you need to name the elements appropriately and it will be ok - you will not need the event handles too.



        <Style x:Key="DefaultButtonStyle" TargetType="Button">  
            <Setter Property="IsEnabled" Value="true" /> 
            <Setter Property="IsTabStop" Value="true" /> 
            <Setter Property="MinWidth" Value="5" /> 
            <Setter Property="MinHeight" Value="5" /> 
            <Setter Property="Margin" Value="0" /> 
            <Setter Property="HorizontalContentAlignment" Value="Center" /> 
            <Setter Property="VerticalContentAlignment" Value="Center" /> 
            <Setter Property="Cursor" Value="Arrow" /> 
            <Setter Property="TextAlignment" Value="Left" /> 
            <Setter Property="TextWrapping" Value="NoWrap" /> 
            <Setter Property="FontSize" Value="11" /> 
            <Setter Property="Padding" Value="20 0 20 0" /> 
            <Setter Property="Template">  
                <Setter.Value> 
                    <ControlTemplate TargetType="Button">  
                        <Grid> 
                            <vsm:VisualStateManager.VisualStateGroups> 
                                <vsm:VisualStateGroup x:Name="CommonStates">  
                                    <vsm:VisualState x:Name="Normal" /> 
                                    <vsm:VisualState x:Name="MouseOver">  
                                        <Storyboard> 
                                            <ColorAnimation Storyboard.TargetName="inner" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF00BBFF" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FFBAE6F6" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FFBAE6F6" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFD5EDF6" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFD5EDF6" Duration="0:0:0.1" /> 
                                        </Storyboard> 
                                    </vsm:VisualState> 
                                    <vsm:VisualState x:Name="Pressed">  
                                        <Storyboard> 
                                            <ColorAnimation Storyboard.TargetName="inner" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF467080" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" To="#FF8DABB7" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" To="#FF8DABB7" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" To="#FFA1BAC4" Duration="0:0:0.1" /> 
                                            <ColorAnimation Storyboard.TargetName="innerMost" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" To="#FFA1BAC4" Duration="0:0:0.2" /> 
                                        </Storyboard> 
                                    </vsm:VisualState> 
                                    <vsm:VisualState x:Name="Disabled">  
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisual" Storyboard.TargetProperty="Visibility" Duration="0">  
                                                <DiscreteObjectKeyFrame KeyTime="0">  
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <Visibility>Visible</Visibility> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </vsm:VisualState> 
                                </vsm:VisualStateGroup> 
                                <vsm:VisualStateGroup x:Name="FocusStates">  
                                    <vsm:VisualState x:Name="Focused">  
                                        <Storyboard> 
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">  
                                                <DiscreteObjectKeyFrame KeyTime="0">  
                                                    <DiscreteObjectKeyFrame.Value> 
                                                        <Visibility>Visible</Visibility> 
                                                    </DiscreteObjectKeyFrame.Value> 
                                                </DiscreteObjectKeyFrame> 
                                            </ObjectAnimationUsingKeyFrames> 
                                        </Storyboard> 
                                    </vsm:VisualState> 
                                    <vsm:VisualState x:Name="Unfocused" /> 
                                </vsm:VisualStateGroup> 
                            </vsm:VisualStateManager.VisualStateGroups> 
                            <Border x:Name="outer" Background="#FFFFFFFF" CornerRadius="3,3,3,3" BorderThickness="1" BorderBrush="#FFFFFFFF">  
                                <Border x:Name="inner" CornerRadius="2,2,2,2" BorderThickness="1" BorderBrush="#FF95BCCA">  
                                    <Border x:Name="innerMost" BorderBrush="#00FFFFFF" CornerRadius="1,1,1,1">  
                                        <Border.Background> 
                                            <LinearGradientBrush EndPoint="1.007,0.841" StartPoint="0.029,0.841">  
                                                <GradientStop Color="#FFE2E8EB" Offset="0" /> 
                                                <GradientStop Color="#FFE2E8EB" Offset="1" /> 
                                                <GradientStop Color="#FFFFFFFF" Offset="0.13" /> 
                                                <GradientStop Color="#FFFFFFFF" Offset="0.87" /> 
                                            </LinearGradientBrush> 
                                        </Border.Background> 
                                        <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="4,5,4,4" TextWrapping="Wrap" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" /> 
                                    </Border> 
                                </Border> 
                            </Border> 
                            <Rectangle Stroke="#0092CD" StrokeThickness="1" Margin="0" RadiusX="3" RadiusY="3" Fill="Transparent" x:Name="FocusVisual" Visibility="Collapsed" /> 
                            <Rectangle x:Name="DisabledVisual" Visibility="Collapsed" RadiusX="3" RadiusY="3" Fill="#80FFFFFF" IsHitTestVisible="false" /> 
                        </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 
        <Style TargetType="telerik:RadUpload">  
            <Setter Property="FontFamily" Value="Tahoma"></Setter> 
            <Setter Property="FontSize" Value="11"></Setter> 
            <Setter Property="Foreground" Value="#FFFFFFFF"></Setter> 
     
            <Setter Property="Filter" Value="All files (*.*)|*.*"></Setter> 
            <Setter Property="FilterIndex" Value="1"></Setter> 
            <Setter Property="IsMultiselect" Value="true"></Setter> 
            <Setter Property="BufferSize" Value="100000"></Setter> 
            <Setter Property="MaxFileSize" Value="-1"></Setter> 
            <Setter Property="MaxUploadSize" Value="-1"></Setter> 
            <Setter Property="MaxFileCount" Value="-1"></Setter> 
            <Setter Property="MinHeight" Value="80"></Setter> 
            <Setter Property="MinWidth" Value="250"></Setter> 
            <Setter Property="MaxHeight" Value="300"></Setter> 
            <Setter Property="Width" Value="400"></Setter> 
            <Setter Property="IsEnabled" Value="True"></Setter> 
            <Setter Property="IsPauseEnabled" Value="True"></Setter> 
            <Setter Property="Background">  
                <Setter.Value> 
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">  
                        <GradientStop Color="#FFE9E9E9" Offset="0"/>  
                        <GradientStop Color="#FFCCCCCC" Offset="1"/>  
                    </LinearGradientBrush> 
                </Setter.Value> 
            </Setter> 
            <Setter Property="BorderBrush" Value="#FFCCCCCC"/>  
            <Setter Property="Template">  
                <Setter.Value> 
                    <ControlTemplate TargetType="telerik:RadUpload">  
                             
                            <Grid x:Name="RootElement">  
                                <Grid.RowDefinitions> 
                                    <!-- Caption --> 
                                    <RowDefinition Height="auto"></RowDefinition> 
                                      
                                    <!-- delimiter --> 
                                    <RowDefinition Height="auto"></RowDefinition> 
                                      
                                    <!-- Selected Files area --> 
                                    <RowDefinition Height="*"></RowDefinition> 
     
                                    <!-- Total Progress --> 
                                    <RowDefinition Height="auto"></RowDefinition> 
                                      
                                    <!-- Command buttons --> 
                                    <RowDefinition Height="auto"></RowDefinition> 
                                </Grid.RowDefinitions> 
                                  
                                <!-- Upload background decorations --> 
                                <Rectangle RadiusY="5" Grid.RowSpan="5" RadiusX="5" Stroke="{TemplateBinding BorderBrush}"/>  
     
                                <Rectangle Stroke="#FFFFFFFF" Fill="{TemplateBinding Background}" Grid.RowSpan="5"  RadiusX="5" RadiusY="5" Margin="1,1,1,1"/>  
                                  
                                <!-- Header text --> 
                                <TextBlock Margin="12,6" x:Name="ProgressCaptionText" Grid.Row="0" Text="Select Files To Upload:" FontWeight="Bold" Foreground="Black" /> 
                                  
                                <!-- Header Separator --> 
                                <Rectangle Grid.Row="1" Fill="#FFFFFFFF" Margin="1,0" Height="1"/>  
              
                                <!-- Selected files container --> 
                                <ScrollViewer Grid.Row="2" Margin="12,8" BorderThickness="0" x:Name="SelectedFilesContainer" Visibility="Collapsed" VerticalScrollBarVisibility="Auto"></ScrollViewer> 
                                 
                                <!-- Total Progress area --> 
                                <Grid x:Name="TotalProgressArea" Visibility="Collapsed" Grid.Row="3" Margin="0 10 0 10" > 
                                      
                                    <core:RadProgressBar MinHeight="20" x:Name="TotalProgressBar" Height="27"  Minimum="0" Maximum="100"/>  
     
                                    <Grid VerticalAlignment="Center">  
                                        <TextBlock Margin="12, 5" Text="Total" FontWeight="Bold"/>  
                                        <TextBlock x:Name="TotalPercentText" FontWeight="Bold" Margin="5" HorizontalAlignment="Center" Text="0%"/>  
                                        <TextBlock x:Name="TotalSizeText" FontWeight="Bold" Margin="5" HorizontalAlignment="Right" Text="0"/>  
                                    </Grid> 
                                </Grid> 
          
                                <!-- Command buttons --> 
                                <StackPanel Margin="7,8" Grid.Row="4" Orientation="Horizontal" VerticalAlignment="Center">  
                                    <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="BrowseButton" Content="Browse" /> 
                                    <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="PauseButton" Content="Pause" Visibility="Collapsed"/>  
                                    <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="UploadButton" Content="Upload"  Visibility="Collapsed"/>  
                                    <Button Style="{StaticResource DefaultButtonStyle}" Margin="5" x:Name="CancelButton" Content="Cancel" Visibility="Collapsed"/>  
                                </StackPanel> 
     
                            </Grid> 
                    </ControlTemplate> 
                </Setter.Value> 
            </Setter> 
        </Style> 

    Please let us know if we can help you further.

    Greetings,
    Valentin.Stoychev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  10. Ryan
    Ryan avatar
    7 posts
    Member since:
    Aug 2008

    Posted 20 Aug 2008 Link to this post

    Thanks again Valentin, that was what I needed!

    Best regards,

    Ryan
  11. Paul
    Paul avatar
    7 posts
    Member since:
    Mar 2011

    Posted 16 Apr 2012 Link to this post

    I think I have a similar question.  I want to add a description to the file being uploaded how do I visually add a label and a text box for when a user adds a file to upload and they can then set a description?  Is this a data template in the Rad Upload item?
  12. Paul
    Paul avatar
    7 posts
    Member since:
    Mar 2011

    Posted 17 Apr 2012 Link to this post

    So this is what I'm trying to accomplish but it seems that when I add a file it goes back to the old style.  I created a custom RadUploadItemControl template to accomplish this but it doesn't seem to stick.  What am I missing here?  any sample project would be supper helpful.

     

     

  13. Paul
    Paul avatar
    7 posts
    Member since:
    Mar 2011

    Posted 18 Apr 2012 Link to this post

    Okay so I got this to work - somewhat - based on an example but I thought I could inherit the RadUploadItem in a new class and add a Description property but now when I add a new file (browse, select file) I get an XML parse error at line 0 pos 0.
    My Class looks like such:

     

     

    using System;
    using System.Net;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    using Telerik.Windows.Controls;
     
    namespace SilverlightApplication1
    {
        public class ExtRadUploadItem:RadUploadItem
        {
            public ExtRadUploadItem()
            {
            }
            public string Description
            {
                get;set;
            }
        }
    }


    Still struggling but "belive" I'm close here.

    Help anyone!
  14. Alex Fidanov
    Admin
    Alex Fidanov avatar
    636 posts

    Posted 19 Apr 2012 Link to this post

    Hi,

     Actually, I would recommend creating an attached property and setting it for the RadUploadItem instread of subclassing the RadUploadItem and extending it additional properties. Do you think that using an attached property would be acceptable in your scenario?

    Greetings,
    Alex Fidanov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  15. Paul
    Paul avatar
    7 posts
    Member since:
    Mar 2011

    Posted 19 Apr 2012 Link to this post

    Can you provide a code snippet of how to achieve this?
  16. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Apr 2012 Link to this post

    Hello Paul,

    Looking further at your case, I believe you can implement the described functionality without deriving from the RadUploadItem or introducing an attached property.

    Instead you can edit the RadUploadItem default ControlTemplate to add a TextBlock and a TextBox elements. You can use the TextBox element to add the file description, then handle the UploadStarted event and get the description the user entered for each file. You can even pass this information to the server-side of the handler.

    I attached a sample project demonstrating this approach so please have a look at it and let me know if it works for you.

    Greetings,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
DevCraft banner