Replace background image with a blob:url

See more:

jQuery

CSS3

File-Upload

AngularJs

Hi,

This seems like it should work no problem, yet it just doesn't.


So I'm using a very funky file / image upload provider GitHub - danialfarid/ng-file-upload: Lightweight Angular directive to upload files with optional FileAPI shim for cross browser support[^]

I am going to use this to allow my customers to choose their own logo and favicon.

They can preview the logo on the page by checking the preview checkbox. This will update the logo and favicon image on the page.

[Code below]

As per the "What I have tried" code comments: The image does not change!

I checked that the url is valid by adding it to the element via chrome inspector. No problems there.

So what am I doing wrong :S

Thanks
Andy

What I have tried:

The logo is on $(".main-logo") as a background image:

$scope.logoChanged = function () {
    Upload.dataUrl($scope.file, false).then((fileUrl) => { 
//fileUrl: "blob:https://d15461a6.ngrok.io/eb87daf2-8581-4a83-a4d4-35ed19e18903"
        if ($scope.file) {
                        
            const logo = $('.main-logo'); // logo div
            if ($scope.previewImage) { //checkbox model
                const url = 'url("'+fileUrl+'") !important';
                logo.css("background-image", url); 
//url: url("blob:https://d15461a6.ngrok.io/eb87daf2-8581-4a83-a4d4-35ed19e18903") !important
                console.log(logo.css("background-image"))
//logo.css("background-image"): url(/Resources/images/ebLicence.png)
            } else {
                logo.css("background-image", logoBgImage);
            }
        }
    });
}