1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. File Upload remove preloaded file does not send file list to controller

File Upload remove preloaded file does not send file list to controller

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-uploadedfiles name="@file.FileName" [email protected] [email protected] ></e-uploader-uploadedfiles>
                                        }
                                    }
                                    </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>







4 Replies
WA Wayne July 8, 2019 11:35 AM UTC

Setting this to return true makes no difference.

function onFileRemove(args) {
args.postRawFile = true;
}

PO Prince Oliver Syncfusion Team July 11, 2019 05:21 AM UTC

Hello Wayne, 

Thank you for contacting us. 

Query 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. 

We could reproduce the reported in our end. This is due to receiving only as a form collections in the server handler. Please refer the code below 

public IActionResult Remove(IList<IFormFile> UploadFiles) 

Meanwhile, the file name attribute is only sent to the server that is a string type when we preloaded it. So it returns no files. We suggest to alter the uploaded files as a string so that we can get both preloaded files and uploaded files by default. Filename is enough for deleting the files in server.  We suggest you make args.cancel as false to send the files alone to the server and not the entire file to perform delete operation. Please find the code snippet 

public IActionResult Remove(string UploadFiles) 
{ 
    try 
    { 
        var found = false; 
        var file = UploadFiles; 
        var fileSavePath = getFilename(file, getPath()); 
        if (System.IO.File.Exists(fileSavePath)) 
        { 
            found = true; 
            System.IO.File.Delete(fileSavePath); 
        } 
 
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
 
} 

Note: Based on the new file type string, we are deleted the server files. 

Query 2: Failure - if the file delete operation should fail for some reason the file list continues to remove the item from the list view {BadRequest}. 

On the client side, we have shown the list based on the server status code. If the status code is between 204-299 then we consider it to be successful. So, kindly set the status code above 300 for BadRequest. 

Kindly refer to the following link for the sample:  

Let us know if you need any further assistance on this. 

Regards, 
Prince 


RA Riyan Afriyanto July 22, 2019 02:29 AM UTC

Hi,
by the way, how to get filename in view? I try use .razor for view

NP Narayanasamy Panneer Selvam Syncfusion Team July 22, 2019 12:50 PM UTC

Hi Riyan,

Thanks for your update.


Yes, you can get the file name in success event of uploader. For your reference we have prepared a sample. please get in the below link,

Code example: 
 
    function onSuccess(args) { 
        console.log(args.file.name); 
    } 
 
 
 
Regards, 
Narayanasamy P 


Loader.
Up arrow icon