Customizing async upload button and triggering cancel event

[Piotr]

Hi,

We have just started to use kendo ui async upload component in our application and I have some few questions regarding it.

1. I Is it somehow possible to customize the 'Select...' button (used to browse in the file systrem) in respect to the text and the color that changes at mouse over?

2. According to the documentation there is a cancel event which can be added in the configuration of file upload as:

$("#fileUpload").kendoUpload({
 async: {
  saveUrl: "upload_url",                            
  autoUpload: true,                                                
  removeUrl: "remove_url"
  },                      
  cancel: onCancel
  });

Though, onCancel method does not seem to be triggered when cancel upload button is pressed. Is is because that removeUrl must be specified? When cancel is activated Is it then through removeUrl that the so far uploaded file is deleted from server (that requires of course that a recourse at removeUrl does that actually), or how does it work?

Is it somehow possible to configure upload component not to show the cancel button?

thanks in advance, Piotr

[T. Tsonev]

Hi Piotr,

All texts rendered by the Upload are configurable, but we've missed to add documentation. Here's how to change the Select... string:

$("#files").kendoUpload({
     localization: {
         "select": "MY Select..."
     }
 });

These are all strings with their default values:

localization: {
    "select": "Select...",
    "cancel": "Cancel",
    "retry": "Retry",
    "remove": "Remove",
    "uploadSelectedFiles": "Upload files",
    "dropFilesHere": "drop files here to upload",
    "statusUploading": "uploading",
    "statusUploaded": "uploaded",
    "statusFailed": "failed"
}

The cancel event does not require a configured remove handler. It simply stops the upload request. It also appears to work fine in the online demo. Maybe you're testing on localhost or with a small file? In this case you might not be able to cancel the request as it completes too quickly.

There's no option to hide the cancel button.

Best wishes,
Tsvetomir Tsonev
the Telerik team

[Piotr]

Thanks a lot for the answer. It solved the problem :)

In case of upload failure you get a message saying

'Error! Upload failed. Unexpected server response - see console.'

I digged into the kendo.uplaod.ui,js file and saw that the message is actually not configurable, as it is hard coded in a alert(...) call. I couldn't find another way than just uncommenting that alert message and putting my own in the onError() handler function. But this is not a right way to do?

br, Piotr

[T. Tsonev]

Hi Piotr,

You can suppress the default error message by handling the error event:

error: function(e) {
    e.preventDefault();
}

I hope this helps.

Best wishes,
Tsvetomir Tsonev
the Telerik team

[Piotr]

Yes, this one helps,

Thanks!

Piotr

[Tracy]

Is there any documentation on MVC version so as to customize, such as the localization

[Neetu]

Hi,

I am using file upload Aysc is false. and when i click on the Select files button upload files button appears.

Query 1 : I have to change the background color of Upload Files button.

Query 2: : I am able to change the background of Select FIles button. but when i hover of the button color is not changing , there also i have to change the color.

my code is listed below. give me ur suggestion.

<div>
    <div>
        <input name="files" id="files" type="file"/>
    </div>    
    <p>
        
    </p>
</div>

<script>
    $(document).ready(function () {
        //alert("Message")
                    $("#files").kendoUpload({
                        async: {
                            saveUrl: "save",
                            removeUrl: "remove",
                            autoUpload: false
                        },
                    });
    });

 

 

[Dimiter Madjarov]

Hello Neetu,

You could access the "Upload files" button via it's k-upload-selected CSS class and apply the custom background color.

Regarding the second question, I am not able to reproduce the problem. Could you specify which Kendo UI CSS Theme is used in this case?

Regards,
Dimiter Madjarov
Telerik

 

 

[Neetu]

Thanks I able to do that now i more question.

question 1: I have added kendu menu. but i am changing the backgroup color. it is not changing the backgroud color in whole strip. it is changing only where my menus are defined, i hv some space after that, there it is not changing.

 

Question 2: I can see one dropdown arrow in all menu, can we change the color of that dropdown arrow.

 

Thanks

[Dimiter Madjarov]

Hello Neetu,

Those questions are not related to the topic of the current thread. Please post them in a separate one or in a support ticket.

Regards,
Dimiter Madjarov
Telerik

 

 

[Neetu]

Hi,

I have query for Cancel event. while uploading the file into database. i have cancel the upload (using cancel button), but it is not triggering any event. in it shows it got canceled but in background its running and it upload all the records into database.

How i can cancel the event it i click on (cancel) button. 

  $(document).ready(function () {
                $("#files").kendoUpload({
                    
                    async: {
                        saveUrl: "save",
                        removeUrl: "remove",                        
                        autoUpload: false
                    },

Thanks

Neetu

[Dimiter Madjarov]

Hello Neetu,

I am unable to reproduce this behavior on our demos page. The post request is canceled upon clicking the cancel button on the file. Are you experiencing the same problem there too?

Regards,
Dimiter Madjarov
Telerik

 

 

[Neetu]

Hi,

Yes, it is deleting from the screen, but in backgroud process is running. That a reason , if i cancel the file, it shows it got canceled , but i have verified it is inserting the data into database.

 

Thanks

[Dimiter Madjarov]

Hello Neetu,

I am unable to reproduce this on our end. The request is successfully canceled, as demonstrated in the screenshot. If the problem is still persisting, you could send us an isolated runnable example that demonstrates the issue here or in a support ticket, so we could take a look locally.

Regards,
Dimiter Madjarov
Telerik

 

 

[Neetu]

Hi,

i have also seen,save got canceled in isolated runnable, but i can see data is uploading into database after it got canceled. 

Please look into this issue.

Thanks,

 

 

[Dimiter Madjarov]

Hello Neetu,

In this case the request has been fully processed i.e. the file is sent to the save handler, but the response from the handler has not been received. This is why, if the cancel button is clicked in this time frame, the request is treated as canceled, but the file is saved to the database. I am afraid there is no suitable workaround that we could recommend for handling the scenario. A possible one would be to attach a handler to the cancel event of the widget, send a separate ajax request with the name of the file or the widget, that has been canceled and act accordingly on the backend i.e. don't save the file or delete it if it was already saved.

Regards,
Dimiter Madjarov
Telerik

 

 

[Jack]

hello everyone,

after i select files using kendoUpload select button, i want the upload button to be removed, i don't want to use it any more

please can any one help me

[Dimiter Madjarov]

Hello Jack,

If the autoUpload option of the widget is set to true, the button will not be displayed by default. If it is set to false, you could use the following or similar CSS styles.
E.g.

.k-clear-selected,
.k-upload-selected {
  display: none !important;
}

Regards,
Dimiter Madjarov
Telerik by Progress

[mkhalesi]

hello everyone,

I am using kendoUpload in the kendoWindow,

now i want to cancel file upload by calling cancel event from kendoUpload when i close the window

cancel event in KendoUplaod : 

 cancel: (e) => {
     debugger;
 },

when closing the window : 

uploadCtrl.trigger("cancel", uploadingFile);

When the "select" event is called in the kendoUpload, I store the selected file in the "uploadingFile" variable.

please can any one help me

[Neli]

Hi,

Note that in order to prevent the uploading of files, you need to use the prevent in the upload event of the widget.

- https://docs.telerik.com/kendo-ui/api/javascript/ui/upload/events/upload

The cancel event is fire when the uploading was already canceled. Thus, I would suggest you to handle the upload event and use e.preventDefault() when the close button of the Window is clicked.

I hope this helps.

Regards,

Neli