Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix image url with cloud providers #78

Merged
merged 2 commits into from Mar 3, 2023
Merged

Conversation

ovieokeh
Copy link
Contributor

What does it do?

This PR updates the StrapiUploadAdapter.js plugin to check for a full image url before prefixing backendUrl to an uploaded image url.

Why is it needed?

On Strapi instances with a cloud provider configured, images uploaded via the editor have a malformed URL. This breaks the editor preview as well.

The cause of the problem is that the StrapiUploadAdapter plugin automatically prepends every image upload url with the backendUrl variable resulting in image urls that look like this —

![alt](https://strapi-server-url.comhttps://path-to-image.png)

Strapi Cloud Upload provider plugins like @strapi-community/strapi-provider-upload-google-cloud-storage and @provider-upload-aws-s3 return a fully formed url so there's no need to prepend the backendUrl.

Related issue(s)/PR(s)

#72

@ahsetiaki
Copy link

@ovieokeh is it okay to use "https" as a checker? how if someone decide to use local provider and deploy it into remote https server

@ovieokeh
Copy link
Contributor Author

@ovieokeh is it okay to use "https" as a checker? how if someone decide to use local provider and deploy it into remote https server

You're right that's not a robust validation. I've switched to using the response[0].provider property to do the check. The backendUrl is only added if it's a local provider instance.

What do you think? @ahsetiaki

@ahsetiaki
Copy link

ahsetiaki commented Feb 28, 2023

have you tested that? honestly I can't comment further because I don't know about response array, the values inside it, and the possible value of provider. I don't know how to test it. Thank you very much btw.

@ovieokeh
Copy link
Contributor Author

ovieokeh commented Mar 1, 2023

have you tested that? honestly I can't comment further because I don't know about response array, the values inside it, and the possible value of provider. I don't know how to test it. Thank you very much btw.

Yes it's tested and seems to work fine. But I only tested with the @provider-upload-aws-s3 provider so can't say if it works for Cloudinary as well (it should though as the provider property seems return the expected value for both local and aws-s3)

@ahsetiaki
Copy link

@ovieokeh as long as this PR haven't merged, I think we have to clone it as plugin and customize by ourself, thanks btw

@nshenderov nshenderov merged commit 4b3361e into nshenderov:master Mar 3, 2023
let urls = { default: defaultUrl };
let keys = Object.keys(formats).sort(
(a, b) => formats[a].width - formats[b].width
);
keys.map((k) => (urls[formats[k].width] = backendUrl + formats[k].url));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't there a mistake here too? I'm having the same problem now for the src set.

srcset="http://localhost:1337https://SPACE_PATH/870fd27ba154892bc07c9164bbbab4a2.png 64w"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image url broken when I integrate with strapi-provider-upload-google-cloud-storage
4 participants