Inserting image into input type="file" using blob

Question

I would like to create a data editing page for an animal object in my project written in C# MVC Core. I want to overwrite input type="file" tag with image stored in the database. Here is a class for animal. Properties for the photo is: ImageData, FileName, ContentType.

    public class Animal
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string Sex { get; set; }
        public int Age { get; set; }
        public string Breed { get; set; }
        public DateTime DateOfPost { get; set; }
        public Guid UserId { get; set; }
        public byte[] ImageData { get; set; }
        public string FileName { get; set; }
        public string ContentType { get; set; }
        public virtual User User { get; set; }
    }
}

I want to do this by using Blob in javascript. Here is my code in view:

<script>
    const blob = new Blob([@Animal.ImageData], { type: '@Animal.ContentType' });

    const file = new File([blob], '@Animal.FileName', { type: '@Animal.ContentType ' });

document.querySelector('input[type="file"]').files = file;
</script>

I am getting that error in my browser (https://i.stack.imgur.com/EhsKT.png) (https://i.stack.imgur.com/P8bnj.png)

I tried to resovle this problem with System.Linq.Enumerable.AsEnumerable ans also with System.Linq.Enumerable.ToArray but every time i get same error. Does anyone know how to fix this?

Initially I'd voted to close [as a duplicate](https://stackoverflow.com/q/12178495/328193) as it looked like you're trying to output a byte array to the page as a Base64 string, but... are you? What are you trying to do at all here? If the file is already on the server, why are you outputting it to the client just to upload it to the server? Can you elaborate on the overall goal? — David, Jan 06 '23 at 19:27
I want to create a edit view to each Animal in my web app. I want to load into form all data about specific Animal from database so that the client can see what he is editing. But when i want to load image into input type="file" i get in javascript error that i included in my question — deepfish, Jan 06 '23 at 19:41

score 1 · Accepted Answer · answered Jan 06 '23 at 19:38

I want to overwrite input type="file" tag with image stored in the database.

No you don't.

Take a step back and consider what that means, even if you could get it to work. It means that every time someone loads this page, you send them the entire file without intending to display it. They don't use it at all. Then, making no changes to that field, they post the form which sends the entire file back to the server.

That's a lot of network traffic to provide the server with data it already has, and provide the client with data they're not using.

Take a different approach. Consider for example an HTML structure like this:

<img src="path_to_your_file">
<button>Delete?</button>
<input type="file" name="myFile">

Basically you have three elements for your three operations:

Show the current file (optional)
Delete the current file (without replacing it)
Replace the current file with a new file

The only reason the client would have to upload a file is the third scenario, rather than trying to force some way for the client to re-download and re-upload the file in every scenario.

Clearly you can modify the HTML to fit your needs, style it however you like, change the functionality however you like, etc. But the overall point is to keep these operations separate from one another and only use the one(s) you need to use.

Inserting image into input type="file" using blob

1 Answers1