want to show success message after file upload
want to show success message after file upload
Given the following javascript, once the file uploads, I'd like to display a message like: "File Upload Successful." right on the form itself. As it stands now, the upload button simply does a percentage count up to 100%. I'd like a message displayed once it completes. Is that even possible? As you can see, the success function is setup to display an alert for now, but it doesn't even fire on a file upload. I'm thinking the upload type field has its own internal ajax call separate from the form itself? If we do get this working, how do I make the Create and Edit forms display my message just as any error message might be displayed?
var editor;
var table;
var rowid;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
url: "../jsp/uploadfiletodb.jsp",
type: "POST",
success: function (data) {
alert("success function: " + data);
}
},
table: "#example",
title: "Upload File",
fields: [
{
label: "ID:",
name: "DT_RowId",
type: "readonly"
},
{
label: "Select A File:",
name: "content",
type: "upload",
ajaxData: function ( fd ) {
alert("id: " + editor.field('DT_RowId').val());
if(editor.field('DT_RowId').val() != "")
{
//a reminder that I changed the name of the field specifically for uploads
//thus the name Upload_RowId is what Parameters is expecting on an update.
fd.append( 'Upload_RowId', editor.field('DT_RowId').val() );
}
}
}
]
} );
table = $('#example').DataTable( {
dom: "Bfrtip",
ajax: "../jsp/uploadfiletodb.jsp",
columns: [
{ data: "filename" },
{ data: "filesize" },
{ data: "mimetype" },
{ data: "modified" }
],
select: true,
buttons: [
{
extend: 'create',
editor: editor,
formButtons: [
{
label: 'Close',
fn: function () {
table.row(rowid).deselect();
table.ajax.reload();
this.close();
}
}
]
},
{
extend: 'edit',
editor: editor,
formButtons: [
{
label: 'Close',
fn: function () {
table.row(rowid).deselect();
table.ajax.reload();
this.close();
}
}
]
},
{ extend: "remove", editor: editor },
{ extend: "selectedSingle",
text: "Download File",
action: function(e,dt,node,config){
//alert("ID: " + rowid + " This function is temporarily undefined");
$("input#rowid").val(rowid);
//Submit the hidden form for processing.
$("form#myform").submit();
}
}
]
} );
//Record the id of every row clicked on
$('#example').on( 'click', 'tr', function () {
rowid = table.row( this ).id();
//selector = table.row( rowid );
} );
//Hide the form
$("div#hiddenform").hide();
Answers
Currently no - there isn't really a way of doing this I'm afraid. The only notification you have of a change in file is the
render
callback of theupload
field type. I expected that to be used to show information about the uploaded file and thought that would be enough. Is that not the case here?One other point - as the
ajax
documentation notes, you shouldn't override thesuccess
function - doing so would overwrite Editor's ownsuccess
callback.Allan
OK. I was thinking that might be the case. No problem. We'll live with it. At least the example as a whole is functional.