Display saved image in database and allow user to change image

Asked

Viewed 410 times

1

I am retrieving the database information and checking whether the GIF and Image fields are null or not to display to the user the best option in View Edit.

Anyway, follow the code where I do this check:

<div class="col-xs-12 col-md-4 col-md-offset-3 col-sm-8 col-sm-offset-2">
    <label class="control-label">Logo</label>
    @{
        if (Model.Logo == null)
        {
            <div class="input-group image-preview">
                <input class="form-control image-preview-filename" disabled="disabled" type="text" />
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default image-preview-clear" style="display:none;">
                        <span class="icon-remove"></span> Limpar
                    </button>
                    <div class="btn btn-blue-grey image-preview-input">
                        <span class="icon-folder-open"></span>
                        <span class="image-preview-input-title">Selecionar</span>
                        <input type="file" accept="image/png, image/jpeg" name="img" />
                    </div>
                </div>
            </div>
        }
        else
        {
            string imgbase64 = Convert.ToBase64String(Model.Logo);
            string imgsrc = string.Format("data:image/png;base64,{0}", imgbase64);

            <div class="form-group">
                <div class="btn btn-blue-grey image-preview-input">
                    <span class="icon-folder-open"></span>
                    <span class="image-preview-input-title">Alterar</span>
                    <input type="file" accept="image/png, image/jpeg" name="img" />
                </div>
                <button class="btn btn-light-blue" id="view-img">
                    <span class="icon-eye2"></span> Visualizar
                </button>
            </div>
            <div class="form-group">
                <img src="@imgsrc" width="250" height="200" class="img-thumbnail" />
            </div>
        }
    }
</div>

In case the field is null, I can show the user the option to upload a gif or image normally, and he can change it normally before giving the post. However, the difficulty comes when there is already an image saved in the field and I need to display.

I would like to show the user a way to view the image that is already saved in a popup and if he wants to change the image, change the field to the same that is displayed in the situation where the field comes null.

I already do something with javascript when the field is null, but I can’t see a solution when the information already exists in the database.

javascript c# asp.net-mvc .net front-end

  • Is it really necessary to persist the images in the database? Why not save the file physically and only save its path in the database? would be much simpler and faster and you wouldn’t need to convert anything, just send the image path.

  • If possible also, could you show your object? you have an array of bytes in the attribute "Logo"?

  • I have a byte array yes in the Logo attribute. When I capture the image of a file with Httppostedfilebase I have to convert it to byte array and save it to the database. And yes, it is necessary to save the image.

  • The Ayrton solution is the best alternative, save the file physically and save only the "image name" in the database, the path you decide, you can even leave an external option to configure the path, more if you write to the database, already know that with little time your bank will be slow and to make a backup will take hours.

1 answer

0

To display:

Model:

public class Item
{
    public int Id { get; set; }
    public byte[] Image { get; set; }
}

Controller:

public async Task<ActionResult> RenderImage(int id)
    {
        Item item = await db.Items.FindAsync(id);

        byte[] photoBack = item.Image;

        return File(photoBack, "image/png");
    }

View:

<img src="@Url.Action("RenderImage", new { id = Model.Id})" />

Browser other questions tagged javascript c# asp.net-mvc .net front-end

You are not signed in. Login or sign up in order to post.