<html>
<head>
<script defer type="module" type="text/javascript">
let directory;
let file;
let worker = new Worker("dlp_files_test_worker.js");
let shared = new SharedWorker("dlp_files_test_worker.js");
let db;
const request = indexedDB.open("db", 1);
request.onerror = (ev) => {
console.log(ev);
};
request.onupgradeneeded = (ev) => {
console.log('db schema create');
const db = ev.target.result;
const objectStore = db.createObjectStore("files", { keyPath: "name" });
};
request.onsuccess = function (e) {
db = e.target.result;
console.log('db opened');
};
shared.port.onmessage = (e) => {
console.log(e.data);
};
shared.port.start();
document.getElementById('reset').addEventListener('click', async () => {
file = null;
directory = null;
})
document.getElementById('save_file_dir').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker({ mode: "readwrite" });
}
if ((await directory.queryPermission()) === 'granted') {
try {
let dirFile = await directory.getFileHandle('test_file.txt', { create: true });
let w = await dirFile.createWritable();
await w.write("This is file content.");
await w.close();
console.log("saved");
} catch (err) {
console.log("Could not write file.");
console.log(err.name + ": " + err.message);
}
}
})
document.getElementById('save_file').addEventListener('click', async () => {
if (!file) {
file = await window.showSaveFilePicker({});
}
try {
let w = await file.createWritable();
await w.write("This is file content.");
await w.close();
console.log("saved");
} catch (err) {
console.log("Could not write file.");
console.log(err.name + ": " + err.message);
}
})
document.getElementById('open_file_dir').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker();
}
if ((await directory.queryPermission()) === 'granted') {
try {
const dirFile = await directory.getFileHandle('test_file.txt');
const blob = await dirFile.getFile();
const copy = await blob.slice(1);
const content = await copy.text();
console.log(content);
} catch (err) {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
}
}
})
document.getElementById('open_file').addEventListener('click', async () => {
try {
if (!file) {
[file] = await window.showOpenFilePicker({});
}
const blob = await file.getFile()
const copy = await blob.slice(1);
const content = await copy.text();
console.log(content);
} catch (err) {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
}
})
document.getElementById('move_file').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker();
}
if ((await directory.queryPermission()) === 'granted') {
try {
const dirFile = await directory.getFileHandle('test_file.txt');
await dirFile.move('moved.txt');
console.log('moved');
} catch (err) {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
}
}
})
document.getElementById('save_file_dir_worker').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker({ mode: "readwrite" });
}
if ((await directory.queryPermission()) === 'granted') {
worker.postMessage({ 'action': 0, 'directory': directory });
}
})
document.getElementById('save_file_worker').addEventListener('click', async () => {
if (!file) {
file = await window.showSaveFilePicker({});
}
worker.postMessage({ 'action': 1, 'file': file });
})
document.getElementById('open_file_dir_worker').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker();
}
if ((await directory.queryPermission()) === 'granted') {
worker.postMessage({ 'action': 4, 'directory': directory });
}
})
document.getElementById('open_file_worker').addEventListener('click', async () => {
if (!file) {
[file] = await window.showOpenFilePicker({});
}
worker.postMessage({ 'action': 2, 'file': file });
})
document.getElementById('save_file_dir_shared').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker({ mode: "readwrite" });
}
if ((await directory.queryPermission()) === 'granted') {
shared.port.postMessage({ 'action': 0, 'directory': directory });
}
})
document.getElementById('save_file_shared').addEventListener('click', async () => {
if (!file) {
file = await window.showSaveFilePicker({});
}
shared.port.postMessage({ 'action': 1, 'file': file });
})
document.getElementById('open_file_dir_shared').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker();
}
if ((await directory.queryPermission()) === 'granted') {
shared.port.postMessage({ 'action': 4, 'directory': directory });
}
})
document.getElementById('open_file_shared').addEventListener('click', async () => {
if (!file) {
[file] = await window.showOpenFilePicker({});
}
shared.port.postMessage({ 'action': 2, 'file': file });
})
document.getElementById('save_file_dir_service').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker({ mode: "readwrite" });
}
if ((await directory.queryPermission()) === 'granted') {
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage({ 'action': 0, 'directory': directory, 'response': true });
})
}
})
document.getElementById('save_file_service').addEventListener('click', async () => {
if (!file) {
file = await window.showSaveFilePicker({});
}
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage({ 'action': 1, 'file': file, 'response': true });
})
})
document.getElementById('open_file_dir_service').addEventListener('click', async () => {
if (!directory) {
directory = await window.showDirectoryPicker();
}
if ((await directory.queryPermission()) === 'granted') {
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage({ 'action': 4, 'directory': directory, 'response': true });
});
}
})
document.getElementById('open_file_service').addEventListener('click', async () => {
if (!file) {
[file] = await window.showOpenFilePicker({});
}
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage({ 'action': 2, 'file': file, 'response': true });
});
})
document.getElementById('file').addEventListener('change', async (e) => {
try {
const copy = await e.target.files[0].slice(1);
const content = await copy.text();
console.log(content);
} catch (err) {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
}
})
document.getElementById('file_worker').addEventListener('change', async (e) => {
worker.postMessage({ 'action': 3, 'file': e.target.files[0] });
})
document.getElementById('file_shared').addEventListener('change', async (e) => {
shared.port.postMessage({ 'action': 3, 'file': e.target.files[0] });
})
document.getElementById('file_service').addEventListener('change', async (e) => {
navigator.serviceWorker.ready.then((registration) => {
registration.active.postMessage({ 'action': 3, 'file': e.target.files[0], 'response': true });
});
})
document.getElementById('private').addEventListener('click', async () => {
const url = new URL(window.location);
url.pathname = "/private";
window.history.pushState({}, "", url);
})
document.getElementById('public').addEventListener('click', async () => {
const url = new URL(window.location);
url.pathname = "/public";
window.history.pushState({}, "", url);
})
document.getElementById('idb_save').addEventListener('change', (e) => {
const save = db.transaction(["files"], 'readwrite')
.objectStore("files")
.put({ 'name': 'test_file.txt', 'file': e.target.files[0] });
save.onsuccess = (ev) => {
// Force history update for restore test.
window.history.pushState({}, "", new URL(window.location));
console.log("saved");
};
save.onerror = (err) => {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
};
});
document.getElementById('idb_open').addEventListener('click', async (e) => {
db.transaction("files")
.objectStore("files")
.get("test_file.txt").onsuccess = async (ev) => {
try {
const file = ev.target.result.file;
const copy = await file.slice(1);
const content = await copy.text();
console.log(content);
} catch (err) {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
}
};
});
document.getElementById('idb_clear').addEventListener('click', async (e) => {
db.transaction(["files"], 'readwrite')
.objectStore("files")
.delete("test_file.txt").onsuccess = async (ev) => {
console.log("cleared");
}
});
document.getElementById('idb_cached').addEventListener('click', async (e) => {
try {
const file = document.getElementById("idb_save").files[0];
const copy = await file.slice(1);
const content = await copy.text();
console.log(content);
} catch (err) {
console.log("Could not read file.");
console.log(err.name + ": " + err.message);
}
});
const registerServiceWorker = async () => {
const registration = await navigator.serviceWorker.register("dlp_files_test_worker.js", { scope: "/" });
if (registration.installing) {
console.log("sw installing");
} else if (registration.waiting) {
console.log("sw waiting");
} else if (registration.active) {
console.log("sw active");
}
navigator.serviceWorker.onmessage = (e) => {
console.log(e.data);
};
}
registerServiceWorker();
</script>
</head>
<body>
<form id="form">
<dev>
<h3>File System Access</h3>
<input type="button" id="reset" value="reset" />
</dev>
<dev>
<h3>File System Access FrameHost</h3>
<input type="button" id="save_file_dir" value="save_file_dir"/>
<input type="button" id="save_file" value="save_file" />
<input type="button" id="open_file_dir" value="open_file_dir" />
<input type="button" id="open_file" value="open_file" />
<input type="button" id="move_file" value="move_file" />
</dev>
<dev>
<h3>File System Access DedicatedWorkerThread</h3>
<input type="button" id="save_file_dir_worker" value="save_file_dir"/>
<input type="button" id="save_file_worker" value="save_file" />
<input type="button" id="open_file_dir_worker" value="open_file_dir" />
<input type="button" id="open_file_worker" value="open_file" />
</dev>
<dev>
<h3>File System Access SharedWorkerThread</h3>
<input type="button" id="save_file_dir_shared" value="save_file_dir"/>
<input type="button" id="save_file_shared" value="save_file" />
<input type="button" id="open_file_dir_shared" value="open_file_dir" />
<input type="button" id="open_file_shared" value="open_file" />
</dev>
<dev>
<h3>File System Access ServiceWorkerThread</h3>
<input type="button" id="save_file_dir_service" value="save_file_dir"/>
<input type="button" id="save_file_service" value="save_file" />
<input type="button" id="open_file_dir_service" value="open_file_dir" />
<input type="button" id="open_file_service" value="open_file" />
</dev>
<dev>
<h3>File API</h3>
<input type="file" id="file" />
</dev>
<dev>
<h3>File API DedicatedWorker</h3>
<input type="file" id="file_worker" value="file_worker" />
</dev>
<dev>
<h3>File API SharedWorker</h3>
<input type="file" id="file_shared" value="file_shared" />
</dev>
<dev>
<h3>File API ServiceWorker</h3>
<input type="file" id="file_service" value="file_service" />
</dev>
<dev>
<h3>Change url / history</h3>
<input type="button" id="private" value="private" />
<input type="button" id="public" value="public" />
</dev>
<dev>
<h3>Download Link</h3>
<a href="index.html" download> download </a>
</dev>
<dev>
<h3>Indexed db</h3>
<input type="file" id="idb_save" value="idb_save" />
<input type="button" id="idb_open" value="open" />
<input type="button" id="idb_clear" value="clear" />
<input type="button" id="idb_cached" value="cached" />
</dev>
</form>
</body>
</html>
Codebase Browser
chromium