Getting started with Upload

[Thomas]

I am trying to figure out how this controls works. The documentation point to a video for the server side handler there dont exist and
i need some documentation on how to setup webconfig, access rights, the handler on the serverside. I have tried
to download the sample project and that  works. But from there to create my own project is not straightforward.

Thomas

[Ivan]

Hi Thomas,

Thank you for your interest to the RadUpload control.

Here I will guide you in order to build a sample upload application. Please follow the steps bellow:

1. We need a Silverlight application where to implement the RadUpload Control. This is a standard procedure for creating a Silverlight application. Create the accompanying Web application as the wizard proposed.
2. Place one RadUpload control in the SL application's page and tune it's properties up. Please note how we initialize the upload properties directly into the xaml code, this is very flexible approach:
   • UploadServiceUrl="http://localhost/RadUploadExample/MyRadUploadHandler.ashx";
   • TargetFolder="MyStorageFolder";
   • OverwriteExistingFiles="True";
   • IsAutomaticUpload="false".
3. Now go to the Web application project already created by the Wizard and:
   • Create a new Folder into the project tree - give it the name of MyStorageFolder.
   • Open the project's property page (select the web project in solution explorer and press Shift+F4 or choose the Property Page from the View menu). Select the Web page and choose the Use Local IIS Web server. For the purpose of the example set the Project Url to
           http://localhost/RadUploadExample
     Save the settings: the Virtual directory will be created.
4. Know it is time to create our upload handler to the Web application:
   • Add new Generic Handler - name it to  MyRadUploadHandler.ashx;
   • Open the handler's code behind file (MyRadUploadHandler.ashx.cs) and simplify it's content to
     

     using System;
     using System.Web;
     
     namespace SilverlightApp.Web
     {
         public class MyRadUploadHandler : Telerik.Windows.RadUploadHandler
         {
         }
     }

5. Build all and run the Web application. Test the upload - select some files to upload and check inside the MyStorageFolder folder for uploaded files.

I have attached an example project where all the mentioned points above are implemented. Please give it a try and let me know if there are other questions.

PS: Some information about the RadUpload control can be found in our documentation.

Best wishes,
Ivan
the Telerik team

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

[Thomas]

Thanks for the qucik-start. I still experience problems with both your sample and my own sample. It sends back the followingt error

The remote server returned an error "NotFound" at System.Net.AsyncHelper.BeginOnUI ....

Is is the same error in your sample and in my own project, but in the official sample it works fine on my machine. It looks like that it is a

folder issue because if i take the working sample and renames the folder to UploadedFiles2 and change the targetfolder to the same name if failes with "The given key was not present in a dictionary"

 

Regards

Thomas

 

[lthao]

Yes, I had the same problem with Thomas when using Upload control.
I used *.jpeg file to upload. I always got this error when trying to upload a file. I deployed the application on IIS 7 (vista).
I wonder if the problem comes from.ashx ? and this extension not declared in MIME TYPE is a reason?

Thanks

[Serrin]

Dear lord, it's spreading...

I was fighting with the NotFound problem all day in the Silverlight application I am working on (funny too, because I've been working on it all week but suddenly this was a brick wall in my getting anything done today), I even fully replaced the WCF service with a new one and rebuild the application from the ground up, piece by piece.  The one thing that got it to stop for me (not sure if this will work for you) is to add this line above the class declaration in the WCF service:

 

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]  .

Just tried it again and the problem has disappeared altogether, so hopefully this helps one of you as well.

[Ivan]

Hello,

If you are trying to upload cross domain you should cover some requirements - here is a good article about this case: Making a Service Available Across Domain Boundaries.

As a simple anytime-test you can access the UploadHandler directly in your browser - the response should be like this one:

{"JSONData":[{"Key":"RadUAG_message","Value":"Empty file name"},{"Key":"RadUAG_success","Value":false}]}

Please give it a try and let me know whether you need further assistance.

Best wishes,
Ivan
the Telerik team

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

[lthao]

Grrrrmm, this error always appears.
For the simple test as your said, the message is {"JSONData":[{"Key":"RadUAG_message","Value":"Empty file name"},{"Key":"RadUAG_success","Value":false}]}
I gave up my project and use your sample project (retrieved from telerik website). When I run on my local (dev environment, windows xp), everything is ok (uploading ok...). When I made a package and deployed on Windows server 2003 and Vista, I always got the error:
"Unhandled Error in Silverlight 2 application. The given key was not present in the dictionary"
What does it mean indeed? It seems that using this silverlight upload control is not to save my time
Regards,

[Thomas]

When calling the handler i get 

Parser Error Message: Could not create type 'XXX.Web.MyRadUploadHandler'.
Source Error:

Line 1: <%@ WebHandler Language="C#" CodeBehind="RadUploadHandler.ashx.cs" Class="XXX.Web.MyRadUploadHandler" %>

Source File: /BXE/RadUploadHandler.ashx    Line: 1

All my webservices in the same project works fine

Thomas

[Valentin.Stoychev]

Hi Thomas,

1. Did you managed to run your project locally and to have the upload working?
2. Basically to move the upload to the remote server you should just do the following steps:
  - change the UploadServiceUrl property
  - create the physical folder on your remote server and give the appropriate permissions.
  - upload the needed dlls to the remote server - both the Silverlight dlls and the Dll needed for the Upload handler - Telerik.Windows.RadUploadHandler.dll

PS: From the error that you reported the most obvious reason is that the "Telerik.Windows.RadUploadHandler.dll" is missing.

Please confirm that these steps above are ok and, if they are we, will search the problem somewhere else.

Greetings,
Valentin.Stoychev
the Telerik team

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

[Thomas]

Thanks a lot for your help. I solved it by by giving  the class the name "RadUploadHandler"  so they are equal to each other.

RadUploadHandler

: Telerik.Windows.RadUploadHandler

Works greeat and together with the other controls i have managed to get working i am now very satiesfied with the controls.

Br
Thomas

 

[Valentin.Stoychev]

Hello Thomas,

I'm glad you were able to solve the problem!

Let us know if you have any other feeedback on the controls.

Greetings,
Valentin.Stoychev
the Telerik team

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

[venu]

hi Thomas,

   please help me. (my email id is [e-mail])

i downloaded the upload project from  this site but it is not working it is giving an error  on click of upload button
visual studio just in time debugger
an unhandled exception('unhandled error in silvelight2 application at system.net.asynchelper.beginonui(sendorpostcallback
beginmethod, object state) at system.net.browserhttpwebrequest.endgetresponse(Iasyncresult asyncresult)

Thanks and regards
venugopal

[Tony Fabian]

Thank you for a nice sample. It helped me alot :)
But i am getting file corruptions. If I put the following in the MyRadUploadHandler the files are being corrupt ... the grow in size :-(

 

 public class MyRadUploadHandler : Telerik.Windows.RadUploadHandler
    {
        //hard coded path for demo purposes
        private const string PATH = "C:\\temp";
        public override void ProcessStream()
        {
            if (this.IsFinalFileRequest())
            {
                this.TargetPhysicalFolder = PATH;
            }

            base.ProcessStream();
        }
    }

 

 

 

 

If i remove the ProcessStream method the files are being saved in the folder MyStorageFolder without being corrupted. 

The issue seems to occour if you try to save the files to a location outside the root of you webapplication. 

  

<telerikInput:RadUpload
            Filter="Image Files (*.gif;*.jpg;*.jpeg;*.png)|*.gif;*.jpg;*.jpeg;*.png|Text Files (*.txt)|*.txt|All Files(*.*)|*.*"
            FilterIndex="0"
            IsAutomaticUpload="False"
            OverwriteExistingFiles="True"
            UploadServiceUrl="http://localhost/RadUploadExample/MyRadUploadHandler.ashx"
            TargetFolder="MyStorageFolder"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"/>

I am using the RadControls_for_Silverlight_2009_2_701_DEV
Any idea why this is happening and how to fix this?

/tony

 

 

 

 

[Ivan]

Hi Tony,

Thank you for your interest in the RadUpload control.

After investigating the example code we found the source of the issue. Actually the uploaded file has been saved in two different places:

• the MyStorageFolder folder - a sub-folder of your web-site - for all the file's content except the final chunk.
• the "C:\temp" folder for the final chunk.

Please preview the points below. This information is related to the issue:

• All files are uploaded by chunks. You can change the chunk size via the BufferSize property - by default its value is 100'000 bytes.
• How upload handler determines where to save uploaded chunks / files:
  • If the TargetPhysicalFolder property is not null - its value contains the absolute path to the storage folder.
  • else the value of the TargetFolder property is the name of a sub-folder next to the upload handler, i.e. it is a relative path to the storage folder.

Please modify your code regarding the information above and let us know if you have more questions.

PS: More information and examples for the RadUpload control you can find in our KB section.

Kind regards,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Tony Fabian]

Hi Ivan,

Thank you for your reply.

My goal is to storage the files in a directory outside my webappplication e.g. c:\temp. I haved solved this by moving my code to

public override string TargetPhysicalFolder

instead.

[Ivan]

Hello Tony,

Actually there are two ways of using the TargetPhysicalFolder property:

• initialize the RadUploader's TargetPhysicalFolder property inside Xaml or code-behind:
   
  

  <telerikInput:RadUpload
      TargetPhysicalFolder="c:\temp" />

   
  

  this.radUpload1.TargetPhysicalFolder = @"c:\temp";

   
• In the case you would like to hide the destination folder from the public it is better to initialize the RadUploaderHandler's TargetPhysicalFolder property inside the ProcessStream method:
   
  

  public class MyRadUploadHandler : Telerik.Windows.RadUploadHandler
  {
      private const string PATH = "C:\\temp";
      public override void ProcessStream()
      {
          this.TargetPhysicalFolder = PATH;
          base.ProcessStream();
      }
  }

   

We hope this information will help you.

All the best,
Ivan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[young kim]

Thanks for the sample code for the basic uploading function.
Do you have sample project for uploading with imageviewer as well?
I like to show what images are uploading.
I just download your library so absolutely no clue how to use it.
Sample project really help to up and running my app with your control right away.

thanks,

[Ivan]

Hi Kim,

Thank you for contacting us.

About previewing uploaded images please preview the RadUpload for Silverlight in the Image Gallery article. There is an example application too.
A short description with basic know-how you can find in our online help.
More examples you can find in our online Knowledge Base articles.

Please try the suggested sources and let us know if you have more questions.

Best wishes,
Ivan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eugeniy Tunikov]

I am using this ProcessStream function to upload files to the server. But after the files are uploaded the thumbnails are not showing. Here is my code:

 

private string PATH = Convert.ToString(System.Configuration.ConfigurationSettings.AppSettings["UploadFolder"]);

public override void ProcessStream()
    {
        DirectoryInfo di = new DirectoryInfo(PATH);
        if (di.Exists)
        {
            this.TargetPhysicalFolder = PATH;
            base.ProcessStream();
        }
    }

The PATH is "C:\uploads"

Thanks

[Ivan]

Hello Eugeniy,

Thank you for contacting us.

Please not in the Image Gallery example we are reconstructing the thumbnails' path. In your scenario you should modify the client-side code. Other thing you should do is to expose the upload folder in internet - for example "http:\\myComputer\myUploads".

We hope this information will help you.

Regards,
Ivan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Eugeniy Tunikov]

The folder is exposed to the internet. But what should i change in the client side code?
Thanks

[Ivan]

Hello Eugeniy,

You should change the code inside the RadUpload_FileUploaded method (project: SilverlightApplication; file: Page.xaml.cs). Please try to replace the following code:
 

Uri uri = ConstructAbsoluteUri(new Uri(this.RadUpload1.UploadServiceUrl,
    UriKind.RelativeOrAbsolute));
string imageURL = uri.AbsoluteUri.Remove(uri.AbsoluteUri.LastIndexOf("/")) +
    "/" + RadUpload1.TargetFolder + "/" + e.SelectedFile.Name;

 
with the code below:
 

string imageURL = AddressOfYourUploadDirectory + "/" + e.SelectedFile.Name;

 
If you have other questions please drop us a line.

Kind regards,
Ivan
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Marc Roussel]

Hi,

I have to perform operations like making a copy of the file and resizing the image to create a thumbnail but just before I do my operations, if I let go all this with the code below, the the image is unreadable.  It shows as a smal X icon

If I remove the code, the file is all right.
Any idea ?

public override bool SaveChunkData(string filePath, long position, byte[] buffer, int contentLength, out int savedBytes)
{
    bool result = true;

    if (this.IsFinalFileRequest())
    {
        // I have to perform operations when I have the entire file here... but it never gets in here with this condition in place
        result = base.SaveChunkData(filePath, position, buffer, contentLength, out savedBytes);
    }

    savedBytes = 0;
    return result;
}

[Alex Fidanov]

Hi Marc Roussel,

This is because you are not actually saving anything in this method. Please note that you still have to call base.SaveChunkData so that the received bytes are saved. Perhaps, what you need is :

result = base.SaveChunkData(...);
if(this.IsFinalFileRequest())
{
...
}
return result;

Kind regards,
Alex Fidanov
the Telerik team

[Marc Roussel]

Great :)
Works like a charm.

Thank you

[Marc Roussel]

Could you tell me what's wrong with buffer in SaveChunkData to give me the error "Parameter is not valid"
when trying to get a Stream out of it and getting an Image or a Bitmap as both gives the error

I tried several way of getting an Image or a Bitmap from the buffer with no success to date

Code below :

public override bool SaveChunkData(string filePath, long position, byte[] buffer, int contentLength, out int savedBytes)
{
    bool result = base.SaveChunkData(filePath, position, buffer, contentLength, out savedBytes);

    if (this.IsFinalFileRequest())
    {
        if (result)
        {
            Image i = Image.FromStream(new MemoryStream(buffer)); // <-- CRASH HERE WITH "Parameter is not valid"
            Bitmap b = new Bitmap(i);
            this.AddReturnFileParam(RadUploadConstants.ParamNameSuccess, true);
        }
    }

    return result;
}

[Marc Roussel]

Also what is the event I get into to know that all the files have been uploaded ?

[Marc Roussel]

Another small question.
Why the last file saved it locked ? As I'm unable to do anything with it until I kill my browser.

Looks like something is holding tight on it.

[Marc Roussel]

Would be nice to have the last line fitting the container so it isn't cutted like this :

Image

[Alex Fidanov]

Hello Marc Roussel,

You can use the UploadFinished event. It is raised after all of the files have been uploaded.
Clipping of the last item depends on the height of the RadUpload and in particularly the height of the items control that displays the items. What you can do when the page loads, calculate the height of one item and set the height of the RadUpload control to such a value, that will display the items without clipping them. Please note that, if there are more items than the view port can display, the items will be brought into view when they start uploading.

I am not sure what is holding onto the saved file, but it could be an anti virus software or something else not closing the file. I would recommend opening the file after it has been uploaded - using the File class or creating a FileInfo object. The buffer might not contain all of the file's bytes.

Greetings,
Alex Fidanov
the Telerik team

[Aziz]

can you perhaps provide the complete origional method for SaveChunkData? the reason for this is that I need to lock the file upon creation untill all chunks are written (file is completely sent)...

my other option is to upload the file completly to a 'temp' and once uploaded move it to the 'destination'

[Tina Stancheva]

Hello Jacob,

You can implement your scenario by overriding the SaveChinkData method and using the IsNewFileRequest() and IsFinalFileRequest() methods. The first method returns true if the current request contains the first chunk of the uploaded file so if it returns true you can lock the file. And if the IsFinalFileRequest() method returns true, this means that the current request contains the final chunk of the uploaded file so you can unlock the file:

public override bool SaveChunkData(string filePath, long position, byte[] buffer, int contentLength, out int savedBytes)
{
    if (this.IsNewFileRequest())
    {
        //lock the file
    }
    bool result = base.SaveChunkData(filePath, position, buffer, contentLength, out savedBytes);
    if (this.IsFinalFileRequest())
    {
        //unlock the file
    }
    return result;
}

You can find more info about the RadUploadHandler methods and properties here. I hope this info will help you.

Greetings,
Tina Stancheva
the Telerik team