Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Mark Drake 134 posts 458 karma points c-trib
    Dec 03, 2020 @ 01:11
    Mark Drake
    0

    Read SVG File From Media Center (Azure Blob Storage Enabled)

    I've updated the post a couple of times. If someone is willing to spend a little extra time helping me reach the optimal solution for rendering the contents of an Umbraco media picker (an SVG File in the Media Center of Umbraco) from Azure Blob Cache, from a razor partial....

    I'm offering to donate $50 to a charity of your choice. (Sorry I can't extend this to more than 1 person, community will have to decide who helped more.)

    Thanks!

    I'm trying to print the contents of an SVG file. This file is obviously uploaded to the Media Center in Umbraco. The only quirk is we are using ImageProcessor and the Azure Blob Cache.

    If it were a local file (and I welcome all criticism) I'd try to do something like this:

    public static class ImageExtensions
{
    public static string PrintSVG(this Image image)
    {
        var filePath = HttpContext.Current.Server.MapPath(image.Url());
        var contents = System.IO.File.ReadAllText(filePath);

        return contents;
    }
}

    Then I could use it my razor views:

    Model.MyImage.PrintSVG();

    And I'd get something like this:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path fill="currentColor" d="M319.4 288.6L224 368l-95.4-79.4C57.1 291.7 0 350.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-72.2-57.1-130.7-128.6-133.8zM208 480H48c-8.8 0-16-7.2-16-16v-41.6c0-50.8 37.1-93 86.4-100.7 89.9 74.8 83.2 69.2 89.6 74.6V480zm208-16c0 8.8-7.2 16-16 16H240v-83.7c6.3-5.3-.2.2 89.6-74.6 49.3 7.7 86.4 49.9 86.4 100.7V464zM32 192c27.3 0 51.8-11.5 69.2-29.7 15.1 53.9 64 93.7 122.8 93.7 70.7 0 128-57.3 128-128S294.7 0 224 0c-50.4 0-93.6 29.4-114.5 71.8C92.1 47.8 64 32 32 32c0 33.4 17.1 62.8 43.1 80-26 17.2-43.1 46.6-43.1 80zM224 32c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96zm48 64h-96c-17.7 0-32 14.3-32 32h160c0-17.7-14.3-32-32-32z"></path>
</svg>

    Can someone point me in the right direction here?

    Copy Link
  • Mark Drake 134 posts 458 karma points c-trib
    Dec 04, 2020 @ 00:57
    Mark Drake
    0

    Would I be able to somehow reference the already existing UmbracoFileSystemProviders.Azure? And using this, translate the Umbraco path /media/abc/def.svg to the correct path needed so OpenFile(string path) works?

    I know very little about C# programming, dependency injection, good backend architecture. Hopefully someone can just help steer me in the right direction. Thanks!

    Copy Link
  • Mark Drake 134 posts 458 karma points c-trib
    Dec 04, 2020 @ 01:22
    Mark Drake
    0

    So I stumbled upon GetFullPath(string path) which returned to me the full URI for the file hosted in Azure.

    So I pass in the Umbraco image URI and get back what I need to then call OpenFile() and get the stream.... to then read the stream ReadToEnd() and return the SVG contents...

    Everything is now working, but could someone who knows their way around this stuff tell me the best way to access AzureBlobFileSystem from a static class?

    I'm writing an extension to Image like this:

    public static class ImageExtensions
{
    public static string PrintSVG(this Image image)
    {
        /* 
            How to access AzureBlobFileSystem 
            without initializing it every time? 
        */
        return "";
    }
}

    Or if there is a better recommendation I'm all ears. But I want to easily, from Razor, inject the contents of an SVG File.

    Copy Link
  • Chriztian Steinmeier 2800 posts 8790 karma points MVP 8x admin c-trib
    Dec 04, 2020 @ 08:08
    Chriztian Steinmeier
    104

    Hi Mark,

    I had a couple of sites fail for this exact reason (I was rendering SVGs by loading them from disk) when the Blob Storage update hit.

    With help from Kenn Jacobsen and Dave Woestenborghs, I've been able to use this chunk of code to fix it:

    public static string LoadFile(string sourceImagePath) {
    try {
        using (var stream = FileSystemProviderManager.Current.MediaFileSystem.OpenFile(sourceImagePath)) {
            using (var ms = new MemoryStream()) {
                stream.CopyTo(ms);
                var bytes = ms.ToArray();
                return Encoding.UTF8.GetString(bytes, 0, bytes.Length);
            }
        }
    } catch (Exception) {
        return string.Empty;
    }
}

    I hope you can figure out the missing using statements (it's part of a Helper file I use) - otherwise let me know and I'll see if I can provide the missing pieces.

    Hope this helps,

    /Chriztian

    Copy Link
  • Mark Drake 134 posts 458 karma points c-trib
    Dec 14, 2020 @ 15:30
    Mark Drake
    4

    Slightly embarassing but I'm finally coming back to solve this. Chriztian this helped me a lot. I was currently repeating code to access Azure Blob Cache on my own and was able to simply use Current.MediaFileSystem. IDK if it's an Umbraco 8 thing, but could not reference the FileSystemProviderManager. That's the only thing I had to remove actually.

    I'd be happy to donate a few dollars to a charity of your choice mate.

    Thank you, and happy and safe holidays mate!

    Copy Link
  • Danine Noble 82 posts 368 karma points
    Sep 24, 2021 @ 14:42
    Danine Noble
    1

    Thanks so much for this, it was a life saver for getting SVGs rendered inline on a new Umbraco project :3

    Copy Link
  • Mike Masey 39 posts 253 karma points MVP 6x c-trib
    Sep 10, 2021 @ 12:34
    Mike Masey
    1

    I think I owe everyone in this thread a drink!

    Just started digging into this very same issue and lo and behold, you wonderful people have saved me potentially hours of digging so thank you very much.

    h5yr

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft