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

Automatic upload

8 Answers 72 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
david
Top achievements
Rank 1
david asked on 20 Sep 2015, 10:48 PM

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

 

8 Answers, 1 is accepted

Sort by
0
Hristo Valyavicharski
Telerik team
answered on 21 Sep 2015, 07:59 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
david
Top achievements
Rank 1
answered on 21 Sep 2015, 01:04 PM

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

0
Hristo Valyavicharski
Telerik team
answered on 24 Sep 2015, 08:13 AM
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
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 Feedback Portal and vote to affect the priority of the items
0
Lou
Top achievements
Rank 1
answered on 31 Mar 2016, 03:36 PM

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

0
Hristo Valyavicharski
Telerik team
answered on 05 Apr 2016, 11:07 AM
Hi,

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

Does it help?

Regards,
Hristo Valyavicharski
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Lou
Top achievements
Rank 1
answered on 05 Apr 2016, 01:36 PM

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

0
Hristo Valyavicharski
Telerik team
answered on 06 Apr 2016, 08:58 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Lou
Top achievements
Rank 1
answered on 06 Apr 2016, 01:02 PM

OK - thanks for the explanation!

-Lou

Tags
AsyncUpload
Asked by
david
Top achievements
Rank 1
Answers by
Hristo Valyavicharski
Telerik team
david
Top achievements
Rank 1
Lou
Top achievements
Rank 1
Share this question
or