Display image saved in the database and allow the user to change the image

Navigation
0

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

Anyway, here's the code where I make 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 display the user the option of normally uploading a gif or image, 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 it.

I would like to display the user a way to view the image that is already saved in a popup and if it wants to change the image, change the field to the same one 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 not see a solution when the information already exists in the database.

    
asked by anonymous 28.08.2017 / 17:41

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})" />
    
28.08.2017 / 22:26
queries on Ionic 3 using AngularFire2 Angular 2 has the possibility to make a string be interpreted as html?