Getting Started with WPF CloudUpload

This tutorial will walk you through the creation of a sample application that contains RadCloudUpload.

• Assembly references
• Defining the UI
• Creating the Provider

Adding Telerik Assemblies Using NuGet

To use RadCloudUpload when working with NuGet packages, install the Telerik.Windows.Cloud.Controls.for.Wpf.Xaml package. The package name may vary slightly based on the Telerik dlls set - Xaml or NoXaml

Read more about NuGet installation in the Installing UI for WPF from NuGet Package article.

With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it here.

Adding Assembly References Manually

If you are not using NuGet packages, you can add a reference to the following assemblies:

• Telerik.Licensing.Runtime
• Telerik.Windows.Controls
• Telerik.Windows.Cloud
• Telerik.Windows.Cloud.Controls

You can find the required assemblies for each control from the suite in the Controls Dependencies help article.

Defining the UI

The following example shows how to define a RadCloudUpload control and a RadCloudUploadList to show the selected files prepared for upload.

Example 1: Defining RadCloudUpload and RadCloudUploadList

• XAML

<Grid> 
    <Grid.RowDefinitions> 
        <RowDefinition Height="Auto" /> 
        <RowDefinition /> 
    </Grid.RowDefinitions>         
    <telerik:RadCloudUpload x:Name="RadCloudUpload" /> 
    <telerik:RadCloudUploadList Grid.Row="1" ItemsSource="{Binding Items, ElementName=RadCloudUpload}"/> 
</Grid> 

The cloud upload control itself provides only a UI and an interface to execute the upload task. However, the upload process should be implemented with additional custom code. The next section shows how to set up this.

Creating the Provider

RadCloudUpload uses a provider interface to upload files to the service of your choice. To create the provider you will need to define a class that implements the ICloudUploadProvider interface. The interface exposes a single method - UploadFileAsync, which returns a Task<object> object.

This secion will show you how to create a dummy provider that stores the files in a storage in memory.

Example 2: Creating a dummy storage and file classes

• C#

public static class DummyStorage 
{ 
    public static ObservableCollection<StorageFile> StorageFiles { get; private set; } 
 
    static DummyStorage() 
    { 
        StorageFiles = new ObservableCollection<StorageFile>(); 
    } 
} 
 
public class StorageFile 
{ 
    public string Name { get; set; } 
    public long Size { get; set; } 
 
    public StorageFile(string name, long size) 
    { 
        this.Name = name; 
        this.Size = size; 
    } 
} 

Example 3: Implementing a dummy ICloudUploadProvider that uploads files to the storage

• C#

public class DummyProvider : ICloudUploadProvider 
{ 
    Random random = new Random();        
 
    public Task<object> UploadFileAsync(string fileName, Stream fileStream, CloudUploadFileProgressChanged uploadProgressChanged, CancellationToken cancellationToken) 
    { 
        return System.Threading.Tasks.Task.Factory.StartNew<object>(() => UploadFile(fileName, fileStream, uploadProgressChanged, cancellationToken), cancellationToken); 
    } 
 
    private object UploadFile(string fileName, Stream fileStream, CloudUploadFileProgressChanged uploadProgressChanged, CancellationToken cancellationToken) 
    {            
        var fileLength = fileStream.Length; 
        int uploadIterations = this.random.Next(10, 40); 
        int chunkSize = (int)(fileLength / uploadIterations); 
 
        for (int i = 0; i < uploadIterations; i++) 
        { 
            cancellationToken.ThrowIfCancellationRequested(); 
            uploadProgressChanged(i * chunkSize); 
            Thread.Sleep(this.random.Next(200, 900)); 
        } 
 
        uploadProgressChanged(fileLength); 
 
        lock (DummyStorage.StorageFiles) 
        { 
            DummyStorage.StorageFiles.Add(new StorageFile(fileName, fileLength)); 
        } 
        return fileName; 
    } 
} 

Example 4: Setting the provider

• XAML

<telerik:RadCloudUpload> 
    <telerik:RadCloudUpload.Provider> 
        <local:DummyProvider /> 
    </telerik:RadCloudUpload.Provider> 
</telerik:RadCloudUpload> 

The control doesn't have any built-in providers, but you can see how to implement one that connects to the Azure and Amazon services in the RadCloudUpload SDK examples.

Telerik UI for WPF Learning Resources

• Telerik UI for WPF CloudUpload Component
• Getting Started with Telerik UI for WPF Components
• Telerik UI for WPF Installation
• Telerik UI for WPF and WinForms Integration
• Telerik UI for WPF Visual Studio Templates
• Setting a Theme with Telerik UI for WPF
• Telerik UI for WPF Virtual Classroom (Training Courses for Registered Users)
• Telerik UI for WPF License Agreement