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 ?
22 Answers, 1 is accepted
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
Rank 1
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
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
Rank 1
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
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
Rank 1
How can i do the customization as i asked ?
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.
Atanas Korchev
the Telerik team
Rank 1
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
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
Atanas Korchev
the Telerik team
Rank 1
Please provide the responses on the questions i have on customization.
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.
Atanas Korchev
the Telerik team
Rank 1
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 ?
There is no event which fires after the success event.
Regards,Atanas Korchev
the Telerik team
Rank 1
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.
We don't know why this is happening because we don't have your code.
Regards,Atanas Korchev
the Telerik team
Rank 1
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
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
Rank 1
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.
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);
}
Atanas Korchev
the Telerik team
Rank 1
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?
Rank 1
Please find attached the wireframe of the requirement
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