HowTo upload to my localStorage using <vaadin-upload /> in Polymer

Flow
1

Salam, I need to upload files from the computer to the localStorage. I am building an offline Chrome App using Polymer 2.0, and want to store data locally within the user’s browser for manipulation. Can any one help please?

2

Alaikom Salam, you can get a reference to the file being uploaded from the event.detail.file of for example the “upload-before” event.

upload.addEventListener('upload-before', function(event) {
  const reader = new FileReader();
  reader.onload = function(e) {
    localStorage.data = reader.result;
  }
  reader.readAsDataURL(event.detail.file);
});

You can also utilize [<app-localstorage-document>]
(https://www.webcomponents.org/element/PolymerElements/app-storage/elements/app-localstorage-document) by Polymer

3

Hi Tommi,

When usig this solution for storing using , is there also a way to prevent the element from attempting an actual upload? Or at least prevent the 404 Forbidden error?

4

Hi Timothy,
You can invoke event.preventDefault(); to cancel the upload request.