AsyncUpload How to remove automatically does not meet the conditions of the picture

1 Answer 49 Views
Ajax AsyncUpload
Colin
Top achievements
Rank 1
Colin asked on 02 Mar 2023, 02:29 AM

Hello telerik,

This is my first time using the telerik. I want to know how to add the following judgments in JavaScript or events. And also remove the image which does not fit the criteria at the same time.

For example, I need type in a text box '123' and upload an image called '123.jpg', then it is allowed to upload, because '123'='123'.But if I type in a text box '123' and upload an image called 'abc.jpg', it is not allowed to upload, because '123'<>'abc', then auto remove the image and reselect. how can I do it, please help me.

the following is my code.

 

<telerik:RadTextBox ID="txtContainer" runat="server" OnTextChanged ="txtContainer_TextChanged" AutoPostBack ="true" ></telerik:RadTextBox>

 <telerik:RadAsyncUpload RenderMode="Lightweight" runat="server" ID="AsyncUpload1" AllowedFileExtensions="jpeg,jpg,gif,png,bmp" OnFileUploaded="RadAsyncUpload1_FileUploaded1" OnClientValidationFailed="onClientValidationFailed"  MaxFileInputsCount="1" >                    </telerik:RadAsyncUpload>

 

<script type="text/javascript">

function onClientValidationFailed(sender, args) {

              $telerik.$(".ruCancel").parent().remove();
              alert("Allowed files extension is jpeg,jpg,gif,png,bmp");
              sender.addFileInput();
          }

</script>

Colin
Top achievements
Rank 1
commented on 03 Mar 2023, 02:53 AM

Thank you very much! I've tested it. It's a good idea.
Rumen
Telerik team
commented on 03 Mar 2023, 09:46 AM

Thank you, Colin! I converted the comment to an answer.

1 Answer, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 02 Mar 2023, 11:39 PM

You can try the OnClientFileUploading event of RadAsyncUpload where you can compare the textbox value and selected file name and if they do not match cancel the upload and remove the row, e.g.

        <telerik:RadTextBox ID="txtContainer" runat="server" OnTextChanged ="txtContainer_TextChanged" AutoPostBack ="true" ></telerik:RadTextBox>
        <telerik:RadAsyncUpload RenderMode="Lightweight" OnClientFileUploading="OnClientFileUploading" runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Automatic" AutoAddFileInputs="true"   />
        <script>
            function OnClientFileUploading(sender, args) {
                if (args.get_fileName() != $find("<%=txtContainer.ClientID%>").get_textBoxValue()) {
                    args.get_row().remove();
                    args.set_cancel(true);
                }
            }
        </script>

Tags
Ajax AsyncUpload
Asked by
Colin
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Share this question
or