Reputation: 1277
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
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
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:
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
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