How can I add PDF file upload option in datatable for each row of table.

sharmaamit98

Hello All,

Below is my render code.
{
"render": function (data, type, row) {
--Here I have to display and file upload option for each row of datatable, on which user click and should be able to upload pdf file to DB.
},
"className": "text-center",
"targets": [4]
},

Any help would be appreciated.

kthorngren

Are you using Editor? Here is an Editor example.

Kevin

sharmaamit98

@kthorngren Thanks for your reply.
I am not using editor. I am using simple datatable library plugin.

<script src='@Url.Content("~/plugins/datatables/dataTables.bootstrap.min.js")'></script>

Below is my code snippet:

$('#tableID').dataTable({
"responsive": true,
"serverSide": true,
"orderMulti": false,
"ordering": false,
"ajax": {
"url": "@Url.Action("LoadData" , "ControllerName")",
"type": "POST",
"contentType": "application/json",
"data": function (d) {
$(".so-overlay").toggleClass("hide");
setTimeout(autoRefresh, 300000);
if (d.error != undefined) {
alert(d.error);
return;
} else {
return JSON.stringify(data);
}
},
"error": function (d) {
$(".so-overlay").toggleClass("hide");
}
},
"columns": [

                { "data": "ColumnName1", "orderable": false, "className": "all" },
                { "data": "ColumnName2", "orderable": false, "className": "all" },
                { "data": "ColumnName3", "orderable": false, "className": "all" },
            ],

columnDefs": [
{
"render": function (data, type, row) {
if (row.Id != '') {
return row.Id;
} else {
return '';
}
},
"targets": [0]
},
{
"render": function (data, type, row) {
if (row.Number!= '') {
return row.Number;
} else {
return '';
}

                    },
                    "targets": [1]
                },

{
render: function (data, type, row) {

                        ----Here I have to display file upload option for each row of table to allow user to upload PDF file.

                    },
                    "targets": [2]
                },

kthorngren

You will need to do something similar as the Editor example. You will need a click event for the cell to whatever you choose, see this delegated events for creating the event handler and getting the data of the row clicked.

In the event handler you will need to present a file upload input and once the file is uploaded send the appropriate information to the server, via ajax, to update the database. This example shows how to render HTML elements into the cell which you can use for the click event. Presenting a file uploader and sending file info via ajax is generic Javascript coding outside of Datatables.

If you have specific Datatables questions about this we will gladly help. If you are not familiar with creating a file upload option then I would suggest creating one outside of Datatables and getting it to work first.

Kevin

sharmaamit98

Thanks Kevin.
I just need some help to render file upload option.
I found the code to upload image but I have to upload PDF.

render: function ( file_id ) {
return file_id ?
'<img src="'+table.file( 'files', file_id ).web_path+'"/>' :
null;
},

kthorngren

Maybe use file input instead.

Kevin