Customizing Kendo UI Upload Control

23 posts, 0 answers
  1. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 21 Dec 2012 Link to this post

    Hi, 

    I am planning to customize the Kendo UI upload control in my application. 

    The user can select the multiple files ( up to 20) and currently the only the first file in the selected list is shown clearly and all other selected files are not shown completely. 

    I want to change this behavior and customize a bit like i would like to show all the selected files one by one in each row and also the size of that the textarea ( where the file names are shown) should change with the length of the file name. 

    I am using synchronous mode of upload.

    How can we do this ?
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 24 Dec 2012 Link to this post

    Hello Suresh,

     We can only recommend disabling multiple file selection in your case (set the multiple setting to false). Currently upload would display a comma-separated list of the selected files. If you disable multiple selection the user needs to pick the files one by one and they will be displayed in a separate item (find attached a sample screenshot showing how this would look like).

    Regards,
    Atanas Korchev
    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. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 24 Dec 2012 Link to this post

    Thanks for the response. 

    But my requirement is that is should be able to select multiple files in one go and display their names completely
    with comma separated or one by one. 

    Only one remove button is enough. I dont have to multiple remove buttons for each of these files.

    Any other way we can achieve this one.??

    Regards,
    Suresh
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 25 Dec 2012 Link to this post

    Hi Suresh,

    You can override some of the Upload's native styling to achieve a look, which is closer to your goals:

    .k-upload  .k-filename
    {
           max-width: none ;
           white-space: normal ;
    }

    This will make all filenames show in a list, however, note that this list will not be easily readable. There is no way to make each file name appear on a new line automatically, except for the approach suggested earlier.

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    Hi Dimo,

    I am trying to customize the UI. I am using async mode of the upload control. 

    I am not getting the "Check" mark after the file is successfully uploaded to the server and also i am not getting the icon on the remove button. Am i missing those files in my solution ?

    I wanted to remove the "Remove" button after the upload is successful for the file. How can i do it ? The Remove button should be there after the file is selected and it should go away after the file is uploaded successfully.

    Also i want to show the error message next to the failed file next to the "Retry" button. How can i do it ?

    Please provide your inputs on this one.

    Regards,
    Suresh

  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Dec 2012 Link to this post

    Hi,

     There is no way to tell why the check mark or the remove button icon do not appear. Probably some resources are indeed missing. Check your browser developer console for any failed HTTP requests (404 error code). Those would appear in the "Network" tab.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    I am getting the HTTP 404 errors for the following resources.Attached the response in the file.

    How can i do the customization as i asked ?

  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Dec 2012 Link to this post

    Hi,

     First copy the missing files (the ones that give 404) in your project. Those files can be found in the Kendo UI distribution. 

     I recommend checking the getting started instructions. Copying the js and styles directories to your project is one of the first steps.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    Thanks for the prompt response. 

    I have copied the styles and js folders from the kendo UI distribution and added to my solution. 

    Still the icons are missing. Attached the files
  11. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Dec 2012 Link to this post

    Hello,

     Getting 404 means that the file is probably not there. The sprite.png for the default theme should be in the following location:

    styles/Default/sprite.png

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    It worked. Thanks. 

    Please provide the responses on the questions i have on customization.
  13. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Dec 2012 Link to this post

    Hi Suresh,

     Both requested features are not supported out of the box. I recommend setting showFileList to false and implementing custom UI by using the success and error events. 

     You can also try customizing the built-in UI using jQuery. This stackoverflow answer explains how to do so.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 29 Dec 2012 Link to this post

    Hi, 

    I am trying out the custom event "OnSuccess" to hide the Remove button for the successfully uploaded files.

    I am able to get the reference to the uploaded file ListItem and hide its corresponding button. Also when i am uploading multiple files, i am hiding the Remove button for the already uploaded files This is working.

    The problem is when i am uploading multiple files, the Remove button is not visible except for the last uploaded file in the list. I am setting visibility of the Remove button to false during my onSuccess event but the framework is resetting it again/or loading the content again after the onSuccess event and for the last file i am not able to set it. 

    Any idea ? 

    What is the next event that fires after the onSuccess event ? How can i do it ?
  15. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 30 Dec 2012 Link to this post

    Hi,

     There is no event which fires after the success event.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 30 Dec 2012 Link to this post

    Hi, 

    Then how the remove button is still appearing for the last uploaded file ? I am hiding this button in its file "onsuccess" event but after that it is getting added back to the file list item. In fact the "Remove" buttons are getting added to all the previously uploaded file items but i am setting this button to hidden state in my logic. But this one does not working out for the last uploaded file.

    Is the page or control re-loads anytime after all the files are uploaded.?

    Requesting your inputs.
  17. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 31 Dec 2012 Link to this post

    Hi,

     We don't know why this is happening because we don't have your code.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  18. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 01 Jan 2013 Link to this post

    Hi,

    Here is the code snippet i am firing on OnSuccess event.

    Steps:

    Set the multiple attribute of the control to "True" and select multiple files.

    Upload them and the file that is uploaded last will have the "Remove" button visible. Rest all will have the "Remove" button hidden 

    function onSuccess(e) {
                       // Array with information about the uploaded files
                       var files = e.files;
                       var filename = e.files[0].name;
                       var allLiElements = $('li.k-file');
                           if (e.operation == "upload") {
                           //alert("Successfully uploaded " + 1 + " files");$('span.k-filename')
                           $.each(allLiElements, function (index) {
                               var liChildElements = allLiElements[index].children;
                               if ($(liChildElements[0]).text() == "uploaded") {
                                   $(liChildElements[2]).attr('style', 'display:none');
                               }
                               if (liChildElements[1].title == filename) {
                                   $(liChildElements[2]).attr('style', 'display:none');
                               }
                           });
                           
                       }
                   }

    Let me know why the last file is showing the remove button and how i can hide it ?

    Regards,
    Suresh
  19. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Jan 2013 Link to this post

    Hi,

     Why do you want to hide the remove button to begin with? If you avoid setting the removeUrl the remove button wouldn't be displayed at all. The "remove" button appears only when the file finished uploading. It is meant to delete already uploaded files. During upload the "cancel" button is shown which would abort the upload process.

    Regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  20. JoJo
    JoJo avatar
    20 posts
    Member since:
    Dec 2012

    Posted 02 Jan 2013 Link to this post

    Hi, 

    The reason i would like to hide the "Remove" button after upload is that i don't want to allow the user to delete the uploaded files from the server and user can only upload the file but not delete.

    Yes. If i don't set the attribute "removeUrl" i don't see the remove button at all. But doing this way the user will not be able to remove any of the required files before upload. Right ?

    I want "Remove" button to show before upload process so user's can still remove any of the files.

  21. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 02 Jan 2013 Link to this post

    Hello,

    You can't remove the last remove button because the success event is raised before the button is created. As a result your code removes the previous remove button. A solution is to use setTimeout to delay the removal of the button. Here is how:

       function success(e) {
            setTimeout(function() {
                $(".k-file .k-button:contains(Remove)").remove();
            }, 100);
        }

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  22. Divakar
    Divakar avatar
    5 posts
    Member since:
    May 2013

    Posted 03 Jun 2013 Link to this post

    hi ,

    I am using kendo ui and uploading multiple files to server . Server is giving some response value back . I am storing those response values in an array.

    The problem is some times i can store the values in an array but some times i can't store the values in an array and only one response is given back.

    What is the unexpected behavior in kendo ui?

  23. Pastina
    Pastina avatar
    3 posts
    Member since:
    Sep 2012

    Posted 11 Feb 2014 Link to this post

    Hi I would like to change the position of the search button in the upload control. I would like to place the button to the right side of the text area. Can someone help. ?
    Please find attached the wireframe of the requirement
  24. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Feb 2014 Link to this post

    Hello Pastina,

    The Kendo UI Upload does not have a visible textbox next to its [Select] button, so I am not sure how is your question relevant to this widget.

    On a side note, the layout of the native browser file input cannot be controlled.

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready