I have a FileUpload and the list is pre loaded with some files.
(1) Failure - However when a file is removed from the {e-uploader-uploadedfiles}, the POST is sent to the controller and the parameter {UploadFiles} for the remove operation is empty.
(2) Success - If I however first upload a file (not preloaded), and then try to remove the file, this succeeds as the file list {UploadFiles} is then not empty.
(3) Failure - if the file delete operation should fail for some reason the file list continues to remove the item from the list view {BadRequest}.
Here is the code, that triest to removes the file, the {UploadFiles is empty}
[HttpPost]
public IActionResult Remove(IList<IFormFile> UploadFiles)
{
try
{
var found = false;
foreach (var file in UploadFiles)
{
var fileSavePath = getFilename(file, getPath());
if (System.IO.File.Exists(fileSavePath))
{
found = true;
System.IO.File.Delete(fileSavePath);
}
}
if (found)
{
return Ok();
}
}
catch (Exception e)
{
Response.Clear();
Response.StatusCode = 204;
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed failed";
Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
}
return BadRequest();
}
------------------------------------------------------------------------------------------------------------------------------
{cshtml}
@{
var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/FileUpload/Uploader/Save"), RemoveUrl = @Url.Content("~/FileUpload/Uploader/Remove"), ChunkSize = 10000000 };
}
@Html.AntiForgeryToken()
<div class="control_wrapper">
<ejs-uploader
id="uploadFiles"
removing="onFileRemove"
dropArea=".control_wrapper"
asyncSettings="@asyncSettings"
maxFileSize="10485760000000"
autoUpload="false"
chunkFailure="onBeforeFailure"
pausing="onPausing"
resuming="onResuming"
uploading="OnFileUploading"
>
<e-uploader-files id="files">
@{
foreach (var file in Model.Files)
{
}
}
</e-uploader-files>
</ejs-uploader>
<style>
.control_wrapper {
display: inline;
margin: auto;
}
.e-file-drop {
display: inline;
}
.e-upload {
width: 100%;
position: relative;
margin-top: 15px;
}
.control_wrapper .e-upload .e-upload-drag-hover {
margin: 0;
}
</style>
@section Scripts {
<script>
var instances;
var dropElement = document.getElementsByClassName('control-fluid')[0];
function onChange(args) {
var uploadObj = document.getElementById("uploadFiles")
uploadObj.ej2_instances[0].asyncSettings.chunkSize = parseInt(args.itemData.chunkValue);
}
function OnFileUploading(args) {
args.currentRequest.setRequestHeader('XSRF-TOKEN', document.getElementsByName('__RequestVerificationToken')[0].value);
instances = document.getElementById('uploadFiles').ej2_instances[0];
started_at = new Date();
}
function onFileRemove(args) {
args.postRawFile = false;
}
var isInteraction = false;
// to update flag variable value for automatic pause and resume
function onPausing(args) {
if (args.event !== null && !navigator.onLine) {
isInteraction = true;
}
else {
isInteraction = false;
}
}
// to update flag variable value for automatic pause and resume
function onResuming(args) {
if (args.event !== null && !navigator.onLine) {
isInteraction = true;
}
else {
isInteraction = false;
}
}
function onFileRemove(args) {
args.postRawFile = true;
}
// to prevent triggering chunk-upload failure event and to pause uploading on network failure
function onBeforeFailure(args) {
args.cancel = !isInteraction;
var uploadObj = document.getElementById('uploadFiles').ej2_instances[0];
// interval to check network availability on every 500 milliseconds
var clearTimeInterval = setInterval(function () {
if (navigator.onLine && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 4) {
uploadObj.resume(uploadObj.filesData);
clearSetInterval();
}
else {
if (!isInteraction && !ej.base.isNullOrUndefined(uploadObj.filesData[0]) && uploadObj.filesData[0].statusCode == 3) {
uploadObj.pause(uploadObj.filesData);
}
}
}, 500);
// clear Interval after when network is available.
function clearSetInterval() {
clearInterval(clearTimeInterval);
}
}</script>
