How to pass small amount of Json data back to client after uploading the file successfully?

[Daochuen]

 

Hello,
I used Asynchronous Mode of the Upload component in my MVC project.  How to pass small amount of Json data back to client after successful uploading the file?

Thanks!

[Veselin Tsvetanov]

Hi Daochuen,

Here is how to return a JSON from the controller Save action of the Upload:

public ActionResult Async_Save(IEnumerable<HttpPostedFileBase> files)
{
	// The Name of the Upload component is "files"
	if (files != null)
	{
		foreach (var file in files)
		{
			// Some browsers send file names with full path.
			// We are only interested in the file name.
			var fileName = Path.GetFileName(file.FileName);
			var physicalPath = Path.Combine(Server.MapPath("~/App_Data"), fileName);

			// The files are not actually saved in this demo
			// file.SaveAs(physicalPath);
		}
	}

	// Return an empty string to signify success
	return Json(new { message = "Message from controller" });
}

And here is how to get the JSON in the Success event handler of the Upload widget:

@(Html.Kendo().Upload()
	.Name("files")
	.Async(a => a
		.Save("Async_Save", "Home")
		.Remove("Async_Remove", "Home")
		.AutoUpload(true)
	)
	.Events(e => e.Success("onSuccess"))
)

and:

function onSuccess(e) {
	var responseText = e.XMLHttpRequest.responseText;
	var responseObject = JSON.parse(responseText);

	alert(responseObject.message);
}

Attached you will find a small sample implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik