Display File Location for Each Uploaded File
Environment
| Product | Telerik UI for ASP.NET Core Upload |
| Progress Telerik UI for ASP.NET Core version | Created with the 2023.3.1114 version |
Description
How can I display the location of the uploaded file as a link within the Upload component?
Solution
- Define an Upload component in asynchronous mode.
- Use the
TemplateIdoption to define a template for rendering the files in the file list. - Update the
SaveAction method to return the file location of the uploaded file. - Subscribe to the
Successevent to intercept the received file location from the server. Select the anchor tag within the file template with jQuery and update thehrefattribute with the respective file location.
@(Html.Kendo().Upload()
.Name("files")
.TemplateId("fileTemplate")
.Async(a => a
.Save("Async_Save", "Home")
.Remove("Remove", "Home")
.AutoUpload(true)
)
.Events(ev => ev.Success("onSuccess"))
)
<script id="fileTemplate" type="text/x-kendo-template">
<span class="k-progress"></span>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-image"></span>
<span class="k-file-state"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name"><a href="" target="_blank">#=data.name#</a></span>
</span>
<strong class="k-upload-status">
<button type="button" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"><span class="k-button-icon k-icon k-i-close k-i-x" title="Remove"></span>
</button>
</strong>
</script>
@addTagHelper *, Kendo.Mvc
<kendo-upload name="files" template-id="fileTemplate" on-success="onSuccess">
<async auto-upload="true"
save-url="@Url.Action("Async_Save", "Home")" remove-url="@Url.Action("Remove", "Home")" />
</kendo-upload>
<script id="fileTemplate" type="text/x-kendo-template">
<span class="k-progress"></span>
<span class="k-file-group-wrapper">
<span class="k-file-group k-icon k-i-file-image"></span>
<span class="k-file-state"></span>
</span>
<span class="k-file-name-size-wrapper">
<span class="k-file-name"><a href="" target="_blank">#=data.name#</a></span>
</span>
<strong class="k-upload-status">
<button type="button" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"><span class="k-button-icon k-icon k-i-close k-i-x" title="Remove"></span>
</button>
</strong>
</script>
<script>
function onSuccess(e) {
var uploadedFileName = e.files[0].name;
var fileLocation = e.response.location;
var fileLocationLinks = $(".k-file-name a");
$.each(fileLocationLinks, function () {
if ($(this).text() == uploadedFileName) {
$(this).attr("href", fileLocation);
}
});
}
</script>
public async Task<ActionResult> Async_Save(IEnumerable<IFormFile> files)
{
string filesLocation = null;
if (files != null)
{
foreach (var file in files)
{
var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);
var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
var physicalPath = Path.Combine("App_Data", fileName);
filesLocation = physicalPath;
using (var fileStream = new FileStream(physicalPath, FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
}
return Json(new { location = filesLocation });
}