file-system-access
Version:
File System Access API implementation (ponyfill) with pluggable storage adapters via IndexedDB, Cache API, in-memory etc.
157 lines (149 loc) • 5.81 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>File System Access API Ponyfill Testing</title>
</head>
<style>
td,
th {
border: 1px solid rgb(190, 190, 190);
padding: 10px;
}
td {
text-align: center;
}
tr:nth-child(even) {
background-color: #eee;
}
thead td {
text-align: left;
background-color: #696969;
color: #fff;
}
tbody td:first-child {
text-align: left;
background-color: #d7d9f2;
}
caption {
padding: 10px;
}
table {
border-collapse: collapse;
border: 2px solid rgb(200, 200, 200);
letter-spacing: 1px;
font-family: sans-serif;
font-size: .8rem;
}
</style>
<body>
<script>
if (navigator.serviceWorker) {
navigator.serviceWorker.register('./sw.js', {
// type: 'module',
// scope: './'
})
}
</script>
<script type="module" src="./test.js"></script>
<table id="table">
<caption>Browser storage</caption>
<thead><tr>
<td>Test</td>
<td>Native</td>
<td>Sandbox</td>
<td>Memory</td>
<td>IndexedDB</td>
<td>Cache storage</td>
</tr></thead>
<tbody></tbody>
<tfoot><tr><th>Total</th><td></td><td></td><td></td><td></td><td></td></tr></tfoot>
</table>
<pre>
getOriginPrivateDirectory(),
getOriginPrivateDirectory(import('./adapters/sandbox.js'))
getOriginPrivateDirectory(import('./adapters/memory.js'))
getOriginPrivateDirectory(import('./adapters/indexeddb.js'))
getOriginPrivateDirectory(import('./adapters/cache.js'))
</pre>
<form id="form_showDirectoryPicker"></form>
<form id="form_showOpenFilePicker"></form>
<form id="form_showSaveFilePicker"></form>
<table id="manualTest">
<caption>Manual save & open file(s)/directory</caption>
<thead>
<tr>
<td width="100%">Manual</td>
<td>Testing</td>
</tr>
</thead>
<tbody>
<form>
<tr>
<td>
showDirectoryPicker({
<div title="uses input[type=file][webkitdirectory]">
_preferPolyfill: <input form="form_showDirectoryPicker" name="_preferPolyfill" type="checkbox"><br>
</div>
})
</td>
<td><button form="form_showDirectoryPicker" type="submit">test</button></td>
</tr>
<tr>
<td>
showOpenFilePicker({<br>
<div title="picks files using input[type=file]">
_preferPolyfill: <input form="form_showOpenFilePicker" name="_preferPolyfill" type="checkbox">
</div>
<div title="make it possible to choose more files">
multiple: <input form="form_showOpenFilePicker" name="multiple" type="checkbox">
</div>
<div title="types is required if using this option">
excludeAcceptAllOption: <input form="form_showOpenFilePicker" name="excludeAcceptAllOption" type="checkbox">
</div>
<div title="">
types: <textarea name="types" form="form_showOpenFilePicker" id="$types1" placeholder="[{ accept: { 'image/svg+xml': ['.svg'] } }]" rows=1 cols="45" style="vertical-align: top;"></textarea><br>
</div>
})
</td>
<td><button form="form_showOpenFilePicker" id="$test">test</button></td>
</tr>
<tr>
<td>
showSaveFilePicker({<br>
<div title="saves a blob using a[download]">
_preferPolyfill: <input form="form_showSaveFilePicker" name="_preferPolyfill" type="checkbox">
</div>
<div title="_name is used when not using native file system">
suggestedName: <input form="form_showSaveFilePicker" name="suggestedName" value="example.webp">
</div>
<div title="types is required if using this option">
excludeAcceptAllOption: <input form="form_showSaveFilePicker" name="excludeAcceptAllOption" type="checkbox">
</div>
<div title="">
types: <textarea name="types" form="form_showSaveFilePicker" id="$types2" placeholder="[{ accept: { 'image/svg+xml': ['.svg'] } }]" rows=1 cols="45" style="vertical-align: top;"></textarea><br>
</div>
})
</td>
<td><button form="form_showSaveFilePicker" id="$test">test</button></td>
</tr>
<tr>
<td width="1">
<center>Drag and drop</center><br>
The DataTransfer have implemented <code>DataTransferItem.prototype.getAsFileSystemHandle()</code>
That lets you convert a item into a filesystem handle. This is polyfilled for you.
<pre style="background: #fff; box-sizing: border-box; color: #68615e; display: block; height: 100%; overflow-x: auto; padding: 0.5em;"><code style="height: 100%;">elm.ondragover = <span class="hljs-function"><span style="color: #df5320;">evt</span> =></span> evt.preventDefault()
elm.ondrop = <span class="hljs-function"><span style="color: #df5320;">async evt</span> =></span> {
evt.preventDefault()
for (const dataTransferItem of dataTransfer.items) {
const handle = await dataTransferItem.getAsFileSystemHandle()
console.log(handle.kind)
}
}</code></pre>
</td>
<td>Drop anywhere<br>on page</td>
</tr>
</tbody>
</table>
</body>
</html>