Telerik Forums
UI for Blazor Forum
4 answers
1.1K+ views

I have 2 projects inside the same solution. My first project is a client-side project that has the Upload .razor file. And my second project is a server-side project that has the API Controller. So when I want to upload a file, the file doesn't finish successfully cause the API Call fails with error 404.

I would like to share both codes 

 

1- .razor File:

@page "/"


@inject NavigationManager NavigationManager

<TelerikUpload SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl" SaveField="file"
               AllowedExtensions="@( new List<string>() { ".jpg", ".png", ".jpeg" } )"
               MaxFileSize="2048000" MinFileSize="1024" Multiple="false" />

@code {
    public string SaveUrl => ToAbsoluteUrl("api/upload/save");
    public string RemoveUrl => ToAbsoluteUrl("api/upload/remove");

    public string ToAbsoluteUrl(string url)
    {
        return $"{NavigationManager.BaseUri}{url}";
    }
}

2- APIController

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace TelerikBlazorApp2.Server.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class UploadController : Controller
    {
        public IWebHostEnvironment HostingEnvironment { get; set; }

        public UploadController(IWebHostEnvironment hostingEnvironment)
        {
            HostingEnvironment = hostingEnvironment;
        }

        [HttpPost]
        public async Task<IActionResult> Save(IFormFile file) // the form field name. See SaveField
        {
            if (file != null)
            {
                try
                {
                    //foreach (var file in files)
                    //{
                        var fileContent = ContentDispositionHeaderValue.Parse(file.ContentDisposition);

                        // Some browsers send file names with full path.
                        // We are only interested in the file name.
                        var fileName = Path.GetFileName(fileContent.FileName.ToString().Trim('"'));
                        var physicalPath = Path.Combine(HostingEnvironment.ContentRootPath, fileName);

                        // Implement security mechanisms here - prevent path traversals,
                        // check for allowed extensions, types, size, content, viruses, etc.
                        // this sample always saves the file to the root and is not sufficient for a real application

                        using (var fileStream = new FileStream(physicalPath, FileMode.Create))
                        {
                            await file.CopyToAsync(fileStream);
                        }
                   // }
                }
                catch (Exception ex)
                {
                    // implement error handling here, this merely indicates a failure to the upload
                    Response.StatusCode = 500;
                    await Response.WriteAsync("some error message"); // custom error message
                }
            }

            // Return an empty string message in this case
            return new EmptyResult();
        }


        [HttpPost]
        public ActionResult Remove(string[] files) // the default field name. See RemoveField
        {
            if (files != null)
            {
                try
                {
                    foreach (var fullName in files)
                    {
                        var fileName = Path.GetFileName(fullName);
                        var physicalPath = Path.Combine(HostingEnvironment.WebRootPath, fileName);

                        if (System.IO.File.Exists(physicalPath))
                        {
                            // Implement security mechanisms here - prevent path traversals,
                            // check for allowed extensions, types, permissions, etc.
                            // this sample always deletes the file from the root and is not sufficient for a real application

                            System.IO.File.Delete(physicalPath);
                        }
                    }
                }
                catch
                {
                    // implement error handling here, this merely indicates a failure to the upload
                    Response.StatusCode = 500;
                    Response.WriteAsync("some error message"); // custom error message
                }
            }

            // Return an empty string message in this case
            return new EmptyResult();
        }
    }
}

Marin Bratanov
Telerik team
 answered on 28 Oct 2020
10 answers
191 views
<TelerikGrid Data="@CustomerViewModel.Customers"
             EditMode="@GridEditMode.Inline"
             Height="800px"
             Pageable="true"
             Sortable="true"
             SortMode="@SortMode.Single"
             OnUpdate="@(async args => await CustomerViewModel.UpdateCustomerAsync(args))"
             OnDelete="@(async args => await CustomerViewModel.DeleteCustomerAsync(args))"
             OnCreate="@(async args => await CustomerViewModel.CreateCustomerAsync(args))">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="Add">Add Customer</GridCommandButton>
        <GridSearchBox DebounceDelay="200"></GridSearchBox>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@nameof(Customer.Name)" Title="Customer" />
        <GridColumn Editable="false" Field="@nameof(Customer.Jurisdictions)" Title="Jur. Count" />
        <GridColumn Editable="false" Field="@nameof(Customer.JurisdictionsWithPersonalForms)" Title="Jur. w/Personal forms" />
        <GridColumn Editable="false" Field="@nameof(Customer.JurisdictionsWithCorporateForms)" Title="Jur. w/Corporate forms" />
        <GridColumn Editable="false" Field="@nameof(Customer.JurisdictionsWithForms)" Title="Jur. with forms (total)" />
        <GridColumn Editable="false" Field="@nameof(Customer.JurisdictionsWithLicense)" Title="Jur. License Count" />
        <GridCommandColumn>
            <GridCommandButton Command="Edit" Icon="edit"></GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true"></GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true"></GridCommandButton>
            @*<GridCommandButton Title="Jurisdictions" OnClick="JurisdictionsShow">Jurisdictions</GridCommandButton>*@
        </GridCommandColumn>
    </GridColumns>
    <DetailTemplate>
        @{
            Customer customer = context as Customer;
            <CustomerJurisdictionsGrid CustomerId="@customer.Id" OnDeleteCallback="@OnDeleteCustomerCallback"/>
        }
    </DetailTemplate>
</TelerikGrid>

 

 

nested

<TelerikGrid Data="@ViewModel.CustomerJurisdictions"
             Pageable="true"
             Sortable="true"
             PageSize="20"
             SortMode="@SortMode.Single"
             Height="800px"
             OnDelete="@(async args=> await ViewModel.DeleteCustomerJurisdictionAsync(args))">
    <GridColumns>
        <GridColumn Field="@nameof(CustomerJurisdiction.JurisName)" Title="Name"></GridColumn>
        <GridColumn Field="@nameof(CustomerJurisdiction.PersFormsCount)" Title="Personal Forms"></GridColumn>
        <GridColumn Field="@nameof(CustomerJurisdiction.CorpFormsCount)" Title="Corporate Forms"></GridColumn>
        <GridColumn Field="@nameof(CustomerJurisdiction.JurisTypeDescription)" Title="Type"></GridColumn>
        <GridColumn Field="@nameof(CustomerJurisdiction.JurisStateDescription)" Title="State"></GridColumn>
        <GridColumn Field="@nameof(CustomerJurisdiction.JurisCountryDescription)" Title="Country"></GridColumn>
        <GridColumn Field="@nameof(CustomerJurisdiction.LastUpdated)" Title="Last Updated"></GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Delete" Icon="delete"></GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>
 
@code {
    [Parameter]
    public int CustomerId { get; set; }
    [Parameter]
    public EventCallback<CustomerEventArgs> OnDeleteCallback { get; set; }
 
    protected override async Task OnParametersSetAsync()
    {
        Console.WriteLine(ViewModel);
        await ViewModel.LoadCustomerJurisdictionsAsync(CustomerId);
    }
 
}

 

so basically if thу parameter to the nested grid is not primitive, OnParametersSetAsync will be fired twice, would appreciate for the work around

Marin Bratanov
Telerik team
 answered on 28 Oct 2020
2 answers
451 views

The Datepicker is using Sunday as the first day of week, my Windows 10 machine is set up to use UK dates/times and Monday is selected as first day of week.

I am using Client (webasm) version of Blazor.

Do I need to change the culture in the code?

Marin Bratanov
Telerik team
 answered on 28 Oct 2020
1 answer
75 views
I have a TelerikDateTimePicker on a form and limit the time to 15 minute intervals (00, 15, 30, 45) on form validation but the testers are asking if we can limit the times displayed in the time portion of the date time picker to only show 00, 15, 30 and 45. Is there any way to do that?
Svetoslav Dimitrov
Telerik team
 answered on 28 Oct 2020
6 answers
971 views

I inserted a Loader component to my project:

                        <TelerikButton ButtonType="@ButtonType.Button" OnClick="@CancelForm">Cancel</TelerikButton>
                        <TelerikButton ButtonType="@ButtonType.Submit" Primary="true" Enabled="@Activado">
                            <TelerikLoader Visible="@IsGeneratingReport" ThemeColor="light"></TelerikLoader>
                            @( Activado ? "Creando recogida" : "Recogida creada" )
                        </TelerikButton>

But it makes me mistake:

"Found Markup element with unexpected name 'TelerikLoader'. If this is intended to be a component , add @using directive for its namespace".

Download the TelerikBlazorAppLibManSample project and it has the same error. In the project I have referenced Telerik for Blazor and I use other components: TelerikTabStrip, TelerikTextBox, etc. and i don't have this problem.

 

Thank you.

 

Juan


Marin Bratanov
Telerik team
 answered on 26 Oct 2020
1 answer
474 views

Hi Telerik Blazor team and users,

some question regarding the width of the progress bar component:

1. Is it planned to set the width by a property, e.g. Width="100%"?

2. Currently the control width is still the same after the target device is changed by Google developer tools (attached files). Is it a bug?

 

Regards, Stefan

Marin Bratanov
Telerik team
 answered on 25 Oct 2020
1 answer
815 views

 

Hi, I am not able to concatenate value in TextField for selected value eg: (Code+ '-' +Name) 

<TelerikDropDownList DefaultText="NONE" Data="@categotyTypes" @bind-Value="@Model.Code"
                                     TextField="@nameof(CategoryTypes.Name)"
                                     ValueField="@nameof(CategoryTypes.Code)" Id="CategoryCode" Width="100%">
                    <ItemTemplate Context="dlContext">
                        @($"{dlContext.Code} - {dlContext.Name}")
                    </ItemTemplate>
                </TelerikDropDownList>

Could you please help on this.

Marin Bratanov
Telerik team
 answered on 25 Oct 2020
1 answer
178 views

Good Day

Is there a way to catch which tile was resized in the OnResize event and subsequently get the content (in this case a chart).

I do not want all my charts to refresh if only one is resized.

Marin Bratanov
Telerik team
 answered on 25 Oct 2020
2 answers
1.2K+ views

Hello!
I have a tabstrip with many tabs.
One of tabs contains validator like

<ValidationMessage For="@(() => crmView.Name)" />

 

If I switch between tabs, and return to the tab with validation, duplicate validation messages occur when switching between tabs.
How to prevent that?

 

Ivan
Top achievements
Rank 3
Iron
Iron
Iron
 answered on 23 Oct 2020
1 answer
422 views

I have a Blazor Modal with a combobox. It provides a list of users that I want to group by role (see image).

 

<div class="col-10 offset-2 mt-2">
                    <TelerikDropDownList Data="@UserDropdownList" ValueField="Id" TextField="Name" @bind-Value="@UserSettings.UserId" >     </TelerikDropDownList>
                </div>

 

Marin Bratanov
Telerik team
 answered on 23 Oct 2020
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?