This is a migrated thread and some comments may be shown as answers.

Customizing async upload button and triggering cancel event

18 Answers 1355 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Piotr
Top achievements
Rank 1
Piotr asked on 30 Nov 2011, 01:33 PM
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

18 Answers, 1 is accepted

Sort by
0
Accepted
T. Tsonev
Telerik team
answered on 02 Dec 2011, 02:53 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Piotr
Top achievements
Rank 1
answered on 02 Dec 2011, 04:04 PM
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
0
T. Tsonev
Telerik team
answered on 02 Dec 2011, 04:49 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Piotr
Top achievements
Rank 1
answered on 05 Dec 2011, 09:48 AM
Yes, this one helps,

Thanks!

Piotr
0
Tracy
Top achievements
Rank 1
answered on 10 Oct 2012, 10:29 AM
Is there any documentation on MVC version so as to customize, such as the localization
0
Neetu
Top achievements
Rank 1
answered on 28 Apr 2016, 06:16 AM

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
                        },
                    });
    });

 

 

0
Dimiter Madjarov
Telerik team
answered on 28 Apr 2016, 07:53 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Neetu
Top achievements
Rank 1
answered on 28 Apr 2016, 10:25 AM

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

0
Dimiter Madjarov
Telerik team
answered on 28 Apr 2016, 02:41 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Neetu
Top achievements
Rank 1
answered on 29 Apr 2016, 05:36 AM

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

0
Dimiter Madjarov
Telerik team
answered on 29 Apr 2016, 10:39 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Neetu
Top achievements
Rank 1
answered on 29 Apr 2016, 10:43 AM

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

0
Dimiter Madjarov
Telerik team
answered on 29 Apr 2016, 10:47 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Neetu
Top achievements
Rank 1
answered on 29 Apr 2016, 12:05 PM

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,

 

 

0
Dimiter Madjarov
Telerik team
answered on 29 Apr 2016, 12:29 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jack
Top achievements
Rank 1
answered on 18 Nov 2016, 08:19 AM

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

0
Dimiter Madjarov
Telerik team
answered on 18 Nov 2016, 08:51 AM

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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
mkhalesi
Top achievements
Rank 1
Iron
answered on 20 Aug 2022, 06:52 AM | edited on 20 Aug 2022, 06:56 AM

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
Telerik team
commented on 24 Aug 2022, 02:31 PM

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

Tags
Upload
Asked by
Piotr
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Piotr
Top achievements
Rank 1
Tracy
Top achievements
Rank 1
Neetu
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Jack
Top achievements
Rank 1
mkhalesi
Top achievements
Rank 1
Iron
Share this question
or