I have a RadAsyncUpload control in my page. When users upload documents, the progress bar and a Cancel button for the uploading item are showing. Users can either wait until the file is totally uploaded or hit the cancel button to cancel the upload. When users hit the Cancel button, the progress bar disappears and the red light and Remove button show up. The red light item is very confusing for my users. Is there any way I can get rid of the entire item(red light, document name and "Remove button") when users click "Cancel" button?
Thanks!
joan780
8 Answers, 1 is accepted
You can try using removing the new row in the onClientFileUploadedFailed event as in the code below:
function OnClientFileUploadFailed(sender, args) { $telerik.$(args.get_row()).css("display", "none");}Hope this will be helpful.
Greetings,
Plamen Zdravkov
the Telerik team
Rank 1
I tried your code but it does not work.
OnClientFileUploadFailed event is not fired when the Cancel button is clicked. The cancelled item is still on the list with red light icon(as attached). Could you offer another workaround?
Thanks!
Joan
Yes indeed when multiple files are uploaded the cancel button click is not firing the onClientFileUploadedFailed event since the uploading has not started yet. In this case you can use the following code instead:
function OnClientFileUploading(sender, args) { $telerik.$(".ruCancel").bind('click', function(e) { $telerik.$(this).parent().remove(); }); }Hope this will be helpful.
Regards,
Plamen Zdravkov
the Telerik team
Rank 1
Joan
Rank 1
I have four questions about the code I used for my upload control. The first one is the follow up question to your previous reply and the the other three are new questions.
Question(1) - This is a follow up question to your answer dating back to April 23rd. I tried your approach and it did help me remove the uploading attachment when the cancel button was clicked. However, it also broke my method for "OnFileUploaded" event, which checks the uploaded file size and a duplicate file. In this method, if the new uploaded file is more than 2MB or is a duplicate file, an error message will show and this file is automatically removed from the list.
What happened was, after adding the "OnClientFileUploading" method you gave in the previous post, I uploaded file by the following order:
(1) add a valid file. e.g. doc1.txt
(2) click "Remove" button to remove doc1.txt
(3) add the file in (1), which is doc1.txt
After (3) is done, an "File alreday exists." error message poped up and the upload control just automatically disappreared. I dont understand why the "File already exists" error showed up, since doc1.txt was already removed.
As long as I removed the OnClientFileUploading you gave me, I can do the step above without any error. Below is my code I used in my app.
Question(2) - The code I used is exactly the same as the previous question except that the OnClientFileUploading is removed.
I upload files by following the steps below and the code deleted good upload file but kept bad files -
(1) upload a very large file and hit cancel button immediately, e.g. Telerik.Web.msi(256 MB). This item is on the list with red light.
(2) upload a good file, e.g. delete.jpg
(3) upload another good file, e.g. food.jpg
(4) upload the same file as (2), which is delete.jpg
What happened was: (1) Duplicate file error shows up and file(3) is removed and (1), (2), (4) are still on the list.
The result I wanted is (1) is on the list with red light, (2) and (3) on list with green light and (4) is removed from the list.
It seemed that the telerik "sender.deleteFileInputAt(numberOfFiles - 1);" ( in onclientfileuploaded method ) was not working properly.
Question 3 - Is there any way to disable select button while an file is uploading?
Question 4 - How to disable upload control when the file is uploading? I tried the post but browser gave me exception. http://www.telerik.com/community/forums/aspnet-ajax/async-upload/disable-radasyncupload-control-clientside-during-upload-process.aspx
Thanks!
Joan
<
head runat="server">
<title></title>
<script type="text/javascript">
var MAX_TOTAL_BYTES = 2097152;
var filesSize = new Array();
var OVERSIZE_MESSAGE = "Maximum total upload size is 2MB";
var isDuplicateFile = false;
var fileCount = 0;
function OnFileSelected(sender, args) {
for (var fileindex in sender._uploadedFiles) {
if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
isDuplicateFile =
true;
}
}
}
function OnFilesUploaded(sender, args) {
if (sender._uploadedFiles.length == 0) {
filesSize =
new Array();
}
}
function OnProgressUpdating(sender, args) {
filesSize[args.get_data().fileName] = args.get_data().fileSize;
}
function OnFileUploaded(sender, args) {
var totalBytes = 0;
var numberOfFiles = sender._uploadedFiles.length;
if (isDuplicateFile) {
sender.deleteFileInputAt(numberOfFiles - 1);
isDuplicateFile =
false;
sender.updateClientState();
if (args.get_fileName() != null)
{ alert(args.get_fileName() +
' ' + 'already exists.'); }
else
{ alert(
'File already exists.'); }
return;
}
for (var index in filesSize) {
totalBytes += filesSize[index];
}
if (totalBytes > MAX_TOTAL_BYTES) {
sender.deleteFileInputAt(numberOfFiles - 1);
sender.updateClientState();
alert(OVERSIZE_MESSAGE);
}
}
function OnFileUploadRemoved(sender, args) {
if (args.get_fileName() != null) {
if (!isDuplicateFile) {
delete filesSize[args.get_fileName()];
}
　
　
}
}
function OnFileUploadFailed(sender, args) {
;
}
function ConfigureSuccessfullyUploadedMessage(docName) {
$ = $telerik.$;
var attPanel = $(".info-panel");
var divs = attPanel[0].all;
for (var i = 0; i < divs.length; i++) {
var element = divs[i];
if (element.innerText == docName) {
element.style.display =
"none";
if (fileCount > 0) {
fileCount = fileCount - 1;
}
}
}
}
function OnClientFileUploading(sender, args) {
$telerik.$(
".ruCancel").bind('click', function (e) {
$telerik.$(
this).parent().remove();
});
}
function OnClientValidationFailed(sender, eventArgs) {
alert(
'Wrong file type: ' + eventArgs.get_fileName());
$telerik.$(eventArgs.get_row()).css(
"display", "none");
}
</script>
</
head>
<
body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<div id="uploadDiv" class="uploadDiv">
<telerik:radasyncupload id="inputFile" runat="server" temporaryfileexpiration="02:00:00"
allowedfileextensions="gif,png,jpg,jpeg,txt,rtf,msg,ppt,pptx,msi"
onclientfileselected="OnFileSelected" onclientfilesuploaded="OnFilesUploaded"
onclientprogressupdating="OnProgressUpdating" OnClientFileUploading="OnClientFileUploading" onclientfileuploaded="OnFileUploaded"
onclientfileuploadremoved="OnFileUploadRemoved" OnClientValidationFailed="OnClientValidationFailed" >
</telerik:radasyncupload>
</div>
</div>
</form>
</
body>
</
html>
1. If you want to remove files and after that upload the same ones you will have to use the deleteFileInputAt function again as in the code below that worked as expected at my side:
function OnClientFileUploading(sender, args) { $telerik.$(".ruCancel").bind('click', function(e) { var indexToDelate=parseInt(this.parentElement.id.substring(12,this.parentElement.id.length)); sender.deleteFileInputAt(indexToDelate);}); }2. This behavior is expected since you use the uploadedFiles element that returns 3 so you the actually removed item should be with index 2 as it is performed. I will recommend you to use deleteFileInputAt(numberOfFiles) instead of deleteFileInputAt(numberOfFiles - 1).
3- 4 I have added the code from the forum post that you linked to your code and it worked as expected at my side. Would you please explain which browser are you using and what is the exact exception observed?
Regards,
Plamen Zdravkov
the Telerik team
Rank 1
Thank you for your reply. I tried the code you gave me. I have some questions based on your reply.
1. It worked expected except for the fact that wehn i click the cancel button for uploading items(the one with yellow flash light), the item is not removed from the list. The selected item is on the list with red light.
2. It works. Thanks!
3 and 4 I am sorry I didn't explain it clearly. I want to know if there is any way to disable uploadcontrol when there is file uploading.
Based on the observation I have from my code, when i upload a very large file, I can continue to select other files to upload. What I want is when there is an item on the list with flashing yellow light, I can't do continue to select other files to upload until the flashing yellow light item turns into green. I use IE 7, 8, 9 for testing.
In this case you will have to make the parent element invisible with css as in the code:
function OnClientFileUploading(sender, args) { $telerik.$(".ruCancel").bind('click', function(e) { $telerik.$(this).parent().css("visibility", "hidden"); }); }I am attaching my test project where the RadAsyncUpload is disabled while a file is being uploaded. Please review it and let me know how is this behavior different from what you expect because it is not very clear to me. Here you can see a video of my test as well.
Hope this will be helpful.
Greetings,
Plamen Zdravkov
the Telerik team