FileHandle (from File System Access API) is not serialized unless primary key is not inbound

[jgentes]

This is a reproduction of this working scenario using idb-keyval: https://glitch.com/edit/#!/filehandle-indexeddb?path=script.js%3A1%3A0

With Dexie, using the following code:

db.version(1).stores({
  test: '++id'
});

const [fileHandle] = await window.showOpenFilePicker();
db.test.add({ fileHandle })

This results in a record with { fileHandle: {} } (empty object)

However, if I do not name the primary key, it serializes the object properly:

db.version(1).stores({
  test: '++'
});

const [fileHandle] = await window.showOpenFilePicker();
db.test.add({ fileHandle })

Result: { fileHandle: FileSystemFileHandle... }

Fortunately this workaround is ok for me, but seems like it may be a bug, and certainly something that may trip people up.

[jgentes]

Looks like this also works:

db.version(1).stores({
  test: '&name'
});

[dfahlander]

Seems to me as a browser bug. idb-keyval does not name the primary key either (no inbound key) so they probably don't hit the bug.

[datdinhquoc]

Seems to me as a browser bug. idb-keyval does not name the primary key either (no inbound key) so they probably don't hit the bug.

is it possible to solve this bug? i would like to save to indexeddb file handle as value in a doc, eg:

{
    name: "some file name",
    handle: FileHandleInstanceHere
}

The only way currently is to use idb-keyval, when using Dexie and set the file handle as value, the file handle turns into blank object {}.

[dfahlander]

You can use outbound keys also with Dexie.

[nonovd]

No problems on add operations with either an outbound key or a key with an unique index.

However, on update operations, the file handle will be lost.

To continue with the previous example:

async updateName () {
  return await db.fileHandles.update(2, { name: 'newName' })
}

name will be updated and handle will be an empty object.

#	Key	Value
0	1	{ name: 'untitled', handle: { FileSystemFileHandle { kind: 'file', name: 'uuid.ext' } } }
1	2	{ name: 'newName', handle: {} }

Browser : Chrome 91

[dfahlander]

No problems on add operations with either an outbound key or a key with an unique index.

However, on update operations, the file handle will be lost.

To continue with the previous example:

async updateName () {
  return await db.fileHandles.update(2, { name: 'newName' })
}

name will be updated and handle will be an empty object.

Key Value

0 1 { name: 'untitled', handle: { FileSystemFileHandle { kind: 'file', name: 'uuid.ext' } } }
1 2 { name: 'newName', handle: {} }
Browser : Chrome 91

Thanks @nonovd for these details. This is not a browser bug as I thought, but a lack of support for FileSystemFileHandle in cases when Dexie needs to clone objects (which may happen in update calls and some other situations as well). I just added a PR that should fix this #1327.

[dfahlander]

Resolved in master. New release on its way.

[dfahlander]

Release in dexie 3.1.0-beta.12

npm i dexie@next