Synchronous Uploader in a Grid
5 Replies
Hi Mark,
Thanks for your update.
Based on your query and provided information, We have prepared a sample. In this sample, we have overridden the default functionally of adaptor and upload file during insert operation and then render file name as anchor link in grid mode using template property so you can able to download the corresponding file when click anchor link(file name) in Grid.
By default , When we upload files in server then its needed to create a FormData and if we want to send the additional information then we have to append the value in FormData as follows, then only we can able to get the value in controller side.
Here, we have append the OrderID and CustomerID in FormData and get it in controller Save method(Insert method) and the insertion action was works fine and then the ModelState.IsValid property returns the value true. Please refer the below sample, code example and screenshot for more information.
Sample: https://www.syncfusion.com/downloads/support/forum/168817/ze/ej2-uploader-core-services943619615.zip
Sample: https://www.syncfusion.com/downloads/support/forum/168817/ze/ej2-uploader-core-services943619615.zip
[HomeController.cs]
|
Index.cshtml
<div id="container">
<div id="Grid"></div>
</div>
<script id="template2" type="text/x-template">
<div class="link">
<a rel='nofollow' href=""></a>
</div>
</script>
<script>
var file;
var elem;
var richText;
var rte;
class custom extends ej.data.UrlAdaptor {
processResponse(data, ds, query, xhr, request, changes) {
request.data = JSON.stringify(data);
return ej.data.UrlAdaptor.prototype.processResponse.call(this, data, ds, query, xhr, request, changes)
}
insert(dm, data, tableName) {
var fd = new FormData();
for (var prop of data.file) {
fd.append('UploadFiles', prop.rawFile);
}
fd.append('OrderID', data.OrderID);
fd.append('CustomerID', data.CustomerID);
// data.File = fd;
return {
url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
type: "POST",
data: fd,
contentType: null
}
}
update(dm, data, tableName) {
var fd = new FormData();
for (var prop of tableName.file) {
fd.append('UploadFiles', prop.rawFile);
}
fd.append('OrderID', tableName.OrderID);
fd.append('CustomerID', tableName.CustomerID);
// data.File = fd;
return {
url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
type: "POST",
data: fd,
contentType: null
}
}
};
let data = new ej.data.DataManager({
url: "/Home/UrlDatasource",
insertUrl: "/Home/Save",
updateUrl: "/Home/Update",
removeUrl: "Home/Delete",
adaptor: new custom
});
let grid = new ej.grids.Grid({
dataSource: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
allowPaging: true,
toolbar: ['Add', 'Edit', 'Delete'],
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 100, isPrimaryKey: true },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{
field: 'file', headerText: "File", type: 'string', template: "#template2", width: 180, edit: {
//cellEditTemplate
create: () => {
// Input element is created and returned for appending the Uploader control.
elem = document.createElement('input');
return elem;
},
read: () => {
//read function is used to read the value from the component at the time of save.
return (file) ? file : uploadObj.filesData;
},
destroy: () => {
// Uploader is destroyed on edit save/close action.
uploadObj.destroy();
},
write: args => {
//write function is used to create custom component or assign default value at the time of editing.
uploadObj = new ej.inputs.Uploader({
files: ['']
});
uploadObj.appendTo(elem)
}
} },
],
height: 265,
queryCellInfo: queryCellInfo,
actionComplete: complete,
});
grid.appendTo('#Grid');
function queryCellInfo(args) {
if (args.column.field === 'file') {
if (args.data.file) {
var anchotEle = args.cell.getElementsByTagName('a')[0];
anchotEle.innerText = args.data.file.name;
anchotEle.onclick = function click(args) {
args.target.setAttribute("rel='nofollow' href", http://localhost:63371/Home/Download?filename= + args.target.innerText);
};
}
}
}
function complete(args) {
if (args.requestType === 'add') {
args.form.setAttribute('enctype', 'multipart/form-data');
args.form.setAttribute('encoding', 'multipart/form-data');
}
if (args.requestType === 'save' && args.action === "edit") {
var gridInstance = document.getElementById('Grid').ej2_instances[0]; //Grid Instance
gridInstance.refresh();
}
}
</script> |
Screenshot:
 |
Please get back to us if you need further assistance.
Regards,
Praveenkumar G
Praveenkumar G
SIGN IN To post a reply.
