title: Problem When Loading Base65 Image From Table Field
body: <p>Using the following code I am trying to resize a image and to save it into a table into a VARBINARY(MAX) type field.
  When I try to display the saved image, I get nothing on my screen...
  When I try to decode manually the saved image using an online decoder, I get the following error :
  &quot;The MIME of file was detected as “application/octet-stream”, but the decoder displays it as “image/octet-stream”&quot;
  Please help me to save the image into table !
  Thank you very much !</p>
  <p>The sample below is based on :
  <a href="https://www.prowaretech.com/Computer/Blazor/Examples/WebApi/UploadImages" rel="nofollow noreferrer">https://www.prowaretech.com/Computer/Blazor/Examples/WebApi/UploadImages</a></p>
  <p>and the online Base64 decoder I used is :
  <a href="https://base64.guru/converter/decode/image" rel="nofollow noreferrer">https://base64.guru/converter/decode/image</a></p>
  <p>This is the code I am using :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@page "/TestBase64"
  @using ResizeUploadImages.Shared
  @using System.IO
  @using System.Text;
  @using System.Threading;
  @using System.Threading.Tasks;
  @using Microsoft.AspNetCore;
  @inject HttpClient Http
  @inject IJSRuntime JsRuntime
  &lt;table border="1" cellspacing="1" cellpadding="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              @foreach (var item in filesBase64_V1)
              {
              &lt;tr&gt;
                  &lt;td style="text-align: center"&gt;
                      &lt;h6&gt; File Name : &lt;/h6&gt;
                      &lt;h6&gt; "@item.fileName" &lt;/h6&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td style="text-align: center"&gt;
                      &lt;img src="data:@item.contentType;base64,@item.base64data" /&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              }
              &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;div class="custom-file" id="img_V1_div"&gt;
                          &lt;InputFile id="inputFile_V1"  class="custom-file-input" multiple="false" OnChange="OnChange" accept="image/png, image/jpeg, image/gif, image/bmp" /&gt;
                          &lt;label class="custom-file-label" for="inputFile_V1"&gt;Choose file&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          @code {
              List&lt;ImageFile&gt;
              filesBase64_V1 = new List&lt;ImageFile&gt;();
              async Task OnChange(InputFileChangeEventArgs e)
              {
                  filesBase64_V1 = new List&lt;ImageFile&gt;(); // clear the list of files
                  var files = e.GetMultipleFiles(); // get the files selected by the users
                  foreach (var file in files)
                  {
                      var preview_file = await file.RequestImageFileAsync(file.ContentType, 250, 250); // resize the image file
                      var buffer_preview_file = new byte[preview_file.Size]; // allocate a buffer to fill with the file's data
                      using (var stream = preview_file.OpenReadStream())
                      {
                          await stream.ReadAsync(buffer_preview_file); // copy the stream to the buffer
                      }
                      filesBase64_V1.Add(new ImageFile { FileData=buffer_preview_file, base64data = Convert.ToBase64String(buffer_preview_file), contentType = file.ContentType, fileName = file.Name, IMAGE_IS_DISPLAYED = false }); // convert to a base64 string!!
                      await JsRuntime.InvokeVoidAsync("alert", $"{buffer_preview_file}");
                      //I am saving the two variables 
                      // buffer_preview_file
                      //    and
                      // base64data
                      // into a table into two VARBINARY(MAX) fields
                      // Each time when I try to load images from that table, I get nothing 
                      // on my page
                  }
              }
          }</code></pre>
  </div>
  </div>
  </p>