HTML5: Offline upload of images

## application.js
/*global $ */

$(function () {
  'use strict';

  var SIZE = 100 * 1024 * 1024; // 100 MB

  var errorFct = function (e) {
    console.error(e);
  };

  var getFileSystem = function (successFct) {
    navigator.webkitPersistentStorage.requestQuota(SIZE, function () {
      window.webkitRequestFileSystem(window.PERSISTENT, SIZE, successFct, errorFct);
    }, errorFct);
  };

  var createTempName = function () {
    return 'temp.name.dummy.jpg';
  };

  var addToSyncQueue = function (filename) {
    // adding to sync queue
    console.log('Adding to queue', filename);
  };

  var showImage = function (fileName) {
    var src = 'filesystem:' + window.location.origin + '/persistent/' + fileName;
    var img = $('<img />').attr('src', src);
    $('.js-image-container').append(img);
  };

  var readImage = function (fileName, successFct) {
    getFileSystem(function (fileSystem) {
        fileSystem.root.getFile(fileName, {}, function (fileEntry) {

          fileEntry.file(successFct, errorFct);

        }, errorFct);
      }
    );
  };

  var writeSuccessFull = function () {
    addToSyncQueue(fileName);
    showImage(fileName);
  };

  function writeImage(fileName, file) {
    getFileSystem(function (fileSystem) {
      fileSystem.root.getFile(fileName, {create: true}, function (fileEntry) {

        fileEntry.createWriter(function (fileWriter) {
          fileWriter.onwriteend = writeSuccessFull;

          fileWriter.onerror = errorFct;

          fileWriter.write(file);

        }, errorFct);

      });
    });
  }

  $(document).on('change', '.js-image-upload', function (event) {

    var file = event.target.files[0];
    var fileName = createTempName(file);

    writeImage(fileName, file);
  });

});

## index.html
<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="application.js"></script>
    <title></title>
</head>
<body>
    <input type="file" accept="image/*" class="js-image-upload"/>
    <div class="js-image-container"></div>
</body>
</html>
	/global $ /

	$(function () {
	'use strict';

	var SIZE = 100 * 1024 * 1024; // 100 MB

	var errorFct = function (e) {
	console.error(e);
	};

	var getFileSystem = function (successFct) {
	navigator.webkitPersistentStorage.requestQuota(SIZE, function () {
	window.webkitRequestFileSystem(window.PERSISTENT, SIZE, successFct, errorFct);
	}, errorFct);
	};

	var createTempName = function () {
	return 'temp.name.dummy.jpg';
	};

	var addToSyncQueue = function (filename) {
	// adding to sync queue
	console.log('Adding to queue', filename);
	};

	var showImage = function (fileName) {
	var src = 'filesystem:' + window.location.origin + '/persistent/' + fileName;
	var img = $('<img />').attr('src', src);
	$('.js-image-container').append(img);
	};

	var readImage = function (fileName, successFct) {
	getFileSystem(function (fileSystem) {
	fileSystem.root.getFile(fileName, {}, function (fileEntry) {

	fileEntry.file(successFct, errorFct);

	}, errorFct);
	}
	);
	};

	var writeSuccessFull = function () {
	addToSyncQueue(fileName);
	showImage(fileName);
	};

	function writeImage(fileName, file) {
	getFileSystem(function (fileSystem) {
	fileSystem.root.getFile(fileName, {create: true}, function (fileEntry) {

	fileEntry.createWriter(function (fileWriter) {
	fileWriter.onwriteend = writeSuccessFull;

	fileWriter.onerror = errorFct;

	fileWriter.write(file);

	}, errorFct);

	});
	});
	}

	$(document).on('change', '.js-image-upload', function (event) {

	var file = event.target.files[0];
	var fileName = createTempName(file);

	writeImage(fileName, file);
	});

	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="application.js"></script>
	<title></title>
	</head>
	<body>
	<input type="file" accept="image/*" class="js-image-upload"/>
	<div class="js-image-container"></div>
	</body>
	</html>