title: Is there a way to upload file before custom button click,and then using ajax send it to controller action method?
body: <p>I am quite new to Telerik Html Kendo. My aim is to upload a file first. Then, invoke the corresponding action method in 'Administration' controller through ajax that should take the uploaded file and other parameters on clicking the 'Submit' button as shown in image below.</p>
  
  <p>Most of Telerik examples show asynchronous upload feature which invokes controller method to upload file. I don't want to do this way.</p>
  
  <p>However, I have tried to upload file with onSelect event of kendo upload. It shows that file gets included however it doesn't upload. </p>
  
  <p>As a result, I am unable to see any info. about uploaded file in onSuccess and onComplete event.
  I used formData on 'Submit' button click. However I receive null at the action method all time.</p>
  
  <p>Any correct way of doing this?</p>
  
  <p>Here is my html code for file upload:</p>
  
  <pre><code>&lt;div class="well well-sm" style="width:inherit;text-align: center;float:left;"&gt;
              &lt;!--form method="post"--&gt;
                  &lt;!--div class="demo-section k-content"&gt;
                      &lt;input name="files" id="files" type="file" value="Upload a Data File"/&gt;
                  &lt;/div--&gt;
              &lt;!--/form--&gt;
              @(Html.Kendo().Upload()
          .Name("files")
          .Multiple(false)
          .Messages(m =&gt; m.Select("Please upload a Data File"))
          .HtmlAttributes(new { aria_label = "file" })
          .Events(events =&gt; events
                  .Complete("onComplete")
                  .Select("onSelect")
                  .Success("onSuccess")
                  .Upload("onUpload")
                  .Progress("onProgress"))
          //.Async(a=&gt;a.AutoUpload(false))
          .Validation(v =&gt; v.AllowedExtensions(new string[] { ".csv", ".xls", ".xlsx", ".txt" }))
          )
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is the javascript code for all the js events I want to invoke. </p>
  
  <pre><code>&lt;script&gt;
  
  
     var _files;
          function onSelect(e) {
              var files = e.files;
              alert(files[0].name);
              _files = files[0];
              //file = files[0].name;
                  var acceptedFiles = [".xlsx", ".xls", ".txt", ".csv"]
                  var isAcceptedFormat = ($.inArray(files[0].extension, acceptedFiles)) != -1
  
              if (!isAcceptedFormat) {
                  e.preventDefault();
                  $("#meter_addt_details").addClass("k-state-disabled");
                  //$("#submit_btn").addClass("k-state-disabled");
                  document.getElementById("submit_btn").disabled = true;
                  alert("Please upload correct file. Valid extensions are xls, xlsx,txt,csv");
              }
              else {
  /* Here I tried to upload file didn't work out */
                  $("#meter_addt_details").removeClass("k-state-disabled");
                 // $("#submit_btn").removeClass("k-state-disabled");
                  document.getElementById("submit_btn").disabled = false;
                  @*
                  $("#files").kendoUpload({
                  async: {
                      saveUrl: '@Url.Action("ReadMeterFile","Administration")',
                      autoUpload: false
                      }
                  }); *@
                  $("#files").kendoUpload();
                  //$(".k-upload-selected").click();
                  @*var upload = $("#files").data("kendoUpload");
                  upload.upload(); *@
              }
          }
          @*
          function onUpload(e) {
              $(".k-upload-selected").trigger('click');
              //console.log("Upload :: " + getFileInfo(e));
          }
          function onSuccess(e) {
  
              console.log(files[0].name);
              _files = e.files[0];
          }
          function onProgress(e) {
              console.log("Upload progress :: " + e.percentComplete);
          }
          function onComplete(e) {
              console.log("Complete");
          }
          function onSubmitButtonClick(e) {
  
              var formData = new FormData();
              alert(_files.name);
              formData.append('files', _files);
              formData.append('order_num', $("#order").val());
              formData.append('purchase_order', $("#purchase_order").val());
              $.ajax({
                  url: '@Url.Action("ReadFile","Administration")', 
                  data: formData,
                  type: 'POST',
                  processData: false,
                  contentType: false,
                  dataType: "json",
                  success: function (data) {
                      alert("Good");
                  }
              });     
          }
      &lt;/script&gt;
  </code></pre>
  
  <p>Here is my controller:</p>
  
  <pre><code>public ActionResult ReadFile(IEnumerable&lt;HttpPostedFileBase&gt; files,string order_num, string purchase_order)
          {
              System.Diagnostics.Debug.WriteLine("File length:"+files.ToList().Capacity);
              foreach(var f in files)
              {
                  System.Diagnostics.Debug.WriteLine(f.FileName);
                  var fileName = Path.GetFileName(f.FileName);
                  var destinationPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);
  
                  f.SaveAs(destinationPath);
              }
              //System.Diagnostics.Debug.WriteLine(file);
              /*
              System.Diagnostics.Debug.WriteLine("File:"+files);
              System.Diagnostics.Debug.WriteLine("Order:"+order_num);
              System.Diagnostics.Debug.WriteLine("Purchase Order:"+purchase_order);
              return Content("");
          }
  </code></pre>