To replace a button with a progress button in a file upload

[TaeWook Kang]

I want to change the upload button to the progress button when uploading a file.

And after the file upload is complete, if delete the file by clicking on the trash shape, an error occurs and fails.

The file upload code is as follows:

 <ejs-uploader id="UploadFiles" autoUpload="false" multiple="false" allowedExtensions=".xls, .xlsx, *" removing="onFileRemove" asyncSettings="@asyncSettings" success="onUploadSuccess" failure="onUploadFailure">

            </ejs-uploader>


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


function onUploadSuccess(args) {
        var SaveBtn = document.getElementById('SaveBtn');
        var DataGrid = document.getElementById("DataGrid").ej2_instances[0];


        DataGrid.showSpinner();
        SaveBtn.disabled = false;


        if (args.operation === 'upload') {


            var sFilename = args.file.name;
            $.ajax({
                url: "/DeliverableItem/Schedule,
                type: "POST",
                data: { "sFileName": sFilename },
                success: function (data) {
                    if (typeof data == "string") {
                        alert(data);
                        DataGrid.hideSpinner();
                    }
                    else {
                        document.getElementById('FileName').value = sFilename;


                        DataGrid.dataSource = ej.data.DataUtil.parse.parseJson(data);
                        SelectedData = [];
                        DataGrid.hideSpinner();
                    }
                },
                error: function () {
                    alert("Fail");
                    DataGrid.hideSpinner();
                }
            });
        }
    }


    function onUploadFailure(args) {
        alert('failed');
    }
</script>

[UdhayaKumar Duraisamy]

Query 1: I want to change the upload button to the progress button when uploading a file.

 

You can use the progress event for your requirement. In the progress event, you can change the upload button name to "Progressing" using the "e-file-upload-btn" class. Please refer to the code snippet and sample below for more details.

 

<div style="margin:130px auto;width:300px">

    <ejs-uploader id="UploadFiles" autoUpload="false" multiple="false" progress="onProgress" allowedExtensions=".xls, .xlsx, *" removing="onFileRemove" asyncSettings="@asyncSettings" success="onUploadSuccess" failure="onUploadFailure">

    </ejs-uploader>

</div>

 

<script>

    function onFileRemove(args) {

        args.postRawFile = true;

    }

 

    function onProgress() {

        document.querySelector(".e-file-upload-btn").innerHTML = "Progressing";

    }

 

    function onUploadSuccess(args) {

        document.querySelector(".e-file-upload-btn").innerHTML = "Uploaded";

    }

 

    function onUploadFailure(args) {

        alert('failed');

    }

</script>

 

In the above code, the onProgress function is called when a file upload is in progress, and it updates the text of the upload button to show that it is progressing.

The onUploadSuccess function is called when a file has been successfully uploaded, and it updates the text of the upload button to show that the file has been uploaded.

Query 2: And after the file upload is complete, if delete the file by clicking on the trash shape, an error occurs and fails.

 

We have validated the reported query on our end, but unfortunately, we were unable to reproduce the reported issue as per your scenario. We have also shared a sample and video illustration for your reference. In order to assist us in identifying the problem and provide a better solution, we kindly request that you provide additional details about the issue, as mentioned below:

 

1. A simple, runnable sample that illustrates the issue you are experiencing (or modify the shared sample as per your scenario).
2. Issue replication steps.
3. A video illustration of the issue.