How to Store Image in SQLite Database in React Native - javascript

I have taken an image with Image Picker and want to store it in sqlite database and retrive it. Should I store uri which I got in reponse from Image Picker or what should I do,
Thanks!

My honest opinion is to use a dedicated storage space for your images, and store the url and the image meta data in your database.
You can store your image as a base64, however this will take up a lot of space in your database, and the conversion to base64 and back to binary may even make the image size bigger.
Stick to a storage solution for your image (Both Google and AWS offers them), and save the url in your database.
Regards
Stephan Bakkelund Valois

you have to save image in local storage and save uri of that in SQLite. that's way is the better performance .

Related

Can we write to file from React?

Currently I'm developing a React web application that needs to store some data from user in the client side and also this data are Important and should not swap suddenly so we can't use Indexed DB.
I just thought about using a file to store data as JSON but in a file that can be stored in user computer and also access to read and write it from React.
The best way to work with that is using localStorage.
Cookies are mainly for reading server-side, and local storage can only be read by the client-side. Other point is saving data, a big technical difference is the size of data you can store, localStorage give you more space.
Check it out https://medium.com/#siobhanpmahoney/local-storage-in-a-react-single-page-application-34ba30fc977d
What you're looking for is the in-browser sessionStorage or localStorage. Having the ability a JSON file to a user's computer would be a major vulnerability and is not possible from a browser/client. I suppose you could create one and trigger a download for them to accept–and then have them subsequently re-upload it when you need the data again. But, I'd argue that session/localStorage is more what you're looking for.

Disadvantages/limitations with local storage for a diary app

I am trying to create a diary app with entries stored in local storage. I wondered what the limitations/disadvantages might be when it comes to the local storage of these written and image entries- any ideas would be helpful
Thanks
There are a couple.
Local Storage has a modest size limit - around 5 MB. If a user writes a whole lot, or pastes in large amounts of text, they may find themselves running into the limit, breaking the application. Consider using IndexedDB instead, which is fundamentally similar to Local Storage with regards to what you want, except that it has a much, much larger size limit. To easily interact with IndexedDB, consider using localForage.
If the data is stored on the client, if the client loses their browser data, their stored text will be lost too. Storing the data on a server too would be more reliable.

Downloading image from API to a specific directory

I aim to create a program in ReactJS that works Offline. That is, the program will have the information stored locally and only when it is necessary to update, will be connected to the internet and download it using an API.
At this point, I chose to store the information coming from the API in LocalStorage.
componentDidMount(){
fetch('api.url')
.then(response => response.json())
.then(data => localStorage.setItem('fromAPI',JSON.stringify(data)))
}
My question is: the API in question will have photos, and it will be necessary to download these photos to store them locally. How can I store them locally?
What do you mean store them locally?
Your web app cannot access user's hard drive as it pleases. You can download resources with download prompt, or simply to user's set download folder, but to reuse them, you'd need the user to give you upload access to them (with input[type=file]). I guess this is not what you're looking for.
Alternatively, you can store files within localStorage, presumably base64-encoded. (Altho I think utf16 might work as well.) Just beware of localStorage's size limitation, around 5 - 10 MB depending on browser.
I did not understand if you want to save the image URL?
If you don't - you can save the base64 of the image,
read about how to convert the image to base64.
Here is a nice package you can use:
https://www.npmjs.com/package/image-to-base64

What Azure blobService method is most appropriate for storing JSON in JavaScript?

This is the documentation I've been following,
https://azure.github.io/azure-storage-node/BlobService.html
I have some short JSON strings that need to go into the BLOB storage for longer term and more efficient storage. I am unsure where they would be stored as block, page, or append BLOBs, and whether or not to upload from text, from a stream, or a local file.
Considering your requirement for "for longer term and more efficient storage" , all the method would be apt as it fills the criteria for durable storage. But considering that you have a small size json string which you want to store , i would suggest you to use page blob.
Page blobs are a collection of 512-byte pages optimized for random read and write operations. To create a page blob, you initialize the page blob and specify the maximum size the page blob will grow. To add or update the contents of a page blob, you write a page or pages by specifying an offset and a range that align to 512-byte page boundaries. A write to a page blob can overwrite just one page, some pages, or up to 4 MB of the page blob.
Azure virtual machine disks are backed by page blobs. Azure offers two types of durable disk storage: premium and standard. Premium storage for page blobs is designed for Azure virtual machine workloads that require consistent high performance and low latency.
For further reference please go through following link
https://learn.microsoft.com/en-us/rest/api/storageservices/understanding-block-blobs--append-blobs--and-page-blobs

Let user upload an image into a database using JavaScript

I looked for this question, but I could not find it. Essentially, I have an html form and I want to let the user upload an image into a web database using JavaScript.
Is there a way to accomplish this?
Yes, use a file input element, or if you're using AJAX use FormData.
As an aside, typically once you get the file to the server, you only store the storage path in the db, the image itself is stored on disk; DB aren't particularly good at storing binary data.

Categories