-2

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!

Layer891203
  • 31
  • 5
  • Would you like if any website that you visit was able to store the path of your files? Just consider that most of the file paths include the name of the logged user, even if it's not a sensible information it's more than enough to profile – Christian Vincenzo Traina May 10 '22 at 12:56
  • Yup I know, but what I'm building is essentialy a desktop app, not a web app. I understand the limitations since what I'm doing is basically making a web app and making a desktop app using tauri, which is why I am asking if it is possible or not. – Layer891203 May 11 '22 at 06:56

4 Answers4

0

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.

xijdk
  • 450
  • 4
  • 8
0

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);
    }
  • Data stands for your file path or file URL and fileName stands for File save with name as you want
Mr.Developer
  • 489
  • 2
  • 8
0

Found the answer!

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.

Layer891203
  • 31
  • 5
-1

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.

Voxel
  • 64
  • 9