Automatic upload

[david]

Is there a way to automatically upload , both on drag'n'drop and Select file...so users don't have to hit a button and force a post back?

We do have code behind that processes the files and updates the DB that needs to run

 

thanks

 

[Hristo Valyavicharski]

Hi David,

There two ways to do that:

1. Submit the form automatically using the RadAjaxManager:

   <form id="form1" runat="server">
          <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
              <Scripts>
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
              </Scripts>
          </telerik:RadScriptManager>
          <script type="text/javascript">
              function fileSelected(sender, args) {
                  $find("ajaxManager").ajaxRequest();
              }
          </script>
          <telerik:RadAjaxManager runat="server" ID="ajaxManager">
              <AjaxSettings>
                  <telerik:AjaxSetting AjaxControlID="ajaxManager">
                      <UpdatedControls>
                          <telerik:AjaxUpdatedControl ControlID="ajaxManager" />
                          <telerik:AjaxUpdatedControl ControlID="asyncUpload" />
                      </UpdatedControls>
                  </telerik:AjaxSetting>
              </AjaxSettings>
          </telerik:RadAjaxManager>
          <telerik:RadAsyncUpload runat="server" ID="asyncUpload" OnClientFileSelected="fileSelected" TargetFolder="~/Uploads"></telerik:RadAsyncUpload>
      </form>

2. Use Custom Http Handler to upload file immediately after it is selected:AsyncUpload - Custom Http Handler


Regards,
Hristo Valyavicharski
Telerik

[david]

Hi Hristo , thank you for your quick and comprehensive reply. When I use the first method, in the page_load event I am checking this:

   if ((IsPostBack) && (RadUpload1.UploadedFiles.Count > 0))
            HandleUpload();

 If I submit the form the Count>0 and life is good; but when the form is submitted automatically via the  $find("ajaxManager").ajaxRequest() the Count is 0 and the processing doesn't fire. Should I be handling this another way?

 

thank you

[Hristo Valyavicharski]

Sorry to use OnClientFilesUploaded instead OnClientFileSelected:

<script type="text/javascript">
      function filesUploaded(sender, args) {
          $find("ajaxManager").ajaxRequest("upload");
      }
  </script>

  <telerik:RadAjaxManager runat="server" ID="ajaxManager" OnAjaxRequest="ajaxManager_AjaxRequest">
      <AjaxSettings>
          <telerik:AjaxSetting AjaxControlID="ajaxManager">
              <UpdatedControls>
                  <telerik:AjaxUpdatedControl ControlID="asyncUpload" />
              </UpdatedControls>
          </telerik:AjaxSetting>
      </AjaxSettings>
  </telerik:RadAjaxManager>
  <telerik:RadAsyncUpload runat="server" ID="asyncUpload" OnClientFilesUploaded="filesUploaded" TargetFolder="~/Uploads"></telerik:RadAsyncUpload>

protected void ajaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
   {
       if (e.Argument == "upload")
       {
           foreach (UploadedFile file in asyncUpload.UploadedFiles)
           {
               file.SaveAs(Server.MapPath("~/Uploads/") + file.FileName);
           }
       }
   }

Regards,
Hristo Valyavicharski
Telerik

[Lou]

Hi Hristo, I have the same requirement to automatically complete the upload. When I tried your suggestion I got an exception when the ajaxManager_AjaxRequest method was called. The file.SaveAs() method threw a file not found exception. I ran the upload again and while looking at the temporary folder location on my machine I saw that the temporary file was removed before the call to ajaxManager_AjaxRequest was made.

I found that by simply not handling the ajaxManager_AjaxRequest method at all I got the desired results (automatic POST and completion of renaming temporary file to the target file/location).

I don't fully understand why this is, but thought I'd mention it in case others have the same trouble.

-Lou

[Hristo Valyavicharski]

Hi,

Try to remove the TargetFolder="~/Uploads" property.

Does it help?

Regards,
Hristo Valyavicharski
Telerik

[Lou]

Yes, if I remove the TargetFolder property (or set it to "" on the server side) then the code in ajaxManager_AjaxRequest() runs without problems. Presumably because in that case, the temporary file doesn't automatically get renamed to the target location before the call to ajaxManager_AjaxRequest().

Could you explain why? It would be helpful to understand what is going on under the covers.

Thanks,

-Lou

[Hristo Valyavicharski]

When file is selected AsyncUpload automatically uploads it into the Temporary Folder (App_Data\RadUploadTemp). If TargetFolder property is defined and postback occurs then the async will move selected file from temporary to the target folder. However you tries to save it manually through the code. This cause error, because when your code:

protected void ajaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e)
   {
       if (e.Argument == "upload")
       {
           foreach (UploadedFile file in asyncUpload.UploadedFiles)
           {
               file.SaveAs(Server.MapPath("~/Uploads/") + file.FileName);
           }
       }
   }

is executed the file actually doesn't exits it was already saved (moved from temp to target) by the control.

Regards,
Hristo Valyavicharski
Telerik

[Lou]

OK - thanks for the explanation!

-Lou