<div>
<ejs-grid id="Grid" load="load" actionComplete="complete" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Cancel", "Update" })">
<e-data-manager url="/Home/UrlDatasource" insertUrl="/Home/Save" updateUrl="/Home/Update" adaptor="UrlAdaptor"></e-data-manager>
<e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog"></e-grid-editSettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="150"></e-grid-column>
<e-grid-column field="CustomerID" headerText="CustomerID" width="150"></e-grid-column>
<e-grid-column field="file" headerText="File" type="string" valueAccessor="@("fileName")" edit="@(new {create="fileCreate", read="fileRead", destroy="fileDestroy", write="fileWrite" })" width="120"></e-grid-column>
</e-grid-columns>
</ejs-grid>
</div>
<script>
var file;
function fileName(field, data, column) {
//show only the file name in grid columns
return (data[field]) ? data[field].name : data[field]
}
function complete(args) {
if (args.requestType === 'add') {
args.form.setAttribute('enctype', 'multipart/form-data');
args.form.setAttribute('encoding', 'multipart/form-data');
}
}
function fileCreate() {
elem = document.createElement('input');
return elem;
}
function fileRead(args) {
return (file) ? file : uploadObj.filesData;
}
function fileDestroy() {
uploadObj.destroy();
}
function fileWrite(args) {
if (args.requestType === 'beginEdit') {
file = args.rowData.file;
}
uploadObj = new ej.inputs.Uploader({
//while editing we have loaded the previous file
files: (args.requestType === 'beginEdit') ? [args.rowData.file] : ['']
});
uploadObj.appendTo(elem)
}
window.customAdaptor = new ej.data.UrlAdaptor();
function load() {
this.dataSource.adaptor = customAdaptor;
}
customAdaptor = ej.base.extend(customAdaptor, {
processResponse: function (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: function (dm, data, tableName) {
var fd = new FormData();
// create new form data and append the data that we want to stored in server side
for (var prop of data.file) {
fd.append('UploadFiles', prop.rawFile);
}
fd.append('OrderID', data.OrderID);
fd.append('CustomerID', data.CustomerID);
return {
url: dm.dataSource.insertUrl || dm.dataSource.crudUrl || dm.dataSource.url,
type: "POST",
data: fd,
contentType: null
}
},
});
</script> |
[AcceptVerbs("Post")]
// Upload method for chunk-upload and normal upload
public IActionResult Save(int OrderID, string CustomerID, IList<IFormFile> chunkFile, IList<IFormFile> UploadFiles)
{
long size = 0;
try
{
foreach (var file in UploadFiles)
{
var filename = ContentDispositionHeaderValue
.Parse(file.ContentDisposition)
.FileName
.Trim('"');
var folders = filename.Split('/');
var uploaderFilePath = hostingEnv.WebRootPath;
// for Directory upload
if (folders.Length > 1)
{
for (var i = 0; i < folders.Length - 1; i++)
{
var newFolder = uploaderFilePath + $@"\{folders[i]}";
Directory.CreateDirectory(newFolder);
uploaderFilePath = newFolder;
filename = folders[i + 1];
}
}
size += file.Length;
// insert data and uploaded files in server
OrdersDetails.GetAllRecords().Insert(0, new OrdersDetails(){ OrderID=OrderID, CustomerID= CustomerID, file = new OrdersDetails.File(){ name=filename, onlinePath= uploaderFilePath + $@"\{filename}", size =size, type='.'+filename.Split('.')[1] } });
filename = uploaderFilePath + $@"\{filename}";
if (!System.IO.File.Exists(filename))
{
using (FileStream fs = System.IO.File.Create(filename))
{
file.CopyTo(fs);
fs.Flush();
}
. . . . .
}
return Content("");
} |
public IActionResult Update(int DocumentacionID, int DetalleSiniestroID, int documentoID, bool Enviado,[FromBody]CRUDModel<Orders> value)
{
if (!ModelState.IsValid)
{
// collect exception message from ModelState
}
.. .
. .
} |
<script>
var file;
function fileName(field, data, column) {
return (data[field]) ? data[field].name : data[field]
}
function complete(args) {
if (args.requestType === 'add' || args.requestType=='beginEdit') {
args.form.setAttribute('enctype', 'multipart/form-data');
args.form.setAttribute('encoding', 'multipart/form-data');
}
}
function fileRead(args) {
return uploadObj.filesData;
}
function fileWrite(args) {
if (args.requestType === 'beginEdit') {
file = args.rowData.file;
}
uploadObj = new ej.inputs.Uploader({
files: (args.requestType === 'beginEdit') ? [args.rowData.file] : [''],
autoUpload: true
});
uploadObj.appendTo(elem)
}
window.customAdaptor = new ej.data.UrlAdaptor();
function load() {
this.dataSource.adaptor = customAdaptor;
}
customAdaptor = ej.base.extend(customAdaptor, {
processResponse: function (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)
},
. . . . .
update: function (dm, keyField, data, tableName) {
var fd = new FormData();
for (var prop of data.file) {
fd.append('UploadFiles', prop.rawFile);
} // you can customize and send parameter based on your requirement
fd.append('OrderID', data.OrderID);
fd.append('CustomerID', data.CustomerID);
return {
url: dm.dataSource.updateUrl || dm.dataSource.crudUrl || dm.dataSource.url,
type: "POST",
action: 'update',
data: fd,
keyColumn: keyField,
key: data[keyField],
contentType: null
}
},
});
</script> |