I'm creating a webapp on which I load and display images.
I want to have a feature on which the user can save the images they loaded so they can reload them on future sessions without having to manually set up everything again.
For doing this I have thought of storing the url from the files, but it looks like I can't access the url of files because of security on most browsers. Is there anything I can do to save the url of the files, or something similar so I can reload the files on future sessions?
It will ideally allow to store many files, so saving the local paths to the images is best so it doesn't consume much space.
For the app I'm using angular and tauri.
Anyone can help? Thanks a lot in advance!
EDIT: I found out there is a way to do this on tauri with the dialog module you can find here: https://tauri.studio/api/js/modules/dialog more info here:https://github.com/tauri-apps/wry/issues/87
If anyone reads this and is using electron instead of tauri I've read that the File Object gets added a path property, so you can get it from there.
Thanks everyone for the help!
For storing user-downloaded images, you need a backend. If you don't want to run one, you can try to store images as data: urls in cookies or local storage, but it won't work well.
I recently did one functionality for download file and sharing the code here
downloadFile(data, fileName) {
const urlBlob = window.URL.createObjectURL(data);
const link = document.createElement('a');
link.href = urlBlob;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
You can use cookies to store data. Users can block or remove cookies, but most users (as most users use Chrome) have cookies enabled by default.
You can store a cookie by doing
document.imageurl = "http://example.com";
and access it using
console.log(document.imageurl);
or something similar (variable is stored at document.imageurl)
The variable will stay there when the page is reloaded.