I am using blueint jquery.fileupload plugin to upload files using asp.net
I have a situation where I have a page to allow the user to select a category (dropdownlistbox), a title (for the uploaded file - TextBox) and a file input (handled by the plugin).
the plugin: https://github.com/i-e-b/jQueryFileUpload.Net
javascript/jquery:
$('#fileup').fileupload({
replaceFileInput: false,
formData: function (form) {
return [{ name: 'dcat', value: $('#ddlCats').val() }, { name: 'title', value: $('#txtTitle').val()}];
},
dataType: 'json',
url: '/_handlers/FileHandler.ashx',
add: function (e, data) {
var valid = true;
var re = /^.+\.((doc)|(xls)|(xlsx)|(docx)|(pdf)|(pts))$/i;
$.each(data.files, function (index, file) {
if (!re.test(file.name)) {
$('#uploaded').html('This file type is not supported');
valid = false;
}
});
if (valid)
data.submit();
},
done: function (e, data) {
$.each(data.result, function (index, file) {
$('#uploaded').html(file);
});
GetFiles($('#ddlCats').val())
},
error: function () {
alert('An error occured while uploading the document.');
}
});
html:
<div id="fUpload">
<span style="font-weight:bold;">Yeni Belge:</span><br />
<table class="ktoeos">
<tr>
<td>Category:</td>
<td> <select id="ddlCats"></select></td>
</tr>
<tr>
<td>Document Description:</td>
<td><input type="text" id="txtTitle" /></td>
</tr>
<tr>
<td>Select Document:</td>
<td><input type="file" name="file" id="fileup" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" id="btnSubmit" value="Upload" /></td>
</tr>
</table>
<div id="uploaded"></div>
My problem is, the file gets uploaded (through an http handler) straight after I select a file. I can handle it to submit other form data along with it however, I want to fire this event on the button submit as I need to carry out some validation. Also the user might want to select a file first and then fill the other parts of the form, which in this case he/she cannot do, due to the form being submitted before he/she can do that.
Since I am not a very good javascript programmer, I have no idea if this functionality is already available (which probably is) in the .js files available with the plugin. Any ideas what I need to change or do?
The add
callback is invoked as soon as files are added to the widget, so you need to override it to pause the upload and then start it with a button click.
add: function (e, data) {
$("#btnSubmit").click(function () {
// validate file...
if(valid)
data.submit();
});
}
Update: The documentation has a better example of this now:
This is very easy to do as there is an option " autoUpload: true"
which is set as default in the jquery.fileupload-ui.js
If you change it to false
and you can manually code on the button Click event.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With