This is a migrated thread and some comments may be shown as answers.
How do I download Files that have been Uploaded via the Upload Control
5 Answers 473 Views
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 09 Mar 2017, 08:34 PM

I am trying to figure out how I can download the files I just uploaded via the file upload control. 

I was hoping the code below would give me a link I could then click on to download the file from the list in the control. 

After some digging it looked like the recommended approach was to use a template on the upload control, however it looks like you are limited on what you can pass in to the model for the template. 

I have the following code:

I have specified this template: I am guessing by the errors that it doesn't like the FileUploadId, ProjectId or AttachmentName fields. Is there away to provide a different model to the template?

<script id="fileUploadTemplate" type="text/x-kendo-template">
    <span class='k-progress'></span>
    <div class='file-wrapper'>
        <a href="/ProductFiles/Upload/DownloadFile?fileUploadId=#= FileUploadId #&amp;Projectd=#= ProjectId #">#= AttachmentName #</a>
        <button type='button' class='k-upload-action'></button>
   </div>

</script>

 

                       @(Html.Kendo().Upload()
                                    .Name("projectFiles")
                                    .Files(
                                        files => {foreach (var f in Model.ProjectUploads)
                                            {
                                                files.Add().Name(f.FileName).Extension(f.UploadType).Size(f.FileSize);
                                            }
                                        })
                                    .Async(a => a
                                        .Save("Save", "Upload", new { area="Products" })
                                        .Remove("Remove", "Upload", new { area = "Products" })
                                        .SaveField("files")
                                    )
                                    .Events(events=>events
                                            .Upload("onProjectFileUpload")
                                            .Remove("onProjectFileUpload")
                                    ).TemplateId("fileUploadTemplate")
                        )

my controller method is:

public FileStreamResult DownloadFile(int fileUploadId, int projectId)
{
                var uploads = GetUploadsByProjectId(projectId);
                var attachment = uploads.Where(up => up.FileUploadId == fileUploadId).FirstOrDefault();
                if (attachment != null)
                {
                    string contentType = "application/octetstream";
                    var fileStreamResult = new FileStreamResult(new FileStream(attachment.FilePath, FileMode.Open, FileAccess.Read), contentType);

                    fileStreamResult.FileDownloadName = attachment.FileName;

                    return fileStreamResult;
                }
}

 

 

Given the above code, Is this the best way to implement this? Is there another way all together I should be looking at? 

Thanks,

Nick 

 

5 Answers, 1 is accepted

Sort by
0
Nick
Top achievements
Rank 1
answered on 10 Mar 2017, 08:10 PM

I was able to get this working, although the solution is not ideal, basically I hide everything except the button on the upload control and add/remove the files to a Grid control this allows me to expand on the files model anyways so I can have comments with the files that are uploaded. 

It would be nice to be able to expand the data model that the file upload control uses, as well as provide a link to the file or at least a way to add a link to the file after it's upload is successful. 

 

Thanks,

Nick

0
Ianko
Telerik team
answered on 14 Mar 2017, 11:42 AM

Hello Nick,

The Kendo File upload represents an UI based on a file input. Any model data that is generated on the server is not accessible through the Upload widget. Shortly, the Kendo Upload only sends the file to the server and the received data is whether the upload is successful. 

That said, a possible list of download links is a matter of application development and Kendo Upload cannot provide that out of the box.

Regards,
Ianko
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lawrence
Top achievements
Rank 2
answered on 02 Aug 2017, 04:45 PM

This is what I did...

$(document).ready(function() {
    $(".k-file-name").css("cursor", "pointer");
    $(".k-file-name").click(function() {
        var fileName = this.innerText;
        var uniqueId = $("#FundRequest_UniqueId").val();
        var url = '@Url.Action("DownloadFile", "Home")';
        window.location = url + "?fundRequestUniqueId=" + uniqueId + "&fileName=" + fileName;
    });
});

 

My controller...

public FileResult DownloadFile(Guid fundRequestUniqueId, string fileName)
{
    var fundRequest = new FundRequest(fundRequestUniqueId);           
    // The File property is a byte[]
    return this.File(fundRequest.File, "application/pdf", this.Server.UrlEncode(fileName));
}
0
Ianko
Telerik team
answered on 03 Aug 2017, 07:10 AM

Hello Lawrence,

Thanks for sharing your code. I believe it will be helpful to the community. 

Regards,
Ianko
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Kunal
Top achievements
Rank 1
answered on 28 Dec 2017, 07:49 PM
<a href="http://dotnettec.com/upload-and-download-file-using-asp-net/">FYR</a>
Asked by
Nick
Top achievements
Rank 1
Answers by
Nick
Top achievements
Rank 1
Ianko
Telerik team
Lawrence
Top achievements
Rank 2
Kunal
Top achievements
Rank 1
Share this question
or