How do I upload an image using Blazor Server

user_17817390 0
Viewed 1288

so I am new to Blazor and kinda have a little experience in C#. I am trying to upload an image to my database and can't seem to figure out what I am doing wrong. Here is my "BlogCreate" file where I can create a blog.

                <div class="form-group">
                <label for="City" class="control-label">Context</label>
                <input form="City" class="form-control" @bind="@blog.Context" />
            </div>
            <InputFile OnChange="@LoadFiles" multiple />

        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="button" class="btn btn-primary" @onclick="@CreateBlog" value="Save"/>
                <input type="button" class="btn btn-primary" @onclick="@Cancel" value="Cancel"/>
            </div>
        </div>
    </div>
</form>

@code {
    Blog blog = new Blog();
    public byte[] ImgUpload { get; set; }
    protected async void CreateBlog()
    {
        await blogService.InsertBlog(blog);
        NavigationManager.NavigateTo("blogs");
    }

    void Cancel()
    {
        NavigationManager.NavigateTo("blogs");
    }

    private void LoadFiles(InputFileChangeEventArgs e, BlogService.ImgUpload)
    {
             selectedFiles = e.GetMultipleFiles();
     message = $"{selectedFiles.Count} file(s) selected";
     this.StateHasChanged();
    }
}

I tried copying some stuff from Microsofts docs, but I honestly couldn't figure out how to use it. So here is my services code basically functions for getting the blogs and deleting:

            //Get blogs
        public async Task<List<Blog>> GetAllBlogs()
        {
            return await _Context.Blogs.ToListAsync();
        }

        //Create blogs
        public async Task<bool> InsertBlog(Blog blog)
        {
            await _Context.Blogs.AddAsync(blog);
            await _Context.SaveChangesAsync();
            return true;

        }

and lastly my tables in my database:

            [Key]
        public int Id { get; set; }
        [Required]
        public string Title { get; set; }
        [Required]
        public string Author { get; set; }
        [Required]
        public string Description { get; set; }
        [Required]
        public string Context { get; set; }
        public string Imgname { get; set; }
        public byte[] Img { get; set; }

can someone tell me what I'm doing wrong I am struggling to figure out what direction to turn to upload an image to my database. I am using entity framework as well.

blazor-server-side blazor entity-framework mysql c#
1 Answers

You need to do something in your handler when files are selected. This is like remembering the files selected by the user for when the Submit button is pressed. Here's an example:

  private void LoadFiles(InputFileChangeEventArgs e, BlogService.ImgUpload)
    {
             selectedFiles = e.GetMultipleFiles();
     message = $"{selectedFiles.Count} file(s) selected";
     this.StateHasChanged();

          // you need to do something here with the files, like add them to your Blog            
          var file = selectedFiles.First();
          blog.Img = ReadFileBytes(file); // (you can use file.OpenReadStream)
          blog.Imgname = file.Name;
    }

As currently coded, you will create a Blog but never assign the Img/Imgname properties to the blog below.

protected async void CreateBlog()
{
    await blogService.InsertBlog(blog);
    NavigationManager.NavigateTo("blogs");
}
user_8869450
Related