CODEWITHSUNDEEP
javascriptajaxasp.net-mvcfile-uploadkendo-ui
Anelook
Anelook

Reputation: 1277

How to upload a file with Kendo Uploader and using ajax request?

Problem: I would like to add an Upload control to the page, but the problem is, that I don't see how I can integrate it with all my other controls: I don't want to upload the file straight away, but only to allow user to select it and on button click upload all information at once by using javascript and ajax post request.

A little bit more details: I have a webpage with a number of inputs and a button Save. When Save is clicked in javascript I review the inputs, put them into an object and send with ajax request to the server to be saved.

Is it possible to do so? All examples I have found are based on Upload control having its own button "Upload" or behaving asynchronously. However, my scenario is different.

Will be grateful for any ideas.

Upvotes: 1

Views: 11741

Answers (3)

Snd'
Snd'

Reputation: 44

I solved upload files and data at the same time using Kendo UI:

uploadForm.php

<form method="POST" id="formLic" name="formLic" enctype="multipart/form-data">
   <label for="lnumero">Número: </label>
   <input type="text" id="lnumero" class="k-textbox"/>
   <label for="larchivo">Archivo: </label>
   <?php
      $upload = new \Kendo\UI\Upload('larchivo');
      $localization = new \Kendo\UI\UploadLocalization();
      $localization->select('Examinar...');
      $upload->showFileList(true)
         ->multiple(false)
         ->localization($localization)
         ->attr('name','larchivo[]');
      echo $upload->render();
   ?>
</form>
<script>
      $(document).ready(function() { 
        $("form#formLic").submit(function(){
            var formData = new FormData($(this)[0]);
            $.ajax({
                url: "nuevo/uploadInsert.php",
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (result) {
                    alert(result);
                }
            });
            return false;
        });
    });
</script>

Upvotes: 0

OnaBai
OnaBai

Reputation: 40887

Kendo Upload supports both Sync and Async upload modes. Check this post.

So you can have an HTML form like this:

<form method="post" id="form" action="update.php">
    <label for="control">Control: <input id="control" class="k-checkbox" type="checkbox"/></label>
    <input name="photos" id="photos" type="file"/>
    <input id="send" class="k-button" type="button" value="Save"/>
</form>

Where I define:

  1. a checkbox that I'm going to validate for deciding to send or not the content of the form
  2. an file input field
  3. a button that when clicked will validate the form and then send it.

Now, the JavaScript for uploading files:

 $("#photos").kendoUpload({
    multiple: false
});

Since I'm not saying that it is asynchronous it is synchronous by default:

And the function for validating the form:

$("#send").on("click", function (e) {
    // Check that Checkbox is ticked
    var ctl = $("#control").is(":checked");
    if (ctl) {
        // if so, send the form
        $("#form").submit();
    } else {
        // otherwise show an alert
        alert("Please check 'control' before sending");
    }
});

Upvotes: 3

Anto Subash
Anto Subash

Reputation: 3215

i have came across the same problem long time ago and solved this by storing the uploaded file in the session until the user submits. since i had the restriction on file size and number of files it worked great for me. but the better way is to use the jquery.fileupload plugin. it has the support for Programmatic file upload.

https://github.com/blueimp/jQuery-File-Upload/wiki/API#programmatic-file-upload

Upvotes: 1

Related Questions