C#•14mo ago

❔ Difficulties with http requests for image(blob) column in mysql

So i recently learned how to pull basic data from mysql but am struggling to find anything I think is useful for reading a blob column and how to display that further into the front end. This is what I have for pulling easier data and would love some insight on how to change this up to pulling blob data, and making it possible to display this. Thank you!

13 Replies

Rist•14mo ago

This would probably be much easier if you used EF Core. But as it is right now, I'm assuming the second column in your row will contain an array of bytes, representing the image:

var row = table.Rows[0];
var imageData = row[1] as byte[];

var row = table.Rows[0];
var imageData = row[1] as byte[];

So now the problem is to return this image. You can't just return a whole bunch of them from a single method in asp.net, so you'll probably have to provide an endpoint for requesting images from the database one by one and return them something like this:

return File(imgBytes, "image/jpeg");

return File(imgBytes, "image/jpeg");

Aquatic Life•14mo ago

Correct assumption on the second column being the image column with the array of bytes. And I'm assuming this is something that would be done after the connection has been opened line 33?

Rist•14mo ago

No, you'd have to do this after the table is filled up by the data, so after all the usings. But your method won't work as it is anyway, unless you aim to return a gigantic pile of data representing your entire collection of saved images in a single response and then parse all of that into actual images with JS or WebAsm. Or I guess you could encode them all into base64, making the data payload even larger Anyway, that's actually unfeasable What do you want to display to the user?

Aquatic Life•14mo ago

gotcha, so this wouldn't be best practice at all. So I've been learning web dev from a friend but he gave this to me as like an "assignment" of sorts not school or work related but just to learn. So if i just have a small db with a few images it would work but still not the best option for this. And apologies for my ignorance on the subject as I'm still pretty new to learning all of this. I'm basically making a pkmn card management type of site where the cards will display the images and I have another table with like basic info that will display them and they can input new cards, update ones already there, and delete them if that makes sense So i have a controller for all the other basic info and another for the images. The basic info is no problem for me as i got this down but struggling to find how to be able to get, post, put and delete blob data for this controller

Rist•14mo ago

Returning a file is pretty simple: once you get your byte[], you can just return in with the built-in File method:

[HttpGet("{id}")]
public async Task<IActionResult> GetImage(int id)
{
  var data = await GetImageById(id); // this will be your method for retrieving images
  return File(data, "image/jpeg"); // may require a different image type
}

[HttpGet("{id}")]
public async Task<IActionResult> GetImage(int id)
{
  var data = await GetImageById(id); // this will be your method for retrieving images
  return File(data, "image/jpeg"); // may require a different image type
}

Pretty sure you can just specify it as an src parameter in img tags

Rist•14mo ago

Uploading files is more involved, here's an article about it: https://learn.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-7.0

Upload files in ASP.NET Core

How to use model binding and streaming to upload files in ASP.NET Core MVC.

Rist•14mo ago

you can try asking around in #web for more pointers

Aquatic Life•14mo ago

okay thank you for your help, definitely getting me started on the right track also one more questions if i may when you say once i get my byte what do you mean by that

Rist•14mo ago

You should have a method that takes an image id and returns the data from the database based on that id

Aquatic Life•14mo ago

in the model i have this

public byte[] image { get; set; }

public byte[] image { get; set; }

Rist•14mo ago

that is, image data as an array of bytes yeah, that's it

Aquatic Life•14mo ago

gotcha thought so but wanted to make sure

Accord•14mo ago

Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Gaming

Programming

❔ Difficulties with http requests for image(blob) column in mysql