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?

CodePudding user response：

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:

1. Show the current file (optional)
2. Delete the current file (without replacing it)
3. 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.