Upload Files After Confirm Validation (YES Or No)

Question

I am using the FILE Upload controller to upload the files. but I have some issues. Here in your code what is happening is, when the user selects the file at the same time the file gets uploaded into a specific folder. In my application, I have 2 thing

1) Select File ( File Uploader)

2) Upload (BUTTON)

My interest is when the user selects the file and click on the UPLOAD BUTTON (CONFIRM IT YES OR NO) at that time I want to perform the UPLOAD file operation, not at the time of selection.

My CS HTML AND CONTROLLER CODE


public partial class UploaderController : Controller



    {


        private IWebHostEnvironment hostingEnv;
        public UploaderController(IWebHostEnvironment env)
        {
            this.hostingEnv = env;
        }
        public IActionResult Index()
        {
            return View();
        }
        [AcceptVerbs("Post")]
        public IActionResult Save(IList<IFormFile> UploadFiles)
        {
            try
            {
                foreach (var file in UploadFiles)
                {
                    if (UploadFiles != null)
                    {
                        var filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"');
                        filename = hostingEnv.WebRootPath + $@"\Uploader\Save\{filename}";
                        if (!System.IO.File.Exists(filename))
                        {
                            using (FileStream fs = System.IO.File.Create(filename))
                            {
                                file.CopyTo(fs);
                                fs.Flush();
                            }
                        }
                        else
                        {
                            Response.Clear();
                            Response.StatusCode = 204;
                            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File already exists.";
                        }
                    }
                }
            }
            catch (Exception e)
            {
                Response.Clear();
                Response.ContentType = "application/json; charset=utf-8";
                Response.StatusCode = 204;
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "No Content";
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
            }
            return Content("");
        }
        [AcceptVerbs("Post")]
        public IActionResult Remove(string UploadFiles)
        {
            try
            {
                var fileName = UploadFiles;
                var filePath = Path.Combine(hostingEnv.WebRootPath);
                var fileSavePath = filePath + "\\" + fileName;
                if (!System.IO.File.Exists(fileSavePath))
                {
                    System.IO.File.Delete(fileSavePath);
                }
            }
            catch (Exception e)
            {
                Response.Clear();
                Response.StatusCode = 200;
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully";
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message;
            }
            return Content("");
        }


    }
@using Syncfusion.EJ2


@{
    var asyncSettings = new Syncfusion.EJ2.Inputs.UploaderAsyncSettings { SaveUrl = @Url.Content("~/Uploader/Save"), RemoveUrl = @Url.Content("~/Uploader/Remove") };
}


<form method="post">
    <div class="col-lg-8 control-section">
        <div class="control_wrapper">
            <ejs-uploader id="UploadFiles" removing="onFileRemove" dropArea=".control-fluid" asyncSettings="@asyncSettings">
            </ejs-uploader>
        </div>
    </div>
    <input type="submit" id="submit" name="submit" value="save" />
</form>
    <style>
        .control_wrapper {
            max-width: 400px;
            margin: auto;
        }


        .e-upload {
            width: 100%;
            position: relative;
            margin-top: 15px;
        }


        .control_wrapper .e-upload .e-upload-drag-hover {
            margin: 0;
        }
    </style>




    <script>
        $(document).ready(function () {
            $("#submit").click(function (event) {
                if (!confirm('Are you sure that you want to upload the selected files')) {
                    event.preventDefault();
//Perform UPLOAD FILE OPERATION
                }


            });
        });
        function onFileRemove(args) {
            args.postRawFile = false;
        }
        var dropElement = document.getElementsByClassName('control-fluid')[0];
        function onChange(args) {
            var uploadObj = document.getElementById("UploadFiles")
            uploadObj.ej2_instances[0].autoUpload = args.checked;
            uploadObj.ej2_instances[0].clearAll();
        }
        function onChanged(args) {
            var uploadObj = document.getElementById("UploadFiles")
            uploadObj.ej2_instances[0].sequentialUpload = args.checked;
            uploadObj.ej2_instances[0].clearAll();
        }
    </script>

Sureshkumar P · Accepted Answer

Hi Harshida, 
 
You can achieve your requirement by using DirectoryUpload property value as true in the uploader component. This property allows to select the folder to upload to the server and azure storage. 
 
Find the API documentation for the DirectoryUpload property: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Inputs.Uploader.html#Syncfusion_EJ2_Inputs_Uploader_DirectoryUpload  
 
Regards, 
Sureshkumar P.

Sureshkumar P · Answer

Hi Harshida, 
 
Yes, you can show a confirmation dialog using Syncfusion utility dialog as like below documentation.  
 
https://ej2.syncfusion.com/aspnetcore/documentation/dialog/how-to/render-a-dialog-using-utility-functions/#render-a-confirmation-dialog-with-options   
 
As per Utility dialog, it will return the Boolean variable as like native Confirm dialog. So, we need to manually bind the click event for OK and Cancel button. We customized as per your requirement using Syncfusion Dialog. 




<script>  
    var dialogObj, isOkClicked, isCanceled;  
    function onSelect() {  
        isOkClicked = false;  
    }  
  
    function onFileUpload(args) {  
        if (!isOkClicked) {  
            args.cancel = true;  
            isCanceled = true;  
            dialogObj = ej.popups.DialogUtility.confirm({  
                title: ' Confirmation Dialog',  
                content: "This is a Confirmation Dialog!",  
                okButton: { text: 'OK', click: okClick },  
                cancelButton: { text: 'Cancel', click: cancelClick },  
                showCloseIcon: true,  
                closeOnEscape: true,  
                animationSettings: { effect: 'Zoom' }  
            });  
        }  
    }  
    function okClick() {  
        isOkClicked = true;  
        var uploadObj = document.getElementById('uploadFiles').ej2_instances[0];  
        uploadObj.retry();  
        dialogObj.hide();  
    }  
  
    function cancelClick() {  
        dialogObj.hide();  
    }  
 
 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CoreUpload1639024350  
 
Regards, 
Sureshkumar P

Harshida Parmar · Answer

Hello

Suresh,

First of all, thank you very much for your reply. I have a few changes in the CODE instead of selecting the file my client wants to select the FOLDER because at one time My client has to upload 50 60+ files. So instead of selecting files, I want to select the folder and while uploading FILES/VIDEOs into the specific folder I want to SHOW THE PROGRESS BAR also.

I am totally new to syncfusion, I know how to perform the same task in SIMPLE MVC CORE but using syncfusion I am a little bit confused.

So same TASK

1) SELECT FOLDER WHICH HAS 50 to 60 + Videos, Selects IMAGES Which has 50 to 60+ images, Selects Excel File. Please check Below Code Overview

2) After selecting Folders for Images, Video, and Excel, I need POP UP WINDOW YES OR NO.

3) IF YES Start uploading videos, Images, Excel in a specific folder and show the progress bar (while videos, Images, Excel get stored in a folder as well as uploaded in Azure BLOB Storage).

Can you just me suggestion in it.

My code overview (3 FileUploder which select FOLDER)

<ejs-uploader id="uploadExcelFile" selected="onSelect" autoUpload="false"></ejs-uploader>

<ejs-uploader id="uploadImageFile" selected="onSelect" autoUpload="false"></ejs-uploader>

<ejs-uploader id="uploadVideoFile" selected="onSelect" autoUpload="false"></ejs-uploader>

<ejs-button id="dialogBtn" content="Open Confirm Dialog"></ejs-button>

Thanks

Harshida

Thanks Harshida