Is there an issue with SVG's?

Hey Guys,
So I’m building a simple plugin that is an action only. It will use the Image URL of an image uploaded through Bubble’s Picture uploader, which is currently for testing is beside a random text element I am using to start an Element Onclick Workflow action. This is where the plugin comes in as it ONLY an action.

Everything works fine except when an svg image is uploaded. When this happens I get a CORS error but never for any other image type. Can anyone point out a solution here? I have looked through a lot of forum posts and no solutions have worked for me.

There is a single field associated with the action which is image. This is set to the images URL that the bubble image type gives. This code fails on the fetch() when the image is an svg but not the other image types.

function(properties, context) {
    let response = context.async(async cb => {
        fetch(properties.image)
        .then((r) => { cb(null, r); }).catch((e) => { cb(e); });
    });
    let blob = context.async(async cb => {
        response.blob()
        .then((r) => { cb(null, r); }).catch((e) => { cb(e); });
    });
    console.log("blob type - " + blob.type);
}

1 Like

SVG’s are like HTML. CORS is a security protocol, and depending on what you’re trying to do with the SVG, it can trigger CORS because it thinks you are trying to modify an external webpage. Read the article I linked above to see more

1 Like

@daniel.bowden did you figure this out? I am getting random cors errors on svgs uploaded. These are simple ones just upload to an option set. I can replace the upload and it sometimes fixes itself

@andrew I did to an extent I was able to load the svg’s, but what I was wanting to do after is still giving me grief. To fix the CORS error on the fetch change:

to:
fetch(properties.image, {cache: 'no-cache'})
This measn the fetch will try to fetch a new version of the resource and not the cached version which is where the CORS error arises from with the SVG.

1 Like