This is a migrated thread and some comments may be shown as answers.

Stream from Azure

5 Answers 20 Views
ImageEditor
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 03 Mar 2021, 05:59 PM

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);
        }
    });

5 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 08 Mar 2021, 06:10 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ianko
Telerik team
answered on 09 Mar 2021, 02:23 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 10 Mar 2021, 09:47 PM

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

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 10 Mar 2021, 10:08 PM

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!");
        });
    });
});
0
Ianko
Telerik team
answered on 11 Mar 2021, 06:04 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ImageEditor
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Lance | Manager Technical Support
Telerik team
Ianko
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or