The react-360 instructions seem very clear and simple:
<Image source={{uri: "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"}} style={{height:100,width:100}} />
But I've manually uploaded image files to Google Storage, Amazon S3, and Azure Blob Storage. After making them public they all render to a non-react-360 browser img element perfectly, but none of them work in the react-360 browser canvas.
But "https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" is a URL I've found that does work, but uploading that same picture to storage doesn't work.
Even when I get a successful 200 or a partial content 206 result code while experiencing my issue, all I can do to see the image element is to set the background color, the actual image is never visible.
How do I get my JPEG images in Google Cloud Storage to render to Image elements in react-360? Thanks and please :)
https://cloud.google.com/storage/docs/cross-origin
Don't allow CORS:
https://storage.cloud.google.com/[BUCKET_NAME]
Do allow CORS:
https://storage.googleapis.com/[BUCKET_NAME]
https://[BUCKET_NAME].storage.googleapis.com
For S3 you might want to play with the CORS setting on the bucket you are using and add an exception for site you are hitting the bucket from. Take a look at the doc here:
https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
Say your bucket is being accessed by myreact360app.herokuapp.com you could add the following to the buckets CORS policy.
<CORSRule>
<AllowedOrigin>https://myreact360app.herokuapp.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
Related
I am new to AWS. I use Amplify to upload a video file to S3 storage using Flutter. I want to get the URL after uploading a video to use it elsewhere. I use Amplify.Storage.getUrl(key)).url to get the URL. But when I want to go to the link via the browser, it shows the following error there:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>No AWSAccessKey was presented.</Message>
<RequestId>AK49EW70AR8N1NVC</RequestId>
<HostId>Z6FBLU/GABRvJKFX827m3HoIKfVIpU0iXmH3gwSpcu04nNiqqEFjHZGGLn3VyyVNMY7ndK541ro=
</HostId>
</Error>
And also this link doesn't work when I want to play a video using VideoPlayerController.network(videoUrl).
So what is the solution to get a general URL for the video file uploaded that can be used elsewhere? Thanks in advance.
https://github.com/microsoftgraph/microsoft-graph-docs/issues/2624
I am experience the issue as the above.
I am trying to save the content of a page with a reference to an image by calling https://graph.microsoft.com/v1.0/users/{userId}/onenote/pages/{pageId}/content?preAuthenticated=true
Per this - Downloading one note page with image content as HTML
By appending "?preAuthenticated=true" when you do the fetch, it will make the image public.
But when I tried to render the html, it's giving me "Failed to load resource: the server responded with a status of 401 (Unauthorized)".
It appears that something is wrong with the official document: Get OneNote content and structure with Microsoft Graph.
We can see that the service root URL is https://graph.microsoft.com/{version}/{location}/onenote/.
But in any of the samples on this page, the URL is still https://www.onenote.com/api/v1.0/me/notes.
Currently, when you add ?preAuthenticated=true you will get such a URL for a image on this page:
https://graph.microsoft.com/v1.0/users('{userID}')/onenote/resources/{resourceID}/content?publicAuth=true&mimeType=image/png
But when you try to access it in a browser, you will get 401 error Access token is empty.
A workaround is to modify the URL to:
https://www.onenote.com/api/v1.0/resources/{resourceID}/content?publicAuth=true&mimeType=image/png
Then you will get the image.
https://github.com/microsoftgraph/microsoft-graph-docs/pull/4339/files
I think they removed the support for it.
Bit of off topic, but I figured out how to get the image to render.
https://learn.microsoft.com/en-us/graph/api/resource-get?view=graph-rest-1.0&tabs=http
When you call /onenote/pages/{id}/content, the image has a reference to a source like this
src="https://graph.microsoft.com/v1.0/users({userId})/onenote/resources/{resourceId}/$value" along with data-src-type="image/jpeg"
do a get request to this endpoint and you'll the image binary, convert the binary to base64, and then just render the html by replacing the src with base64.
Problem:
I need to be able to remove all link decoration from the download URL that is generated for images in Firebase Storage.
However, when all link decoration is stripped away, the resulting link currently would return a JSON document of the image's metadata.
Context:
The flow goes as follows:
An image is uploaded to Firebase from an iOS app. Once that is done the download URL is then sent in a POST request to an external server.
The server that the URL is being sent to doesn't accept link decoration when submitting image URLs.
Goal:
Alter the Firebase Storage download URL such as it is stripped of all link decoration like so:
https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/[FOLDER_NAME]%[IMAGE_NAME].jpg
Notes:
The problem is twofold really, first the link needs to be manipulated to remove all the link decoration. Then the behavior of the link needs to changed, since in order to return an image, you need ?alt=media following the file extension, in this case .jpg. Currently, without link decoration, using the link with my desired structure would return a JSON document of the metadata.
The current link structure is as follows:
https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/[FOLDER_NAME]%[IMAGE_NAME].jpg?alt=media&token=[TOKEN]
Desired link structure:
https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/[FOLDER_NAME]%[IMAGE_NAME].jpg
The token is necessary for accessing the image depending security rules in place, but can be ignored with the proper read permissions. I can adjust the rules as needed, but I still need to be able to remove the ?alt=media and still return an image.
Building up on Frank's answer, if you access to your associated Google Cloud Platform project, find the bucket in the Storage tab and make this bucket public, you will be able to get the image from here with the format you wish. That is, you will not be accessing through Firebase
https://firebasestorage.googleapis.com/v0/b/example.appspot.com/o/[FOLDER_NAME]%[IMAGE_NAME].jpg
but through Google Cloud Storage, with a link like
https://storage.googleapis.com/[bucket_name]/[path_to_image]
Once in your GCP project Console, access the Storage bucket with the same name as the one you have in your Firebase project. They are the same bucket. Then make the bucket public by following these steps. After that, you will be able to construct your links as mentioned above and they will be accessible with no token and no alt=media param. If you do not want to make the public to everyone, you will be able to play around with the permissions there as you wish.
You could split the url string into two halves by using String.componentsSeparatedByString(_ separator:)
Storage.storage().reference().child(filePath).downloadURL(completion: { (url, error) in
let urlString = url.absoluteString
let urlStringWithoutQueryString = urlString.componentsSeparatedByString("?").first!
})
Calling .downloadURL on a StorageReference will return you that URL, but this method can be used to remove the query string from any URL. String.componentsSeparatedByString(_ separator:) breaks a String into an array of Strings, splitting the string by any occurrence of a given separator, in this case ?.
NOTE this method assumes that ? occurs only once within the url string, which I believe is the case for all Firebase Storage urls.
You should treat the download URL that you get back from Firebase as an opaque string. There's no way to strip the parameters from a download URL without breaking that download URL.
If you want to allow public access to the files in your bucket with simpler URLs, consider making the object in your (or even your entire) bucket public.
The messenger Send API gives me back the response
(#546) The type of file you're trying to attach isn't allowed. Please try again with a different format. error code: 546, error_subcode: 154502
However, if I host the same exact image on Google Cloud instead of Amazon S3, then the image sends fine.
My link to the AWS image:
https://s3.amazonaws.com/paloma-staging-public/files/conversation-step-56-80925.gif
My link to the google cloud image:
https://storage.googleapis.com/callparty/thumbsup.gif
are there any special reasons that a link to an image stored on S3 would not work as an image attachment, but a link to an image stored on google cloud would work?
The answer was that for the AWS link the ContentType of the file was not set.
While uploading to S3 I had to manually set the ContentType of the file appropriately ("image/gif", "image/png" etc.) and for the google cloud storage this must have been automatically set.
This is why the S3 link causes an auto-download, and the google cloud link displays the image in the browser.
I am using google storage to store product images.What i want is to show no-product-image.png image in case product has no image in storage, instead of 404 error code
See GCP documentation about the gsutil web command