Customizing async upload button and triggering cancel event

18 posts, 1 answers
  1. Piotr
    Piotr avatar
    6 posts
    Member since:
    Nov 2011

    Posted 30 Nov 2011 Link to this post

    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
  2. Answer
    T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 02 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Piotr
    Piotr avatar
    6 posts
    Member since:
    Nov 2011

    Posted 02 Dec 2011 Link to this post

    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
  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2771 posts

    Posted 02 Dec 2011 Link to this post

    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!
  6. Piotr
    Piotr avatar
    6 posts
    Member since:
    Nov 2011

    Posted 05 Dec 2011 Link to this post

    Yes, this one helps,

    Thanks!

    Piotr
  7. Tracy
    Tracy avatar
    7 posts
    Member since:
    Sep 2012

    Posted 10 Oct 2012 Link to this post

    Is there any documentation on MVC version so as to customize, such as the localization
  8. Neetu
    Neetu avatar
    5 posts
    Member since:
    Mar 2016

    Posted 28 Apr in reply to T. Tsonev Link to this post

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

     

     

  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 28 Apr Link to this post

    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!
     
  10. Neetu
    Neetu avatar
    5 posts
    Member since:
    Mar 2016

    Posted 28 Apr in reply to Dimiter Madjarov Link to this post

    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

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 28 Apr Link to this post

    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!
     
  12. Neetu
    Neetu avatar
    5 posts
    Member since:
    Mar 2016

    Posted 29 Apr in reply to T. Tsonev Link to this post

    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

  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 29 Apr Link to this post

    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!
     
  14. Neetu
    Neetu avatar
    5 posts
    Member since:
    Mar 2016

    Posted 29 Apr in reply to Dimiter Madjarov Link to this post

    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

  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 29 Apr Link to this post

    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!
     
  16. Neetu
    Neetu avatar
    5 posts
    Member since:
    Mar 2016

    Posted 29 Apr in reply to Dimiter Madjarov Link to this post

    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,

     

     

  17. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 29 Apr Link to this post

    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!
     
  18. Jack
    Jack avatar
    1 posts
    Member since:
    Nov 2016

    Posted 18 Nov Link to this post

    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

  19. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 18 Nov Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready