We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

145777 Jul 8,2019 11:29 AM UTC Jul 22,2019 12:50 PM UTC ASP.NET Core - EJ 2 4
loading
Tags: File Upload
Wayne
Asked On July 8, 2019 11:29 AM UTC

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" type=@file.FileType Size=@file.FileSize ></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>







Wayne
Replied On July 8, 2019 11:35 AM UTC

Setting this to return true makes no difference.

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

Prince Oliver [Syncfusion]
Replied On 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 


Riyan Afriyanto
Replied On July 22, 2019 02:29 AM UTC

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

Narayanasamy Panneer Selvam [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon