File Handling API
This feature is not (yet) supported on your device
This feature is desktop only.
The File Handling API enables web apps to register their ability to handle file types with the operating system.
This enables the file manager of the OS or other operating system flows to use the web app to open the file, just
like with a native app.
Open the file manager of the OS of your device and select one or multiple files of type .png, .jpg, .jpeg or .webm
by right-clicking it and then select this PWA to open it (make sure it's installed as a PWA first).
The opened image(s) will then be displayed below.
// manifest.json
// "action" is the URL of the page that will handle the files
// "accept" is an object with MIME-types as keys and arrays of
// strings representing file extensions associated with that MIME type
// "launch_handler" decides how the PWA will be launched and can have the
// following values:
//
// - "auto": the user agent decides how the PWA will be launnced
// - "focus-existing": if the PWA is already open, it will be focused but the
// launch target URL will not be navigated to
// - "navigate-existing": if the PWA is already open, it will be focused and the
// launch target URL will be navigated to
// - "navigate-new": the launch target URL will be navigated to in a new instance
// of the PWA
"file_handlers": [
{
"action": "/file-handling",
"accept": {
"image/pgn": [".png"],
"image/jpeg": [".jpg", ".jpeg"]
}
}
],
"launch_handler": {
"client_mode": "focus-existing"
},
// javascript
const selectedImages = document.querySelector('#selected-images');
launchQueue.setConsumer(async (launchParams) => {
if(launchParams.files.length) {
const fragment = document.createDocumentFragment();
for(const fileHandle of launchParams.files) {
const file = await fileHandle.getFile();
const url = URL.createObjectURL(file);
const div = document.createElement('div');
const img = document.createElement('img');
img.src = url;
div.appendChild(img);
fragment.appendChild(div);
}
selectedImages.appendChild(fragment);
}
});