RadAsyncUpoload upload to TargetFolder without postback

[Fit2Page]

Hi,

 

Is it possible to upload directly to the TargetFolder when the file is dropped on a dropzone?

I mean, without hitting a submit button first?

 

Thanks,

Marc

[Vasko]

Hello Marc,

You can find information relevant to your question in more detail in the following thread - RadAsyncUpload Automatic upload.

I hope this helps you out.

Kind regards,
Vasko
Progress Telerik

[Vasko]

Hello again Marc,

As a follow-up, here's the code I used for testing: 

• Markup of the AsyncUpload, AjaxManager, and the drop zones: 

  <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" 
      TargetFolder="~/Uploads"
      DropZones=".DropZone1,#DropZone2"
      OnClientFileDropped="onClientFileDropped" 
      OnClientFileUploaded="onClientFileUploaded">
  </telerik:RadAsyncUpload>
  
  <div class="DropZone1">
      <p>Custom Drop Zone</p>
      <p>Drop Files Here</p>
  </div>
  <div id="DropZone2">
      <p>Custom Drop Zone</p>
      <p>Drop Files Here</p>
  </div>

• Server-side logic: 

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

• JS logic that gets executed whenever a file is dropped and done uploading: 

  <script>
      function onClientFileDropped(sender, args) {
          $find("ajaxManager").ajaxRequest("upload");
      }
  
      function onClientFileUploaded(sender, args) {
          console.log("uploaded!") // Used for testing
      }
  </script>

Additionally, here are some articles released for the uploading process overall:

• File Upload with Drag and Drop Demo
• How to Manipulate the Uploaded Files

I hope this information suits you well.

Kind regards,
Vasko
Progress Telerik