Save file from somebody to my web Blazor.I try browse in internet but not found how to start write the code.Let said put that file int TextBox and then need to upload,,How

Question

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<p></p>
@foreach (var image in images)
{
    <div style="margin:10px 20px; float:left;">
        <img src=@($"/Images/{image}") asp-append-version="true" : style="width=100px;height:100px" @onclick="() => NavigateToNewPage()" />
        <div class='e-input' style="margin-top:5px; width:120px;">
            <input class='e-input' style="width:100%" Placeholder='' type='text' />
        </div>
    </div>
}
@code {
    // Define the list of image file names
    private readonly List<string> images = new()
    {
        "Car2.jpg"
    };

    private void NavigateToNewPage()
    {
        Navigation.NavigateTo("/PageCar2");
    }

}

Answer 1

Hi @MIPAKTEH_1,

If you want to upload file inside the blazor web app , you could use InputFile taghelper and bind it with a change method to get the file and save it at server side.

More details, you could refer to below example:

1.Firstly you could create a UploadedFiles folder inside the root path of your blazor app.

2.You could use below codes to upload file:

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
 
<InputFile OnChange="HandleFileSelected"   />
@if (!string.IsNullOrEmpty(selectedFileName))
{
    <p>Selected file: @selectedFileName</p>
 
}
@code {
    private readonly List<string> images = new()
    {
        "Car2.jpg"
    };
    private void NavigateToNewPage()
    {
        Navigation.NavigateTo("/PageCar2");
    }
    private string selectedFileName;
  
    private async void HandleFileSelected(InputFileChangeEventArgs e)
    {
        var file = e.File;
        selectedFileName = file.Name;
      
        var folderPath = Path.Combine(Environment.CurrentDirectory, "UploadedFiles");
        // Ensure the folder exists
        Directory.CreateDirectory(folderPath);
        // Define the complete file path
        var filePath = Path.Combine(folderPath, file.Name);
        // Save the file to the server
        using (var fileStream = new FileStream(filePath, FileMode.Create))
        {
            await file.OpenReadStream().CopyToAsync(fileStream);
        }
    }
}

It will show a button named choose file, if you want to upload file, then after selecting the file, it will save at the server's folder.

Like below:

Result:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

 

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

If I understand correctly, you are asking how to upload a file in Blazor. See the official documentation.

https://learn.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-8.0