@fairdatasociety/fdp-browser-fs-api
v0.1.0
Published
browser file system api for fdp
Downloads
2
Readme
fdp-browser-fs-api
FDP FileSystem API Polyfill
Usage with React
// Example usage of fdp fs browser API polyfill
import React from 'react'
import {
getOriginPrivateDirectory,
showOpenFilePicker,
} from 'native-file-system-adapter'
export const FairdriveBrowser = ({ fdp, id, name }) => {
const currentPath = '/'
async function handlePodChange(e) {
setLoadingMessage(`Loading pod ${e.target.value}...`)
setLoading(true)
// Dynamic import polyfill
const adapter = await import('@fairdatasociety/fdp-browser-fs-api')
await fdp.account.login(process.env.REACT_APP_USERNAME, process.env.REACT_APP_PASSWORD)
const pod = { name: e.target.value }
console.log(`Using pod ${pod.name}`)
// Create adapter with getOriginPrivateDirectory
const rootHandle = await getOriginPrivateDirectory(adapter, {
fdp,
podname: pod.name,
path: currentPath,
})
if (currentPath === '/') {
setFolderChain([{
id: 'root',
name: '/',
isDir: true
}])
} else {
const folders = currentPath.split('/').map(path => ({
id: path,
name: path,
isDir: true,
}))
setFolderChain(folders)
}
const files = []
// Get entries from AsyncIterator
for await (let [name, entry] of rootHandle.entries()) {
if (entry.kind === 'directory') {
const item = { id: name, name: name, isDir: true, handle: entry }
files.push(item)
} else {
const item = { id: name, name: name, isDir: false, handle: entry }
files.push(item)
}
}
setPod({ ...pod })
setItems(files)
setLoading(false)
setLoadingMessage('')
}
})
API Reference
Loading directory or files entries
const adapter = await import('@fairdatasociety/fdp-browser-fs-api')
// Create adapter with getOriginPrivateDirectory
const rootHandle = await getOriginPrivateDirectory(adapter, {
fdp,
podname: pod.name,
path: currentPath,
})
const files = []
// Get entries from AsyncIterator
for await (let [name, entry] of rootHandle.entries()) {
if (entry.kind === 'directory') {
const item = { id: name, name: name, isDir: true, handle: entry }
files.push(item)
} else {
const item = { id: name, name: name, isDir: false, handle: entry }
files.push(item)
}
}
Uploading
const adapter = await import('@fairdatasociety/fdp-browser-fs-api')
// request user to select a file
const [picker] = await showOpenFilePicker({
types: [], // default
multiple: false, // default
excludeAcceptAllOption: false, // default
_preferPolyfill: false, // default
})
// returns a File Instance
const file = await picker.getFile()
// copy the file over to a another place
const rootHandle = await getOriginPrivateDirectory(adapter, {
fdp,
path: currentPath,
podname: podItem.name,
})
const fileHandle = await rootHandle.getFileHandle(file.name, { create: true })
const writable = await fileHandle.createWritable({ keepExistingData: false })
await writable.write(file)
await writable.close()
Downloading
import { fileSave } from 'browser-fs-access'
// This is a FileSystemFileHandle store in some state (eg memory, component, redux)
const h = selectedFileHandle.selectedFilesForAction[0].handle
const blob = h.getFile()
// Save a file using browser-fs-access, do not use await or a security context error will be thrown
fileSave(blob, {
fileName: h.name,
})
Delete
// This is a FileSystemFileHandle store in some state (eg memory, component, redux)
const file = selectedFileHandle.selectedFilesForAction[0].handle
const adapter = await import('@fairdatasociety/fdp-browser-fs-api')
// copy the file over to a another place
const rootHandle = await getOriginPrivateDirectory(adapter, {
fdp,
path: currentPath,
podname: podItem.name,
})
await rootHandle.removeEntry(file.name)
Example implementation
An example implementation in React can be found in /test/browser
. Start it with npm run start
License
MIT