Upload to signify error

[Dan]

I have to upload the files and I have some restriction that can be evaluated on the server. For instance the total size of all the files uploaded have a maximum size.

The demo states this: "// Return an empty string to signify success". From this I took that if I return a string that is not empty it will not be success. But when I tested instead of getting the error event the upload widget shows success.

Please provide an example on how to signify errors and if possible to return for instance an object as error.

What I have returned is something like this Json(new { errors: [{ ErrorMessage: "1"}, {ErrorMessage: "2"}] })

[Dan]

Another related question. Would it be possible to have error for a specific file and not all of them? Meaning if I upload two files would it be possible to have one file with success and one file with error?

[Dimitar]

Hello Dan,

Sending metadata from the Save handlers can be achieved by passing JSON as you have already figured out. In addition to this, in order to mark the file with red color to signify that there is a problem with the file, the response header of the response could be set:

[HttpPost]
public IActionResult Save(IEnumerable<IFormFile> attachments)
{
   // ...

  // Set error response
  HttpContext.Response.StatusCode = (int)HttpStatusCode.InternalServerError;

  // When returning JSON the mime-type must be set to text/plain
  return Json(new { status = "OK" }, "text/plain");
}

By default, when the Upload widget is configured is async mode, a separate request will be sent to the server for each selected file for upload. When the data for the file is processed in the Save handler, you could return a collection of errors for the specified file and then display them in the desired container by handling the Upload's success or error event. For example, with the Http status code in the above snippet, the error event of the Upload will be triggered:

@(Html.Kendo().Upload()
  ...
  .Events(e => e.Error("onError"))
)

<script>
  function onError(e) {
    console.log(e.XMLHttpRequest.response);
  }
</script>

To place an error message in its file list item, you could use the response file data from the error event handler. For example, you could query the upload wrapper element to find the desired DOM element by data-uid attribute and then insert the messages with jQuery.

Regards,
Dimitar
Progress Telerik