Downloading Image in asp.net mvc

Question

Hello i have button and when i click it this function is called :

public async Task<IActionResult> QrCode(int Id)
        {
            var model = await context.Files.Where(x => x.Id == Id).FirstOrDefaultAsync();
            string qrUrl = CreateQrLink(Id);
            FileDetailsViewModel fileDetails = new FileDetailsViewModel
            {
                Id = model.Id,
                Name = model.Name,
                Author=model.Author,
                Description=model.Description,
                Genre=model.Genre,
                PublishedOn = model.PublishedOn,
                QrUrl = qrUrl
            };
            return View(fileDetails);
          
        }

Here is CreateQrLink function

  public string CreateQrLink(int Id)
        {
            var baseUrl = string.Format("{0}://{1}{2}",Request.Scheme, Request.Host, Url.Content("~"));
            QRCodeGenerator QrGenerator = new QRCodeGenerator();
            var url = Url.Action("DownloadFileFromFileSystem", "Files", new { id = Id });
         
            QRCodeData QrCodeInfo = QrGenerator.CreateQrCode(baseUrl+url, QRCodeGenerator.ECCLevel.Q);
            QRCode QrCode = new QRCode(QrCodeInfo);
            
            Bitmap QrBitmap = QrCode.GetGraphic(60);
            byte[] BitmapArray;
            using(MemoryStream ms = new MemoryStream())
            {
                QrBitmap.Save(ms, ImageFormat.Png);
                BitmapArray = ms.ToArray();
            }
            string qrUri= string.Format("data:image/png;base64,{0}", Convert.ToBase64String(BitmapArray));
            return qrUri;
        }

And Here is View i want to download Image from this view with clicking Download QrCode button,how i can implement it ? I dont save QrLink in database should i save it or something else ? I want to fetch photo from src=Model.QrUrl

@model FileDetailsViewModel
@{ 
    ViewBag.Title = "Qr Code";
}
<div class="row justify-content-center m-3">
    <div class="col-sm-8">
        <div class="card">
            <div class="card-header">
                <h1>@Model.Name</h1>
                <h2>Product Id: @Model.Id</h2>
            </div>
            <div class="card-body text-center">
                <img style="width:450px;height:450px;" src="@Model.QrUrl" />
               
            </div>
            <div class="card-footer text-center">
                <a asp-controller="files" asp-action="Details" asp-route-id="@Model.Id" class="btn btn-primary">Back</a>
                <a href="#" class="btn btn-success">Download QrCode</a>
            </div>
        </div>
    </div>
</div>

maybe you are looking for this: https://stackoverflow.com/a/14011075/3375218 — juanora, Sep 12 '21 at 12:21

score 0 · Answer 1 · answered Sep 13 '21 at 11:58

Your returning type should be of FileResult as follow i.e.

string filePath = string.Format("data:image/png;base64,{0}", Convert.ToBase64String(BitmapArray))

string contentType = ImageFormat.Png.ToString();

FileResult qrUri= this.File(filePath, contentType);
return qrUri;

score 0 · Answer 2 · answered Sep 23 '21 at 11:23

0

Here is solution just simple add download = "Name for downloaded file" href="url of the image"

<a download="@Model.Name" style="width:150px;" href="@Model.QrUrl"class="btn btn-success">Download</a>

answered Sep 23 '21 at 11:23

DevGary

3
3

Downloading Image in asp.net mvc

2 Answers2