This content was originally posted on Telerik’s blogs here.

Overview:

Telerik’s ASP.NET AJAX Cloud Upload is a brand new control in the arsenal of ASP.NET controls which provides you the ability to support uploading of files to Cloud providers. What’s best about this control is, you don’t have to write any code i.e. this is codeless uploading of files. If this excites you, then read on.

About Cloud Upload for ASP.NET AJAX:

RadCloudUpload. is part of the RadControls for ASP.NET AJAX suite and at the moment supports the following cloud providers: Amazon S3, Azure Blob Storage and Everlive (Telerik’s Backend as a Service) .

In rest of the sections, we will see how to use Cloud Upload with Everlive.

What is Everlive?

Everlive is Telerik’s Backend as a Service or BaaS. Everlive links your application to backend cloud storage and provides User management, push notifications, Social networking services integration etc. Some of the benefits are:

• One portal to manager your entire app background
• Data & file security
• Target every mobile platform with ease
• Frictionless login with social authentication services
• Push, Email and SMS notifications

You can know more about Everlive at http://telerik.com/everlive

Creating Everlive Project to store files:

You can sign up for free and you get a developers account which gives you unlimited API calls, 10K push notifications, 100MB of DB space, 1GB of file storage and 5GB of bandwidth. Once you log into your Everlive account, you can create a new project. Click on “Create a Project” from the Everlive dashboard.

In the “New Project” dialog, enter project name, description, select “Start from scratch” radio button and click on “Create Project” button.

Here is the project dashboard once Everlive creates our new project:

Notice that, Everlive has out of the box added Files, Users and Roles entity types. Files entity type is like container to which you can readily add files. Click on Files link on the left hand menu to look at Files screen:

You can click on “Upload Files” to upload a new file from the portal itself.

API Keys for accessing Everlive:

In order to integrate with Everlive i.e. uploading to or reading files from Everlive from any application, you will need to have access keys. You can get access keys to your projects, by clicking on “API Keys” in your project dashboard. Note down the application name and the application key. We will need this information when we integrate with RadCloudUpload.

Create a Web Application:

Fire up a Visual Studio 2013 and select File > New Project. In web templates select “RadControls Web Application”, give it a name, location and click Ok. Visual Studio will go ahead and create our project. By default a default.aspx page is already added to the project. We will use this page for the demo purpose.

Adding Everlive Client Library:

To integrate with Everlive Cloud Storage, we need to reference the assembly Telerik.Everlive.Sdk.Net35dll. You can download the files from here. Download the zip file, extract it and add reference to Telerik.Everlive.Sdk.Net35.dll in the web project. We also need Newtonsoft.Json.dll, so add a reference for that too.

Using the Cloud Upload control:

From the tool box drag and drop RadCloudUpload control on to Default.aspx page. Access the smart tag of the control and choose Everlive as the provider type. Then click on the “Open Everlive’s Configuration Wizard”.

<telerik:RadCloudUpload ID="RadCloudUpload1" runat="server" ProviderType="Everlive" />

In Configuration Wizard dialog enter Everlive API Key.

Specifying the Uncommitted Files Expiration Period (hours), you could easily configure the time, after which the unprocessed files will be removed from the storage.

This will add configuration setting in the web.config file:

<telerik.web.ui>
<radCloudUpload>
<storageProviders>
<add name="Everlive" type="Telerik.Web.UI.EverliveProvider" apiKey="<YOUR API KEY>" uncommitedFilesExpirationPeriod="1" />
</storageProviders>
</radCloudUpload>
</telerik.web.ui>

RadCloudUpload in Action:

We are all set now. Just run the application. You will see a select button. Click on the select button to select a file. As soon as a file is selected, the upload will start. Here is the snapshot of file being uploaded:

And here is the snapshot of file upload being finished:

At this point if we jump back in to Everlive project dashboard and Files section, you should see the file we just uploaded. Here is the screenshot of the Files on Everlive:

Conclusion:

That’s it. We are done. I did not write single line of code but was able to upload files to Everlive file storage. That is as easy as it can get with Telerik’s Cloud Upload for ASP.NET AJAX. Give it a spin or check out the demos and let us know what you feel about this control.