Stream from Azure

[Joel]

I need an example on how to pull a file from Azure to view in this control and to limit the functionality in the ImageEditor to not allow upload and download.  I use your PDF Viewer so based on that example, this is what I have:

Controller:

        [HttpGet]
        public async Task<FileStreamResult> DownloadFileFromBlobStorage(int id)

        {

        ...

                                    if (currentContainer.Container != null)
                                    {
                                        BlobContainerClient blobContainerClient =
                                            currentContainer.Container.Name.GetContainer();

                                        if (await blobContainerClient.ExistsAsync())
                                        {
                                            if (await blobContainerClient.BlobExists(currentContainer.Path))
                                            {
                                                Stream stream =
                                                    await blobContainerClient.GetStream(
                                                        currentContainer.Path);
                                                stream.Position = 0;

                                                return File(stream, contentType);
                                            }
                                            else
                                            {
                                                throw new Exception("File not found in Azure container for this record");
                                            }
                                        }
                                        else
                                        {
                                            throw new Exception(
                                                $"Unable to capture Azure container: {currentContainer.Container.Name}");
                                        }
                                    }

        }

 

View:

pdfViewer works... I need help with the imageEditor:

    @if (Model.Item.Extension.ToLower() == Glossary.PdfExtension)
    {
        <div>
            @(Html.Kendo().PDFViewer()
                .Name("pdfviewer2")
                .PdfjsProcessing(pdf => pdf.File(""))
                .Toolbar(toolbar =>
                {
                    toolbar.Items(items =>
                    {
                        items.Add().Name("pager");
                        items.Add().Name("spacer");
                        items.Add().Name("zoom");
                        items.Add().Name("toggleSelection");
                        items.Add().Name("spacer");
                        items.Add().Name("search");
                        items.Add().Name("download");
                        items.Add().Name("print");
                    });
                })
                )
        </div>
    }
    else if (Model.Item.Extension.ToLower() == Glossary.PngExtension)
    {
        <div>
            @(Html.Kendo().ImageEditor()
                .Name("imageEditor")
                .Height(900)

... how to load image from FileStreamResult
                )
        </div>
    }

View Script:

    $(document).ready(function() {
        var pdfViewer = $("#pdfviewer2").data("kendoPDFViewer");

        // pdfViewer is not rendered unless the file extension is PDF
        if (pdfViewer != null) {
            var handlerUrlPdf = "/Pdfs/DownloadFileFromBlobStorage/" + @Model.Item.Id + "/" + @Glossary.Pdf;
            pdfViewer.fromFile(handlerUrlPdf);
        }

        var imageViewer = $("#imageEditor").data("kendoImageEditor");

        if (imageViewer != null) {
            var handlerUrlPng = "/Pdfs/DownloadFileFromBlobStorage/" + @Model.Item.Id + "/" + @Glossary.Image;
            imageViewer.fromFile(handlerUrlPng);
        }
    });

[Lance | Manager Technical Support]

Hello Joel,

First, I wanted to reply and apologize for the late ticket response. Today is a company holiday and we're working on reduced capacity.

The approach you requested doesn't appear to work, even using a known image stream (i.e. it doesn't matter if it's from an Azure Blob source).

For example:

public IActionResult Image()
{
	var path = _hostingEnvironment.ContentRootPath + "/AppData/image.png";
	var stream = new FileStream(path, FileMode.Open);

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

Next Steps

I have escalated this case to the ASP.NET development team to investigate further. Someone will reply from that team over the course of the night (they're in the UTC +2 time zone).

Thank you for your patience and understanding.

Regards,
Lance | Manager Technical Support
Progress Telerik

[Ianko]

Hi Joel,

You can use the drawImage method and the drawCanvas in order to render an image fetched by an action. However, you will need to pass the base64 representation of the stream and not the FIleStream directly. I am attaching a sample project for you to examine. 

Regards,
Ianko
Progress Telerik

[Joel]

Your attached project has gotten me most of the way.  I can display an image in the control.

Here is the script that is working for me:

<script>
    $(document).ready(function() {
        $.get("@Url.Action("DownloadImageFromBlobStorage", "Pdfs", new { @Model.Item.Id})").then(function (data) {
            var imageEditor = $("#imageEditor").data("kendoImageEditor");

            imageEditor.drawImage(data).done(function (image) {
                imageEditor.drawCanvas(image);
            }).fail(function (ev) {
                alert("Something went wrong!");
            });
        });
    });

 

However, I'm not great at javaScript so it is a bit confusing how I will run the above script to load the imageEditor only when the stream is an image and the pdfViewer only when the stream is pdf.  Is there a way to separate this script out into its own function so it can be more encapsulated?  Can I tie into the Execute event like this?

I do have separate MVC calls for each document type:  DownloadPdfFromBlobStorage & DownloadImageFromBlobStorage

 

   @(Html.Kendo().ImageEditor()
        .Name("imageEditor")
        .Height(900)
        .Events(evt => evt.Execute("onLoadImage")))

function onLoadImage(e)
{
    var imageEditor = $("#imageEditor").data("kendoImageEditor");
}

 

We're closer.  Thanks in advance for your help,

Joel

[Joel]

This script is working which is nice... but, I'd much rather have a clear if/then statement that defines which script applies to each control.  Do you have a good refactor to help me out?  I believe this works because up above I load either the imageEditor or the pdfViewer based on the incoming Model.  Maybe I should consider having separate Views.  That is an option.

$(document).ready(function() {

    // pdfViewer is not rendered unless the file extension is PDF
    var pdfViewer = $("#pdfViewer").data("kendoPDFViewer");
    if (pdfViewer != null) {
        var handlerUrlPdf = "/Pdfs/DownloadPdfFromBlobStorage/" + @Model.Item.Id;
        pdfViewer.fromFile(handlerUrlPdf);
    }

    $.get("@Url.Action("DownloadImageFromBlobStorage", "Pdfs", new {@Model.Item.Id})").then(function(data) {
        var imageEditor = $("#imageEditor").data("kendoImageEditor");

        imageEditor.drawImage(data).done(function(image) {
            imageEditor.drawCanvas(image);
        }).fail(function(ev) {
            alert("Something went wrong!");
        });
    });
});

[Ianko]

Hi Joel,

I would rather suggest you having separate views. That would make this cleaner. Note that the major differentiator is on the backend - PDF should serve a FileStream, whereas, Image should be served as base64 string.

Regards,
Ianko
Progress Telerik