Skip to content

Commit

Permalink
Release 0.1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmywarting
jimmywarting committed Jul 17, 2020
1 parent f1feb79 commit 4b7ab42
Show file tree
Hide file tree
Showing 36 changed files with 780 additions and 385 deletions.
45 changes: 23 additions & 22 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Native File System adapter (polyfill)
# Native File System adapter (ponyfill)

> This is an in-browser file system that follows [native-file-system](https://wicg.github.io/native-file-system/) and supports storing and retrieving files from various backends.
Expand All @@ -13,20 +13,31 @@ This polyfill/ponyfill ships with 5 filesystem backends:
* `Cache storage`: Stores files in cache storage like a request/response a-like.

The api is designed in such a way that it can work with or without the ponyfill if you choose to remove or add this.<br>
It's not trying to interfear with the changing spec by using other arguments/properties that may conflict with the feature changes to the spec. A few none spec options are prefixed with a `_`
It's not trying to interfear with the changing spec by using other properties that may conflict with the feature changes to the spec. A few none spec options are prefixed with a `_`

( The current minium supported browser I have choosen to support is the ones that can handle import/export )<br>
( Some parts are lazy loaded when needed )

### Using

```js
import { chooseFileSystemEntries, FileSystemDirectoryHandle }
import { showOpenFilePicker, getOriginPrivateDirectory }
from 'https://cdn.jsdelivr.net/gh/jimmywarting/native-file-system-adapter/src/es6.js'

export {
showDirectoryPicker,
showOpenFilePicker,
showSaveFilePicker,
,
FileSystemDirectoryHandle,
FileSystemFileHandle,
FileSystemHandle,
FileSystemWritableFileStream
}


// pick a file
const fileHandle = await chooseFileSystemEntries({
type: 'open-file', // default
accepts: [
{ extensions: ['jpg'] },
{ extensions: ['webp'] },
Expand All @@ -40,40 +51,30 @@ const fileHandle = await chooseFileSystemEntries({
const file = await fileHandle.getFile()

// store a file
const folderHandle = await FileSystemDirectoryHandle.getSystemDirectory({
type: 'sandbox',
_driver: 'native', // native|sandbox|memory|indexeddb|cache
_persistent: true, // option for when using blink's sandboxed storage (default=temporary)
})

const fileHandle = await folderHandle.getFile(file.name, { create: true })
const folderHandle = await getOriginPrivateDirectory()
const fileHandle = await folderHandle.getFileHandle(file.name, { create: true })
await fileHandle.write(file)

// save/download a file
const fileHandle = await chooseFileSystemEntries({
type: 'save-file'
accepts: [
{ extensions: ['jpg'] },
{ extensions: ['webp'] },
{ mimeTypes: ['image/png'] }
],
excludeAcceptAllOption: true,
const fileHandle = await showSaveFilePicker({
_preferPolyfill: false,
_name: 'Untitled.png', // the name being used when preferPolyfill is true or native is unavalible
types: {},
excludeAcceptAllOption: false,
})

const extensionChosen = fileHandle.name.split('.').pop()

const image = {
const blob = {
jpg: generateCanvas({ type: 'blob', format: 'jpg' }),
png: generateCanvas({ type: 'blob', format: 'png' }),
webp: generateCanvas({ type: 'blob', format: 'webp' })
}[extensionChosen]

await image.stream().pipeTo(fileHandle.getWriter())
await blob.stream().pipeTo(fileHandle.getWriter())
```

PS: storing a file handle in IndexedDB or sharing it with postMessage isn't currently possible.
PS: storing a file handle in IndexedDB or sharing it with postMessage isn't currently possible unless you use native.


### A note when downloading with the polyfilled version
Expand Down
79 changes: 59 additions & 20 deletions example/test.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,32 +63,74 @@
<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>Manual</td>
<td width="100%">Manual</td>
<td>Testing</td>
</tr>
</thead>
<tbody>
<form>
<tr>
<td style="white-space: pre;">
chooseFileSystemEntries(
type: <select id="$type">
<option>save-file</option>
<option>open-file</option>
<option>open-directory</option>
</select><span id="$accept">
accepts: <textarea rows=8 cols="35" style="vertical-align: middle;"></textarea></span><span id="$multiple" hidden>
multiple: <input type="checkbox"></span><span id="$exclude">
excludeAcceptAllOption: <input type="checkbox"></span><span id="$name">
_name: <input value="sample.jpeg"></span><span id="$preferPolyfill">
_preferPolyfill: <input type="checkbox"></span>
)
<td>
showDirectoryPicker({
<div title="uses input[type=file][webkitdirectory]">
&nbsp; _preferPolyfill: <input form="form_showDirectoryPicker" name="_preferPolyfill" type="checkbox"><br>
</div>
})
</td>
<td><button id="$test">test</button></td>
<td><button form="form_showDirectoryPicker" type="submit">test</button></td>
</tr>
<tr>
<td>
showOpenFilePicker({<br>
<div title="picks files using input[type=file]">
&nbsp; _preferPolyfill: <input form="form_showOpenFilePicker" name="_preferPolyfill" type="checkbox">
</div>
<div title="make it possible to choose more files">
&nbsp; multiple: <input form="form_showOpenFilePicker" name="multiple" type="checkbox">
</div>
<div title="types is required if using this option">
&nbsp; excludeAcceptAllOption: <input form="form_showOpenFilePicker" name="excludeAcceptAllOption" type="checkbox">
</div>
<div title="">
&nbsp; 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]">
&nbsp; _preferPolyfill: <input form="form_showSaveFilePicker" name="_preferPolyfill" type="checkbox">
</div>
<div title="_name is used when not using native file system">
&nbsp; _name: <input form="form_showSaveFilePicker" name="_name" value="example.webp">
</div>
<div title="types is required if using this option">
&nbsp; excludeAcceptAllOption: <input form="form_showSaveFilePicker" name="excludeAcceptAllOption" type="checkbox">
</div>
<div title="">
&nbsp; 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">
Expand All @@ -98,11 +140,8 @@
and use the sandbox adapter on it.
<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> =&gt;</span> evt.preventDefault()
elm.ondrop = <span class="hljs-function"><span style="color: #df5320;">evt</span> =&gt;</span> {
evt =&gt; evt.preventDefault()
FileSystemDirectoryHandle.getSystemDirectory({
<span class="hljs-attr">type</span>: <span style="color: #7b9726;">'sandbox'</span>,
<span class="hljs-attr">_driver</span>: evt.dataTransfer
})
evt.preventDefault()
getOriginPrivateDirectory(evt.dataTransfer)
}</code></pre>
</td>
<td>Drop anywhere<br>on page</td>
Expand Down
Loading

0 comments on commit 4b7ab42

Please sign in to comment.