Downloading image from API to a specific directory - javascript

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

Related

How to Store Image in SQLite Database in React Native

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 .

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.

How can I overcome the browser storage limitations and being able to store more than 500 Mb of files?

I have a PWA application where the user must take several photos while offline. Those are then sent to the server once the user is online again.
How can I overcome the browser storage limitations and be able to store locally all the photos taken?
I'm currently using Indexed DB to store the files. The user will take at least 500 Mb of pictures.
According to browser the storage limits(quota) can vary.
There isn't any limit on a single database item's size. For example in Firefox browsers there is no limit, but there is a built-int UI message asking permission for storing single data larger than 50.0MBs. For example in Firefox you can change the quota:
dom.indexedDB.warningQuota
for Chrome you can check this link
In addition to changing quota messaging that the user must interact with as suggested by other answers here, you could consider alternative approaches by moving your app to node.js and using electron (https://electronjs.org/) to serve your application.
Then you could use a node library to manage your storage outside of the browser, such us with direct file storage that you can then upload when you are connected.

Firebase Storage download to computer

So I am trying to figure out how to download an array of images to a users computer. I have been storing everything through calling my server as I feel more secure using firebase on the server. So on click of a button on the client I can get a return of an array of the images in my firebase storage bucket.
Button click -> call server -> get a return of the array of urls from firebase
Now is there a way to download these to the users computer? Prompt them to choose a file path or download them directly?
I know I can do a single download auto by this:
var a = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body");
a[0].click();
a.remove();
I have tested a single url download that auto downloads on the button click, but I dont feel like I should have to loop through the array one at a time to download all nor do I know if this would work. I would assume it would since a single url works.
Is there a better way?
There is no way to download multiple files in one request from Firebase Storage. If you want to allow downloading of multiple files, you'll have to store them in a single (say zip) file and use the approach you already do today for downloading that file.
Alternatively you can use the Google Cloud Storage API to download a bunch of files. See this answer for more on that, but be aware the the Google Cloud Storage API is meant for use on an app server and not directly in your web page.

Cached newssite packaged app: which local storage to use?

So I'm building a Chrome Packaged App that updates every x hours in the background, checks if the newssite has new articles & adds them to a "local storage"-solution.
That way the user would be able to view the articles when there is no internet connection available. (for instance when he's on the train or so)
Now, I need to actually store this data somewhere locally. I'd like to work with an MVC structure, so a somewhat structured solution would be great. I did some research, and found a number of ways I could do this:
IndexedDB - Key value storage, not so great for images, limited in space
Storage API - Only small amounts of string data, unstructured
FileSystem API - Unstructured
So, I've found 3 ways to store the data, non is really perfect. Am I missing out on a way to solve my problem? Would it be an idea to use IndexedDB for text and structure (it can save objects) and use the FileSystem API to store the images in a sandboxed area?
I would use the chrome.storage API. In an extension or app if you use this API you can store objects unlike the FileSystem api.
You could also consider using the syncFileSystem API that gives you access to save and syncronise data to google drive so your saved data will be available across each device of the user.

Categories