Estoy tratando de experimentar con la lectura y escritura en File System Web API pero sigo obteniendo TypeError Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function , no tengo idea de lo que está pasando.
Aquí está el fragmento de código de reacción:
const FileReader = () => { const openThisFile = async () => { const [fileHandle] = await window.showOpenFilePicker(); // error: Property 'showOpenFilePicker' does not exist on type 'Window & typeof globalThis' console.log(fileHandle); }; return ( <div> <button onClick={openThisFile}>Open file</button> </div> ); }; export default FileReader; Entonces pensé que no funcionaba en reaccionar y luego probé Vanilla Javascript pero sigo obteniendo TypeError Uncaught (in promise) TypeError: window.showOpenFilePicker is not a function en la consola. Aquí está el fragmento de código.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Open file</title> </head> <body> <button onclick="getFile()">Open file</button> <script> const pickerOpts = { types: [ { description: "Images", accept: { "image/*": [".png", ".gif", ".jpeg", ".jpg"], }, }, ], excludeAcceptAllOption: true, multiple: false, }; let fileHandle; async function getFile() { [fileHandle] = await window.showOpenFilePicker(pickerOpts); // run code with our fileHandle } console.log(fileHandle); </script> </body> </html>¿Alguna idea de lo que estoy haciendo mal?
Supongo que está viendo el problema anterior debido a lo siguiente:
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Considere buscar en los documentos: https://developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker