I have 3 image in Blazor page.Want do every image have own Uploadfile that mean one image one uploadfile

Question

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

<h1 style="color: blue;">Promosi Barang Anda!</h1>
<p></p>

Welcome to your new app.
<p></p>

@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    string tempTitle = images[i].Title;

    <div style="display:inline-block; text-align:center; margin:10px;">
        <img src=@($"/Images/{images[i].Image}")
             style="width:200px; cursor:pointer"
             @onclick="() => NavigateToNewPage(tempImageName)" />
        <div>@tempTitle</div>
        <InputFile OnChange="HandleFileSelected" />

    </div>
    @if ((i + 1) % 3 == 0)
    {
        <br />
    }
}
@code {
    public class MyViewModel
    {
        public string Image { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
        public string Page { get; set; } = string.Empty;

    }

    private readonly List<MyViewModel> images = new List<MyViewModel>()
    {
        new MyViewModel()
        {

            Image = "Lux.jfif",
            Title = "Title 1",
            Page = "/pageA"
        },
         new MyViewModel()
        {
            Image = "TeePol.jfif",
            Title = "Title 2",
            Page = "/PageB"
        },
         new MyViewModel()
        {
            Image = "Ajax.jfif",
            Title = "Title 3",
            Page = "/PageC"
        },

    };
    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);
        }
    }





    // Method to navigate to the new page
    private void NavigateToNewPage(string page)
    {
        Navigation.NavigateTo(page);
    }

}

Answer 1

Hi @MIPAKTEH_1,

If each uploading logic implements are quite different and the image count is known. You could just define them manually:

@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    string tempTitle = images[i].Title;
    <div style="display:inline-block; text-align:center; margin:10px;">
        <img src=@($"/Images/{images[i].Image}")
             style="width:200px; cursor:pointer"
             @onclick="() => NavigateToNewPage(tempImageName)" />
        <div>@tempTitle</div>
        @if (i == 0)
        {
            <InputFile OnChange="UploadedFile1" />
        }
        else if (i==1)
        {
            <InputFile OnChange="UploadedFile2" />
        }
        else
        {
            <InputFile OnChange="UploadedFile3" />
        }
    </div>
    @if ((i + 1) % 3 == 0)
    {
        <br />
    }
}
@code {
    public class MyViewModel
    {
        public string Image { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
        public string Page { get; set; } = string.Empty;
    }
    private async void UploadedFile1(InputFileChangeEventArgs e)
    {      
    }
    private async void UploadedFile2(InputFileChangeEventArgs e)
    {        
    }
    private async void UploadedFile3(InputFileChangeEventArgs e)
    {        
    }
}

If your upload implements are similar, and you just want to get each model to do different operation, you could change like below:

@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    string tempTitle = images[i].Title;
    var image = images[i];     //must add this outside the lamda
    <div style="display:inline-block; text-align:center; margin:10px;">
        <img src=@($"/Images/{images[i].Image}")
             style="width:200px; cursor:pointer"
             @onclick="() => NavigateToNewPage(tempImageName)" />
        <div>@tempTitle</div>
        <InputFile OnChange="@(e => HandleFileSelected(image, e))" />
    </div>
    @if ((i + 1) % 3 == 0)
    {
        <br />
    }
}
@code {
    public class MyViewModel
    {
        public string Image { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
        public string Page { get; set; } = string.Empty;
    }
    //...
    private string selectedFileName = "'";
    
    private async void HandleFileSelected(MyViewModel image, InputFileChangeEventArgs e)
        {
            //...
        }
}

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.

Best regards,
Rena