JSFiddle - React, Tailwind, and code Playground
HTML
<input id="f" type="file">
persistently stored:
<img src="filesystem:http://fiddle.jshell.net/persistent/sad.jpg " />
JavaScript
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL;
window.storageInfo = window.storageInfo || window.webkitStorageInfo;
var fs = null; // Cache filesystem for later.
function onChange(e) {
e.stopPropagation();
e.preventDefault();
var files = $(this)[0].files;
console.log('files:', files);
if (files.length === 1) {
var file = files[0];
// Capture current iteration's file in local scope for the getFile() callback.
(function(f) {
fs.root.getFile(f.name, {
create: true,
exclusive: true
}, function(fileEntry) {
fileEntry.createWriter(function(fileWriter) {
fileWriter.write(f);
console.log(fileEntry.toURL());
$('input#f').after('<img src="' + fileEntry.toURL() + '" />');
}, errorHandler);
}, errorHandler);
})(file);
}
else {
console.error('only 1 file at a time can be submitted');
}
}
function errorHandler(e) {
console.error('error: ', e);
}
$('input[type="file"]').on('change', onChange);
function onInitFs(fsys) {
fs = fsys;
console.log('granted local file system storage size:' + window.storageInfo.queryUsageAndQuota(storageInfo.PERSISTENT, function() {}, function() {}));
}
window.storageInfo.requestQuota(PERSISTENT, 10 * 1024 * 1024, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});
window.resolveLocalFileSystemURL("filesystem:http://fiddle.jshell.net/persistent/sad.jpg", function(fileEntry) {
console.log('file persistently stored on Martijn"s computer:', fileEntry);
});