How-To view images inside BC without downloading them

Take a look at our github repository to see how this is solved.

https://github.com/byndit/BeyondAL

What do we want to achieve?

We would like to enter any specific url related to a picture or gif-file and see it directly in our page.

Let's build a small page and use it as an editor to enter the url:

page 50002 "BYD Editor"
{
    UsageCategory = None;
    Caption = 'Editor';
    PageType = Card;

    layout
    {
        area(content)
        {
            grid(Editor)
            {
                ShowCaption = false;
                field(EditorText; EditorText)
                {
                    ApplicationArea = All;
                    MultiLine = true;
                    ShowCaption = false;
                }
            }
        }
    }
    procedure GetText(): Text
    begin
        exit(EditorText);
    end;

    var
        EditorText: Text;
}

A small javascript control addin will help us to create an img element inside our html document.

function LoadFile(url) {
    var fileObject = document.getElementById("fileObject");
    if (fileObject) {
        placeholder.removeChild(fileObject);
    }

    fileObject = document.createElement("img");
    fileObject.id = "fileObject";
    fileObject.style.height = 'auto';
    fileObject.style.width = '100%';
    fileObject.setAttribute('src', url);

    placeholder.appendChild(fileObject);
}

After this we will throw an inlined image (png), encoded in base64.

Give it a try and paste it into your browser:

data:image/png;base64,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

It's pretty simple, isn't it?

So let's:

1. Paste the url into our new editor,

2. throw a request,

3. convert the response into base64,

4. and generate an inlined image encoded in base64.

5. Our control addin will show it in a separate page.

    procedure ViewImagefromURL()
    var
        Base64Convert: Codeunit "Base64 Convert";
        BYDViewer: Page "BYD Viewer";
        BYDEditor: Page "BYD Editor";
        Instr: InStream;
        Base64: Text;
        Url: Text;
    begin
        Clear(BYDEditor);
        BYDEditor.LookupMode := true;
        if BYDEditor.RunModal() <> Action::LookupOK then
            exit;
        Url := BYDEditor.GetText();
        BYDWebRequestMgt.ResponseAsInStr(Instr, BYDWebRequestMgt.PerformWebRequest(Url, Enum::"BYD Web Request Method"::GET));
        Base64 := Base64Convert.ToBase64(Instr);

        Clear(BYDViewer);
        BYDViewer.SetVariables(url, Base64);
        BYDViewer.Run();
    end;

Have fun!