Upload works but but gives error instead of success

[Alan Mosley]

My upload works but fires the error event and not success.
the controller returns a empty contentresult, I get no server or js errors. Upload fires error event and shows retry, yet image is uploaded and saved to database

any help. thanks

Function ImageUpload(uploadedImages As BO.Models.UploadedImage) As ContentResult
    If uploadedImages.Image.Last.ContentType.StartsWith("image/", StringComparison.OrdinalIgnoreCase) Then
        Dim imageBytes As Byte() = BO.Factory.Image.ResizeImage(194, 194, uploadedImages.Image.Last.InputStream, Drawing.Brushes.White, Drawing.Imaging.ImageFormat.Png)
        Dim thumbBytes As Byte() = BO.Factory.Image.ResizeImage(100, 100, uploadedImages.Image.Last.InputStream, Drawing.Brushes.White, Drawing.Imaging.ImageFormat.Png)
        BO.Factory.ContractorFactory.SaveImages(imageBytes, thumbBytes, uploadedImages.ContractorId)
    End If
    Return Content(String.Empty)
End Function

Function ImageRemove(uploadedImages As BO.Models.UploadedImage) As ContentResult
    Return Content(String.Empty)
End Function

    <img alt="@Model.Name" data-upload-image="true" src="@Url.Action("image", New With {.controller = "contractor", .area = "contractor", .id = Model.ContractorId})" />
    @code
        Dim imageUploada As Kendo.Mvc.UI.Upload = Html.Kendo.Upload().Name("Image") _
                                                  .Multiple(False) _
                                                  .Async(Function(y) y.AutoUpload(True) _
                                                             .Save("imageupload", "contractor", New With {.area = "contractor", .contractorid = Model.ContractorId}) _
                                                             .Remove("imageremove", "contractor", New With {.area = "contractor", .contractorid = Model.ContractorId})) _
                                                         .Events(Function(events) events.Success("imageUploaded").Error("onUploadError"))
        imageUploada.Render()
    End Code
</div>
<script>
    function onUploadError(e) {
        alert(e.operation)
        alert(e)
        alert(getFileInfo(e))
    }

    function imageUploaded(e) {
        $("img[data-upload-image]").each(function (index) {
            var url = $(this).attr("src") + '?' + Math.random() * 1000000;
            $(this).attr("src", url);
        });
    }

    function getFileInfo(e) {
        return $.map(e.files, function (file) {
            var info = file.name;

            // File size is not available in all browsers
            if (file.size > 0) {
                info += " (" + Math.ceil(file.size / 1024) + " KB)";
            }
            return info;
        }).join(", ");
    }

</script>

[Dimiter Madjarov]

Hi Alan,


Sorry for the inconvenience. This issue is caused by a breaking change in jQuery 1.9. The empty string is no longer considered a valid JSON, so the error event is triggered, although the files are uploaded successfully. You could either return a non-empty JSON result from the Action or better update to the latest internal build, where the issue is fixed.


Wish you a great day!
All the best,
Dimiter Madjarov
the Telerik team

[Nicholas]

I have the same issue. Trying the latest version!

[Alan Mosley]

I assume you are using jquery 1.9.1, The solution is to return a valid json result.
Rather than
return content()
try
return json(true)

[Nicholas]

Installing and upgrading to the latest Kendo also fixed it for me. Cheers