Show error when file upload fails

0 Answers 38 Views
Upload
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 31 Oct 2023, 07:23 PM

I have a Dojo here: https://dojo.telerik.com/UhicOWUv

I want to hide the file list but I want to display an error message on the page if it doesn't upload. In the above example, I am attempting to upload a file that is too large. Instead of displaying an error message in the "messages" div, it is doing nothing so the user doesn't know it failed. How do I accomplish my goal of hiding the files list but showing a message when something goes wrong?

Here is the code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
</head>
<body>
  
<input type="file" name="files" id="photos" />
  <div id="messages"></div>
<script>
    $("#photos").kendoUpload({
        async: {
            saveUrl: "http://my-app.localhost/save",
            removeUrl: "http://my-app.localhost/remove"
        },
        showFileList: false,
      	validation: {
                allowedExtensions: [".pdf"],
                maxFileSize: 900000,
                minFileSize: 300000
            },
      error: function() { $("#messages").append("error"); }
    });
</script>
</body>
</html>

Nikolay
Telerik team
commented on 03 Nov 2023, 12:08 PM

Hi Lee,

I can suggest instead of appending the error message replace the text in the k-upload-status container. For example:

    error: function(e) { 
        console.log(e)
        $(".k-upload-status").text("Error").css("color", "red")
      }

Dojo demo: https://dojo.telerik.com/UlerurIH

Please let me know if this is what you are looking for.

Regards,

Nikolay

No answers yet. Maybe you can help?

Tags
Upload
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Share this question
or