Handling multuple MIME types with same file extension in showSaveFilePicker()

3 weeks ago 23
ARTICLE AD BOX

I am trying to use the internal Chrome File System Access API to allow the user to save a file in multiple types. The file is an STL file, I want to allow the user to save the STL file in either Binary or ASCII format. These formats have different MIME Types (model/x.stl-binary and model/x.stl-ascii) but share the same file extension STL. How do I know which type the user selected in the dialog?

I have a dialog set up like this:

const options = { suggestedName: defaultFilename, types: [ { description: 'Binary STL', accept: { 'model/x.stl-binary': ['.stl'] }, }, { description: 'ASCII STL', accept: { 'model/x.stl-ascii': ['.stl'] }, }, ], }; const fileHandle = await (window as any).showSaveFilePicker(options);

I have tried:

const file = await fileHandle.getFile(); console.log('file.name:', file.name); console.log('file.type:', file.type);

What I expected:

const isBinary = (file.type === 'model/x.stl-binary');

What I got:

file.type === ""

This sort of interaction seems like one of the most basic ways you would use this dialog. You allow the user to select between multiple export types, by MIME type. Is there any way to get what type the user selected out of the dialog after its Promise resolves? What am I missing?

Read Entire Article