Is it possible to save html element changes offline in NW.js?

Question

I am working on an simple app which allows user to upload images and videos while doing so automatically generates a < div > for each content that was uploaded and wraps it. Each uploaded picture stays next to the previous one specially stylized.

What I want is to after every upload I make (image or video), it stays there even if I close my app. And if I remove it in the future, naturally it would dissapear.

Is it possible to do it without any local database, if not what is the best way to do it with a database and which module to use?

//image upload

function uploadImage(file) {

  var reader = new FileReader();
  var div_img = $('<div class="content"></div>');
  reader.onload = function(event) {

    img_url = event.target.result;


    div_img.html(('<img src="' + img_url + '" onmousedown="return false" />'));
    div_img.appendTo('#wrapper');

  }

  reader.readAsDataURL(file);

}

$("#the-image-file-field").change(function() {

  uploadImage(this.files[0])
});


//video upload

function renderVideo(file) {
  var reader = new FileReader();
  var div_vid = $('<div class="content_video"></div>');
  reader.onload = function(event) {


    vid_url = event.target.result;


    div_vid.html(('<video controls><source src="' + vid_url + '" type="video/mp4" /> '));

    div_vid.appendTo('#vid_container');
  }


  reader.readAsDataURL(file);
}

$("#the-video-file-field").change(function() {

  renderVideo(this.files[0])
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type='file' id="the-image-file-field" accept="image/*" />
<input type="file" id="the-video-file-field" accept="video/*" />

<div id="wrapper" class="wrapper">
  <div id="vid_container"></div>

</div>


<script src="javascripts/uploader.js"></script>

Answer 1

Interesting question. There is no correct answer to your question without understanding all the details of your app, but here is some information.

Question: Is it possible to do this without a local database?

Answer: Yes, it is possible but understand the consequences.

First, consider your goal. You want the user to have access to the image/file in your application. There are two main ways this can be done.

• The user uploads the image/file to your server (or a binary representation of the image/file)
• The user uploads the path to the image/file on their local machine to your server. Whenever your app requests this image it will know where to find it on their local machines (assuming the path didn't change)

As you can imagine there are a number of consequences with either, but that is a bit off topic for this question.

Question: How do I persist uploads even if I close the app?

Answer: This will be dependent on how you handle the first part, but overall this is a much easier task. This could be easily accomplished using a front-end framework like jQuery, Angular, or many others. What you will want to do is query your database for the users current collection of images/files, and then for each image/file render it in a particular way on the page. The actual code for this will vary greatly depending on the framework your choose, but overall the idea of how to do this will be the same.

Other Considerations: If you choose to store all the image/file data on your servers, this could turn into a scaling issue in the future. What is the benefit of doing it that way instead of using one of the many local storage options built for nwjs (storage options)?

Also, not sure what OS you are running but definitely take a look in your nwjs projects folder. If you have a mac it will most likely be located at the following path:

• Users/YourName/Library/Application Support/Your_Project_Name (matches package.json name)

Many people are unaware of the built in functionality already included with nwjs and that is always a good place to start searching around.

Answer 2

A simple way to do this is to store the metadata of the users changes (which images, what order etc.) in localstorage. On startup you then just iterate through the metadata and re-create the html to look like before.

Since you are using nw.js you don't have to worry about limitations on localstorage since you can set the size in the manifest:

https://github.com/nwjs/nw.js/wiki/manifest-format

(look for dom_storage_quota)

Internally nw.js uses sqldatabse for localstorage so this is really just a painless way to get cheap data storage.