This is a migrated thread and some comments may be shown as answers.

Changing the look of RadUpload

14 Answers 531 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 06 Aug 2008, 02:45 PM
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.

14 Answers, 1 is accepted

Sort by
0
Valentin.Stoychev
Telerik team
answered on 06 Aug 2008, 03:53 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 07 Aug 2008, 11:50 AM
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
0
Valentin.Stoychev
Telerik team
answered on 07 Aug 2008, 02:22 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 14 Aug 2008, 03:47 PM
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
0
Valentin.Stoychev
Telerik team
answered on 14 Aug 2008, 05:11 PM
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.
0
Ryan
Top achievements
Rank 1
answered on 15 Aug 2008, 10:10 AM
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
0
Accepted
Valentin.Stoychev
Telerik team
answered on 19 Aug 2008, 08:48 AM
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.
0
Ryan
Top achievements
Rank 1
answered on 20 Aug 2008, 11:42 AM
Thanks again Valentin, that was what I needed!

Best regards,

Ryan
0
Paul
Top achievements
Rank 1
answered on 16 Apr 2012, 08:20 PM
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?
0
Paul
Top achievements
Rank 1
answered on 17 Apr 2012, 09:02 PM

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.

 

 

0
Paul
Top achievements
Rank 1
answered on 18 Apr 2012, 01:55 PM
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!
0
Alex Fidanov
Telerik team
answered on 19 Apr 2012, 08:35 AM
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 >>

0
Paul
Top achievements
Rank 1
answered on 19 Apr 2012, 01:43 PM
Can you provide a code snippet of how to achieve this?
0
Tina Stancheva
Telerik team
answered on 24 Apr 2012, 12:40 PM
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 >>

Tags
Upload
Asked by
Ryan
Top achievements
Rank 1
Answers by
Valentin.Stoychev
Telerik team
Ryan
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Alex Fidanov
Telerik team
Tina Stancheva
Telerik team
Share this question
or