How to upload pictrue or image file from directory where client saved

Question

@page "/view-page"

<h3>Blank View Page</h3>

@for (int i = 0; i < tshirtItems.Count; i++)

{

<div class="tshirt-section">

    <img src="@tshirtItems[i].ImagePath" alt="T-Shirt Image" />

    <div>

        <label for="tshirtName">T-Shirt Name:</label>

        <input type="text" id="tshirtName" @bind="tshirtItems[i].Name" />

    </div>

    <div>

        <label for="tshirtPrice">Price:</label>

        <input type="number" id="tshirtPrice" @bind="tshirtItems[i].Price" />

    </div>

</div>
```}

@code {

```powershell
private List<TShirt> tshirtItems = new List<TShirt>

{

    new TShirt { ImagePath = "", Name = "Shirt 1", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 2", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 3", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 4", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 5", Price = 0 },

    new TShirt { ImagePath = "", Name = "Shirt 6", Price = 0 }

};

private class TShirt

{

    public string ImagePath { get; set; }

    public string Name { get; set; }

    public decimal Price { get; set; }

}
```}

Answer 1

assuming this is a blazor app, see docs:

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

Answer 2

Hi @MIPAKTEH_1,

Here is a whole working demo you could follow:

@page "/view-page"
<h3>Blank View Page</h3>
@for (int i = 0; i < tshirtItems.Count; i++)
{
    var index = i;
    <div class="tshirt-section">
        <img src="@tshirtItems[i].ImagePath" alt="T-Shirt Image" style="max-width: 150px; max-height: 150px;" />
        <div>
            <label for="tshirtImage">Upload Image:</label>
            <InputFile OnChange="e => UploadImage(e, index)" />
        </div>
        <div>
            <label for="tshirtName">T-Shirt Name:</label>
            <input type="text" id="tshirtName" @bind="tshirtItems[i].Name" />
        </div>
        <div>
            <label for="tshirtPrice">Price:</label>
            <input type="number" id="tshirtPrice" @bind="tshirtItems[i].Price" />
        </div>
    </div>
}
@code {
    private List<TShirt> tshirtItems = new List<TShirt>
    {
        new TShirt { ImagePath = "", Name = "Shirt 1", Price = 0 },
        new TShirt { ImagePath = "", Name = "Shirt 2", Price = 0 },
        new TShirt { ImagePath = "", Name = "Shirt 3", Price = 0 },
        new TShirt { ImagePath = "", Name = "Shirt 4", Price = 0 },
        new TShirt { ImagePath = "", Name = "Shirt 5", Price = 0 },
        new TShirt { ImagePath = "", Name = "Shirt 6", Price = 0 }
    };
    private async Task UploadImage(InputFileChangeEventArgs e, int index)
    {
        var file = e.File; // Get the uploaded file
        if (file != null)
        {
            var buffer = new byte[file.Size];
            await file.OpenReadStream().ReadAsync(buffer);
            // Convert to Base64
            var base64Image = Convert.ToBase64String(buffer);
            tshirtItems[index].ImagePath = $"data:image/png;base64,{base64Image}";
        }
    }
    private class TShirt
    {
        public string ImagePath { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

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