I am trying to display an image in Supabase storage bucket on my react app. I console log the public url and it is correct but the image wont show. Also when I got to the public url the image downloads automatically rather than appearing in the browser.
useEffect(() => {
const { data, error } = supabase
.storage
.from('images')
.getPublicUrl(`kk2.tiff`)
setImage(data.publicURL)
}, [])
As written in MDN,
Browser compatibility: No browsers integrate support for TIFF; its value is as a download format
You should convert image to other format
Related
I am using Django Rest Framework and React.js for my application. As part of the application I generate pdf in the backend and then send them to the frontend to be displayed. This functionality is working, if not for the fact that the font in my pdf at the front-end looks different.
In my backend I am using reportlab to generate the pdfs, using buffer = io.BytesIO() as object of reportlab.pdfgen canvas.
Then in my view, I send it via FileResponse. The font family I use id 'Roboto'.
In my frontend I then call the API via Axios and open the pdf with the following code.
const config = {
headers: {
Authorization: `Bearer ${access_token}`
}
}
const { data } = await axios.get(
`/api/my/url/`,
config
)
const file = new Blob([data], { type: "application/pdf" });
//Build a URL from the file
const fileURL = URL.createObjectURL(file);
//Open the URL on new Window
const pdfWindow = window.open();
pdfWindow.location.href = fileURL;
This correctly opens my pdf in a new window.
However, the font of my pdf is changed, the characters look a bit different (and utf-8 symbols are completely changed with other symbols).
When I test my API with Postman, the downloaded pdf looks exactly as it should, so I believe the problem is in the frontend.
I'm not sure what is the cause of the problem, so I would really appreciate help!
I have tried multiple ways and finally created a web camera that uploads towards Cloudinary. Is there a way to take these images and upload them into firebase from Cloudinary? If not, can we create a camera in react.js that can upload to the firebase database?
Not sure about cloudinary because i have never used it but you can add camera in react app and then save the image as blob and later use it to save image in firebase storage.
To open camera use the input element with file type and capture attribute
<input
type="file"
accept="image/*"
capture
/>
On taking an image through camera you can create its URL,
this is in onchange method in file input
const {
target: { files },
} = e;
const imageUrl = window.URL.createObjectURL(files[0]);
Now create a blob from the URL
let resFront = await fetch(imageURL);
let tempblobFront = await resFront.blob();
and then save blob to firebase storage
firebase
.storage()
.ref(put your folder name in firebase storage here)
.child(put name by which you want to save the image)
.put(put your image blob over here i.e tempblobFront)
.then((res) => res)
.catch((err) => {
console.log(err);
}),
You might want to try the cloudinary upload widget: https://cloudinary.com/documentation/upload_widget
It includes camera, local drive, google photos and much more.
My React Native app receives data (products) from an API that contains an array of objects, each object has a link for a picture. There is an option to download all the products for offline view (I'm using redux-persist + realm for that) but the problem is that the pictures itself are not downloaded only the links for them.
What would be the best way for me to download the pictures so that I can attach them to the corresponding products?
There are multiple ways to do that, by a manual way you can download all images as base64 by using their addresses that comes from the API response. you should use JavaScript to download them, let see a JavaScript base64 downloading:
const imageLink = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
fetch(imageLink)
.then(res => res.blob())
.then(data => {
const reader = new FileReader();
reader.readAsDataURL(data);
reader.onloadend = () => {
const base64data = reader.result;
console.log(base64data); // you can store it in your realm
};
});
After downloading each image store it in your realm local database and in usage call it from the realm.
There are other ways like using libraries for catching images. like react-native-cached-image.
I am creating a custom image search application. I have a search text field where the user enters the text and from my flask backend, I am using the Google Image Search API to get the images searched for.
Now, I want to display these images on the front end, I am using React for my front end.
On the button click, I make the fetch call as below,
fetch('localhost/image_search/'+this.state.inputQuery)
.then(res => res.json())
.then(
(result) => {
this.setState({
images: result
})
}
);
I have 2 questions.
How should I be sending the images from the backend? Send them as blobs?
Once I receive the image from the backend, how can they be displayed on the front end?
TL;DR, I am creating my own google search application to search for images on the web, once the user gives the search text, how can I display searched images on the UI.
You can send the images as urls i.e. array of images
['https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2020/02/Google-Image-Search.jpg','https://cdn0.tnwcdn.com/wp-content/blogs.dir/1/files/2020/02/Google-Image-Search.jpg'];
Since, you are setting them to images in state, in your render method:
render(){
return{
{this.state.images.map((x,i)=>{
<img src={x} alt="image" key={i} />
});}
}
}
Hope this helps!
I am a newbie into React. I have been trying to upload file (images, json files etc) to AWS S3 bucket from a reactJS application using ReactS3Uploader (version 4.8.0). I am following this example : https://www.npmjs.com/package/react-s3-uploader
I have added the below code into one of my component where I want the file upload functionality :
<ReactS3Uploader
getSignedUrl={getSignedUrl}
accept="image/*"
s3path="/uploads/test/"
preprocess={this.onUploadStart}
onSignedUrl={this.onSignedUrl}
onProgress={this.onUploadProgress}
onError={this.onUploadError}
onFinish={this.onUploadFinish}
signingUrlHeaders={{ }}
signingUrlQueryParams={{ }}
signingUrlWithCredentials={ true } // in case when need to pass authentication credentials via CORS
uploadRequestHeaders={{ 'x-amz-acl': 'public-read' }} // this is the default
contentDisposition="auto"
scrubFilename={(filename) => filename.replace(/[^\w\d_\-.]+/ig, '')}
inputRef={cmp => this.uploadInput = cmp}
autoUpload={true}
server="http://cross-origin-server.com"
/>
I have also created another component for getSignedUrl (S3SignedUrl.js) as follows (as described here https://www.npmjs.com/package/react-s3-uploader ) :
import React, { Component } from 'react';
import { toast } from 'react-toastify';
import axios from '../../shared/axios';
function getSignedUrl(file, callback) {
console.log('.........Inside getSignedUrl()>>file.nameeeee.........'+file.name)
console.log('.........Inside getSignedUrl()>>file.size.........'+file.size)
const filename = file.name;
const params = {
filename: file.name
//contentType: file.type
};
var headers = {
'Content-Type': 'application/json'
}
axios.post(`/api/link/admin/v1/s3/sign?filename=${filename}`, {headers: headers})
.then(data => {
console.log('data.data.signedUrl>>>>>>>>>>>'+data.data.signedUrl)
callback(data);
return data.data
})
.catch(error => {
console.error(error);
});
}
export default getSignedUrl;
I have a groovy based backend api (springboot application) which creates the s3 signed url in the following format :
{
"signedUrl": “<complete signed url>”,
"uploadPath": “mybucket/apidocs/dev/version/logo/04137a9c-fb60-48dd-ae0f-c53d78e4e379/logo.png",
"expiresAt": 1552083549794
}
I am successfully able to call my groovy /s3/sign url from my react application through (S3SignedUrl.js which uses Axios) but right after that when ReactS3Uploader component tries to upload the file to the AWS S3 bucket, it gives me an error with HTTP 403.
When I see into the network tab (by inspecting within the google chrome), the underlying call being made my ReactS3Uploader component is
PUT https://localhost:3000/apps/gateway/undefined with Http 403
I am not sure what is undefined here within the url. Shouldn’t ReactS3Uploader component automatically be doing a HTTP PUT to the signedURL ?
I do see some fixes in react-s3-uploader version 4.6.2 around undefined in file path when not providing s3path property. https://changelogs.md/github/odysseyscience/react-s3-uploader/
But not sure if it has anything too do with the problem I am getting. By the way I am using using version 4.8.0.
Just to confirm I can successfully upload the file using that SignedURL manually thru curl.
Any help here would highly be appreciated.
Thanks in advance
I know this is an old post, but I've been searching for something similar and came across this.
You should have callback(data.data);.
ReactS3Uploader will redirect to an undefined URL if it's configured to use a getSignedUrl function and is not returned a signedUrl field.