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.
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 am building a PDF in JSPDF with react. I am adding an image to this pdf using takescreenshot() from ArcGIS API (it is an image of a map). After creating the PDF I can download it no problem, but if I upload the PDF to firebase storage and automate an email with the downloadURL from firebase storage, the PDF no longer has the image in it.
I'm assuming there is some issue with firebase incorporating the image due to CORS, but I'm curious if anyone else has run into something like this.
Here is my code:
var blob = pdf.output('blob');
var id = uuid();
var storageRef = firebase.storage().ref(`${userInfo.currentCompany}`);
var storageRefName = `${moment().format('YYYY-MM-DD')}_${userInfo.currentAccount}.pdf`;
var noSpaceRef = storageRefName.replace(/\s/g, '_');
var uploadTask = storageRef.child(noSpaceRef).put(blob);
uploadTask.on('state_changed', (snapshot) =>
{
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(progress);
}, function (error)
{
console.log(error);
}, () =>
{
uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) =>
{
this.sendEmail(downloadURL)
});
});
Any help is appreciated!
When in doubt, make sure you're still passing the correct props. My blob was technically different when I would hit my download PDF button compared to email PDF button.
Classic.
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.
So I've successfully downloaded my image file to my MongoDB using Multer and Multer-Gridfs-Storage, but I'm having trouble retrieving it.
When I tried to retrieve the data using GridFS-Stream, it came back like this previous question:
GridFS : How to display the result of readstream.pipe(res) in an <img/> tag?
When I use this code, what's sent to my Front-End is only the first chunk in the collection, but it's actually usable.
const readstream = gfs.createReadStream({ filename: files[0].filename });
readstream.on('data', (chunk) => {
res.send({ image: chunk.toString('base64') })
})
How am I able to get back all of the chunks? Should I give up and start using GridFSBucket?
I ended up trying this and it work!
let data = ''
readstream.on('data', (chunk) => {
data += chunk.toString('base64')
})
readstream.on('end', () => {
res.send(data)
})
I am trying to implement a functionality where I can store a local public image of react folder in React state, after eons of trying i am not able to do it.
Is it possible, if yes can you point me in the right direction
You can convert the images to base64 and then use fetch api to convert them to blob to upload. something like this:
var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))