1

I'm building an application in Angular 8 with PWA. It is a Travel Refund where the user sends pictures of his invoices through the app. Then saves in a database when online and if the user is offline, the app saves in IndexedDb. When online again, the app look for pending uploads in IDB and then does. I don't want to save the image itself 'cause IDB has a limit cache memory in some browsers, so I chose to save the image path so that the application could find it later.

That's when my problem appears, I try to save in IDB the image full path to get it later when online, but some browsers don't allow it for security reasons. So, there is another way to do it?

piedpiper
  • 520
  • 5
  • 18
hilario_cassio
  • 35
  • 1
  • 6

1 Answers1

0

As mentioned by talhature it is not possible to save the URL. This is also due to security reasons, a website should not be able to read the file system.

You can retrieve a file like this:

HTML:

<input type="file" name="file" id="file" (change)="onFileChanged($event)"/>

public files: any[];

contructor() { this.files = []; }

onFileChanged(event: any) {
  this.files = event.target.files;
  this.files.forEach(file => setData(file));
}

If you are able to persist the blobs to localstorage you can use online and offline events to distinguish:

 let online = window.navigator.onLine;

 function handleOnline() {
   const data = JSON.parse(localStorage.getItem('data'));
   
   // post to backend

   localSorage.setItem('data', null);
   online = true;
 }

 function setData(data) {
   if (online) {
     
   // post to backend
   
   } else {
      localSorage.setItem('data', JSON.parse(data))
   }
 }

 window.addEventListener('online',  handleOnline);
 window.addEventListener('offline', () => online = false);
mchl18
  • 2,119
  • 12
  • 20