RadAyncUpload - Validate dimensions and return error if fails

1 Answer 118 Views
AsyncUpload
Avrohom
Top achievements
Rank 1
Iron
Avrohom asked on 09 Jun 2022, 08:09 PM
How can I check the width and height of an image being uploaded via RadAyncUpload in an asp.net WebForm and then return an error message to the user if it doesn't match my required dimensions? I'm open to client-side or server-side options, just need to get this done.

1 Answer, 1 is accepted

Sort by
0
Avrohom
Top achievements
Rank 1
Iron
answered on 10 Jun 2022, 02:15 PM

Figured it out. Here's the answer that worked for me, in case it helps anyone else:

Here's my RadAsyncUpload

  <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
                                AllowedFileExtensions="jpg,jpeg,png" TemporaryFolder='<%# ConfigurationManager.AppSettings["RadUploadTemp"] %>'
                                OnClientFileSelected="OnClientFileSelected">
   </telerik:RadAsyncUpload>

And here is my client side script:

 <script type="text/javascript">
     
        function OnClientFileSelected(sender, args) {

            var _URL = window.URL || window.webkitURL;
            var fileInput = sender;
            //get the file from the input field
            var file = args.get_fileInputField().files[0];
            img = new Image();
            img.onload = function () {
                if (this.width < 224 || this.height < 288)
                    validationFailed(sender, "invalid dimension");

            };
            img.onerror = function () {
                validationFailed(sender, "invalid extension")
            };
            img.src = _URL.createObjectURL(file);


        }

          function validationFailed(sender, args) {

           if (args == "invalid extension")
               alert("The file must be a JPG, JPEG, or PNG");
           else if (args == "invalid dimension")
               alert("The image must be at least 224 x 288");
           
           setTimeout(function () {deleteInvalid(sender)}, 250);//wait for the file to actually be added to the async uploads array before trying to delete it
        }
         function deleteInvalid(sender) {
           sender.deleteFileInputAt(0);
       }

    </script>
Tags
AsyncUpload
Asked by
Avrohom
Top achievements
Rank 1
Iron
Answers by
Avrohom
Top achievements
Rank 1
Iron
Share this question
or