This is a migrated thread and some comments may be shown as answers.

Uploading file on .Net Core to Razor Page code Handler with Parameter

4 Answers 217 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 04 Jun 2019, 02:30 PM

Hi,

 

I'm trying to use an Upload component on a .Net Core 2.2 Razor Pages project, I have a form to edit a record, where I would like to add a file as a an attachment.

I've been trying 2 difference methods to achieve this.

 

Method 1 - To a Controller

I've been able to get the below to upload a file to a controller, where I can convert to a byte array to eventually try and save to a database.

Component

@(Html.Kendo().Upload()
    .Name("files")
    .Async(a => a
        .Save("SaveAsync", "Upload")
        .Remove("Remove", "Upload")
    )
    .Validation(validation => validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png" }))
)

 

Controller 

public async Task<ActionResult> SaveAsync(IEnumerable<IFormFile> files)
       {
           if (files != null)
           {
               foreach (var file in files)
               {
                   if (file.Length > 0)
                   {
                       using (var ms = new MemoryStream())
                       {
                           await file.CopyToAsync(ms);
                           var fileBytes = ms.ToArray();
                           string s = Convert.ToBase64String(fileBytes);
                       }
                   }
               }
           }
           return Content("");
       }

 

Problem:  I don't know how pass the records ID when the files are passed to the controller, so I can save the Byte Array to the correct record. How do I include a parameter?

 

Method 2 - Via Code Behind (Ideal)

The ideal method as this is a razor pages app, is to pass the files to a handler on the code behind, so I have the Record ID available, I've moved the SaveAsync Task to the Razor page code behind, but I can't get it to trigger when the file is uploaded.

So far, I've tried the below to call the OnPostSaveAsync Handler

@(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .SaveUrl("/Case/Edit?handler=SaveAsync")
                .Remove("Remove", "Upload")
            )
            .Validation(validation => validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png" }))
        )

 

public async Task<ActionResult> OnPostSaveAsync(IEnumerable<IFormFile> files)
       {
           if (files != null)
           {
               foreach (var file in files)
               {
                   if (file.Length > 0)
                   {
                       using (var ms = new MemoryStream())
                       {
                           await file.CopyToAsync(ms);
                           var fileBytes = ms.ToArray();
                           string s = Convert.ToBase64String(fileBytes);
                       }
                   }
               }
           }
           return Content("");
       }

 

Problem:  It doesn't trigger the handler.. Can you see what I'm missing/done wrong? If passing the razor code behind isn't possible, how would I pass a parameter of the record ID to the controller, using the MVC method?

 

Thanks in advance for any help on this, we've only recently purchased DevCraft and I'm hoping it's something simple! 

 

Mark

 

4 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 04 Jun 2019, 03:00 PM

I should have added, I've tried to pass via Javascript, as per other support threads, but the parameter is null in the controller.

@using Kendo.Mvc.UI
<div>
    <div class="demo-section k-content">
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("SaveAsync", "Upload")
                .Remove("Remove", "Upload")
            )
            .Events(e =>
                {
                    e.Select("onUpload");
                })
            .Validation(validation => validation.AllowedExtensions(new string[] { ".gif", ".jpg", ".png" }))
        )
    </div>
</div>

<script>
    function onUpload(e) {
        alert("Upload Triggered")
        e.data = {};
        e.data["CaseID"] = JSON.stringify({
            prop1: "1"
        });
    }
</script>

 

 

 

0
Dimitar
Telerik team
answered on 07 Jun 2019, 06:55 AM
Hello Mark,

I have reviewed the provided code snippets and noticed that you are trying to pass the additional 'CaseID' parameter through the Select event of the Upload:
.Events(e =>
{
  e.Select("onUpload");
})

However, passing additional parameters should be achieved through the Upload event instead:
.Events(e =>
{
  e.Upload("onUpload");
})
 
...
 
<script>
    function onUpload(e) {
        e.data = {
            CaseID: 1
        };
    }
</script>

With the above modifications, the parameter should be successfully received in the controller end-point:
public async Task<ActionResult> SaveAsync(IEnumerable<IFormFile> files, int CaseID) { ... }



Regards,
Dimitar
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dinesh
Top achievements
Rank 1
answered on 11 Mar 2021, 01:35 AM

I am trying to use this, but the UPLOAD is Details template of a grid. The selected detail row will show a the uploader. I am trying to pass ID as shown below. but it's saying syntax error. Please help with this. 

<script>
    function onUpload(e) {
        e.data = {
            CaseID: #=Id#
        };
    }
</script>

0
Dimitar
Telerik team
answered on 12 Mar 2021, 05:27 AM

Hello Dinesh,

In order to pass a property from the related Grid row, you should first retrieve the respective data item:

function onUpload(e) {
     var grid = $("#grid").getKendoGrid();
     var dataItem = grid.dataItem($(e.currentTarget).closest("tr"));

     e.data = { CaseID: dataItem.Id }
}

 

Regards,
Dimitar
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Upload
Asked by
Mark
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Dimitar
Telerik team
Dinesh
Top achievements
Rank 1
Share this question
or