Come aprire i file locali nel browser con file:///

È possibile utilizzare il browser come se fosse un piccolo esploratore di file e, se usato correttamente, può rivelarsi estremamente utile. Dall'apertura di un semplice documento locale con file:/// all'utilizzo della potente API di accesso al file systemOggigiorno i browser moderni offrono molte più possibilità di quelle che utilizziamo abitualmente.

In questa guida vedremo, passo dopo passo, come aprire i file locali in browser web utilizzando file:/// in Chrome, Edge e FirefoxCome trasformare il tuo browser in un semplice esploratore di file su Windows e Android e come gli sviluppatori possono fare un ulteriore passo avanti utilizzando l'API File System Access per leggere, scrivere e gestire file e cartelle locali da un'applicazione web.

Cosa significa realmente aprire file locali con file:///

Quando scrivi un percorso che inizia con file:/// nella barra degli indirizzi del browser, Stai dicendo al browser di accedere al file system locale anziché a Internet.Vale a dire, aprire qualcosa che si trova sul tuo dispositivo: un disco rigido, una memoria interna o una scheda SD.

Questo speciale schema URL (file:///) Funziona in modo simile alla digitazione di C: in Windows o / in Linux e macOSÈ semplicemente adattato alla logica del browser. Da lì, quello che vedrai è una sorta di elenco di cartelle e file, senza fronzoli: nomi, dimensioni, data di modifica e poco altro.

Naturalmente, bisogna tenerlo presente I browser trattano questi percorsi locali con numerose restrizioni di sicurezza.Ad esempio, un sito Web visitato da Internet non può, per impostazione predefinita, leggere liberamente i file locali solo perché si apre un URL con file:///È sempre richiesto un gesto esplicito o il permesso dell'utente.

Utilizzo del browser come esploratore di file su Android

Molti telefoni Android non includono un file manager decente fornito dal produttore, oppure quello preinstallato è piuttosto limitato. In questi casi, Utilizzare Chrome, Edge o un altro browser basato su Chromium come browser di fortuna può aiutarti a uscire dai guai..

Il trucco è molto semplice: Apri il tuo browser basato su Chromium (Chrome, Edge, Brave, ecc.) e digita nella barra degli indirizzi file: /// sdcard /Android identifica il immagazzinamento principale interno come sdcard, in modo molto simile a come Windows utilizza C: per l'unità principale.

Quando si avvia quell'indirizzo, il browser solitamente chiederà l'autorizzazione per leggere la memoria interna. Una volta concessa tale autorizzazione, verrà visualizzato un indice che mostra le cartelle principali della memoria interna.Da lì puoi entrare e uscire dalle cartelle esattamente come se stessi navigando in un sito web con dei link.

In ogni cartella vedrai sia sottocartelle che file. I file vengono visualizzati con il loro nome completo, inclusa l'estensione, la dimensione e la data dell'ultima modifica.Sono inoltre elencati: cartelle nascoste, che in Android di solito iniziano con un punto, come .nomedia o altri simili.

Sebbene l'elenco sia molto spartano, La maggior parte dei browser moderni è in grado di aprire direttamente molti tipi di file toccandoli.Immagini, video, audio, documenti di testo, ecc. Non sono presenti miniature o anteprime, ma è sufficiente cliccare sul nome del file per far sì che il browser tenti di visualizzarlo o riprodurlo.

Trasforma Chrome ed Edge in un piccolo esploratore di file sul tuo PC

Sui computer desktop, sia su Windows che su altri sistemi, Puoi anche utilizzare Chrome, Edge e altri browser basati su Chromium per navigare nelle tue unità locali con file:///Il principio è lo stesso di Android, ma il percorso è diverso.

Se si utilizza Windows, l'unità primaria è più comunemente C:. In tal caso, digita nella barra degli indirizzi file:///C: e premere InvioIl browser ti mostrerà il contenuto della radice di quell'unità: cartelle come Windows, Program Files, Usuarios, ecc.

Se hai più unità o partizioni, Puoi sostituire la lettera nell'URL con quella corrispondente.. Ad esempio, file:///D: per un altro album o file:///E: per un ricordo USB che è stato montato con quella lettera. Da lì, clicca sulle cartelle per andare avanti e usa il pulsante Indietro del browser per tornare indietro.

Proprio come su Android, In ogni cartella vedrai i file e le sottocartelle con dimensione, data di modifica ed estensione visibiliNon genera miniature o icone accattivanti, ma è sufficiente per individuare un file specifico o ottenere una rapida panoramica della struttura di una directory.

La maggior parte dei browser Chromium Consentono di aprire direttamente file multimediali e persino alcuni formati di documenti. Basta semplicemente cliccarci sopra. Immagini, video, file audio o di testo semplice vengono visualizzati in modo naturale all'interno della scheda.

Apri i file locali in Chrome e Firefox senza digitare manualmente file:///

Oltre a digitare percorsi con file:///I browser includono scorciatoie progettate specificamente per aprire rapidamente i file locali. In Chrome, ad esempio, puoi usare la scorciatoia da tastiera Ctrl + O (Ctrl + O) quando la finestra del browser è attiva.

Premendo quella scorciatoia, Si apre la tipica finestra di dialogo "Apri file" del sistema operativoBasta trovare il file desiderato, selezionarlo e confermare. Chrome lo caricherà nella scheda corrente o in una nuova, a seconda del tipo di file e delle preferenze.

Firefox offre diverse opzioni. Da un lato, Puoi andare al menu principale e scegliere l'opzione "Apri file..."che fa esattamente la stessa cosa: visualizza la finestra di selezione dei file del sistema. In alternativa, puoi digitare direttamente un percorso come questo nella barra degli indirizzi: file:///// in modo che il browser inizi a visualizzare il contenuto dell'unità C: in Windows.

Con uno qualsiasi di questi metodi, Il risultato pratico è che il browser diventa un visualizzatore di file locale.Può aiutarti quando il Windows Explorer Si blocca quando si verificano problemi con il consueto file manager o semplicemente quando si desidera aprire un tipo di documento che il browser gestisce particolarmente bene.

API di accesso al file system: il passaggio da visualizzatore a editor

Tutto ciò che abbiamo visto finora si basa sull'uso "manuale" di file:/// e delle finestre di dialogo di apertura file, ovvero su operazioni che l'utente esegue manualmente. Ma da qualche tempo i browser basati su Chromium hanno incorporato l'API File System Access, che consente alle applicazioni web di lavorare con i file locali in modo molto più avanzato.

Questa API consente a un sito web, dopo aver richiesto la tua autorizzazione, Leggi e salva le modifiche direttamente su file e cartelle sul tuo dispositivoGrazie a questo, è possibile creare editor di testo e IDE di alto livello direttamente dal browser. programmazione, editor di foto e video, project manager e molti altri strumenti che in precedenza avevano senso sviluppare solo come applicazioni desktop.

È importante non confondere questa API moderna con quelle più vecchie o obsolete. Non è la stessa cosa dell'interfaccia FileSystem né l'API File and Directory Entries né la vecchia specifica "File API: Directories and System", che proponeva altri meccanismi per la gestione delle gerarchie dei file e delle aree di archiviazione sandbox.

L'attuale API di accesso al file system È stato progettato con particolare attenzione in termini di sicurezza, autorizzazioni ed esperienza utente.Richiede sempre azioni esplicite (ad esempio, fare clic su un pulsante) per aprire il selettore di file o directory e all'utente vengono sempre chiariti i percorsi esatti a cui concede l'accesso.

Per quanto riguarda la compatibilità, L'API funziona nella maggior parte dei browser basati su Chromium su Windows, macOS, Linux, ChromeOS e AndroidUn'eccezione degna di nota è Brave, dove è comunque necessario attivare un flag per utilizzarlo. Altri browser non Chromium potrebbero non implementarlo o potrebbero implementarlo solo parzialmente.

Verificare se il browser supporta l'API di accesso al file system

Come sviluppatore, la prima cosa che vuoi sapere è se il browser dell'utente supporta questa API prima di provare a utilizzarla. Il modo più semplice è verificare se i metodi di selezione dei file corrispondenti esistono nell'oggetto globale.ad esempio, controllando se showOpenFilePicker È disponibile in window (o self in un lavoratore).

Lo schema tipico è più o meno questo: "Se 'showOpenFilePicker' è impostato su self, allora posso usare l'API; altrimenti, devo ricorrere a un metodo alternativo."Ciò consente l'implementazione di soluzioni ibride in cui, se c'è supporto, vengono sfruttati i vantaggi dell'API, mentre in assenza di supporto vengono utilizzate tecniche tradizionali come i moduli di caricamento dei file.

È anche una buona idea Testare sui browser di destinazione e su diversi OSPoiché, nonostante la base sia Chromium, alcuni produttori potrebbero abilitare o disabilitare funzionalità specifiche per motivi di sicurezza, policy o prestazioni.

Primo esempio: apertura di un file locale da un'app Web

Uno degli esempi canonici per comprendere questa API è la creazione di un un editor di testo a file singolo che consente di aprire, modificare e salvare un documentoNon deve essere spettacolare: basta che legga e scriva testo semplice, e già ne illustra il funzionamento.

Il punto di ingresso qui è il metodo window.showOpenFilePicker(). Questo metodo, che può essere chiamato solo in un contesto sicuro (HTTPS) e in risposta a un gesto dell'utenteVisualizza una finestra di dialogo nativa per consentire all'utente di scegliere un file. Una volta selezionato, restituisce un array di handle, in genere con un singolo FileSystemFileHandle.

Tale handle memorizza tutte le informazioni e i metodi necessari per lavorare con il file scelto. È una buona idea salvare un riferimento all'handle, perché è quello che userai in seguito per leggere il file, salvare le modifiche o eseguire qualsiasi altra operazione.Finché mantieni tale handle e l'utente non ha revocato le autorizzazioni, la tua app sarà in grado di interagire con il file.

Una volta che hai il file FileSystemFileHandle, puoi ottenere l'oggetto File vera vocazione handle.getFile()Questo oggetto File Contiene i dati del file come un blob ed è possibile accedere al suo contenuto utilizzando metodi come text(), arrayBuffer(), stream() o slice() se hai bisogno di un accesso casuale.

In pratica, per un semplice editor di testo, la cosa usuale è usare file.text() per ottenere il contenuto completo come stringae metti quel testo in un <textarea> in modo che l'utente possa modificarlo. È importante notare che l'oggetto File Perde validità se il file viene modificato sul disco con altri mezzi, nel qual caso è consigliabile richiamarlo nuovamente. getFile().

Salva le modifiche: scrivi sul file system locale

Per salvare ciò che l'utente ha modificato, l'API offre due percorsi tipici: un salvataggio "semplice" che sovrascrive il file originale e un "Salva con nome" che crea un nuovo fileLa differenza fondamentale è se si dispone già di un handle per il file di destinazione o se è necessario che l'utente scelga un nuovo percorso e nome.

Quando vuoi creare un nuovo file o salvarne una copia con un nome diverso, devi usare showSaveFilePicker()Questo metodo apre il selettore file in modalità di salvataggio, consentendo all'utente di specificare nome, cartella ed estensione. È possibile fornire opzioni per suggerire tipi di file, ad esempio indicando che si tratta di un documento di testo e che l'estensione preferita è . .txt.

Un dettaglio importante è quello Dovresti chiamare showSaveFilePicker() direttamente in risposta al gesto dell'utente (ad esempio, cliccando sul pulsante "Salva") e non ritardare l'operazione mentre stai eseguendo elaborazioni complesse. Se esegui tutto il lavoro preliminare e poi, con un certo ritardo, provi ad aprire la finestra di dialogo, il browser potrebbe generare un errore di sicurezza perché non considera più che stai "gestendo un gesto dell'utente".

Una volta che hai un FileSystemFileHandle indicando il file in cui si desidera salvare, Il passo successivo è creare un FileSystemWritableFileStream utilizzando fileHandle.createWritable()Questo flusso è quello che utilizzerai per scrivere i dati. Se il browser rileva che non hai ancora i permessi di scrittura, visualizzerà una finestra di dialogo per i permessi; se l'utente li nega, la chiamata genererà un'eccezione.

Con il ruscello in mano, Basta chiamare writable.write(contenido) con una corda, un Blob o un BufferSourceÈ anche possibile inviare direttamente il corpo di una risposta HTTP al flusso con response.body.pipeTo(writable)Quando hai finito di digitare, chiudi la trasmissione con writable.close(), che è il momento in cui le modifiche vengono consolidate sul disco.

Mentre il flusso è aperto, puoi anche usare metodi come seek() o truncate() per spostare il puntatore di scrittura in una posizione specifica o modificare la dimensione del fileMa è importante ricordare che le modifiche non vengono applicate in modo permanente finché il flusso non viene chiuso.

Suggerisci il nome del file e la cartella home all'utente

L'API si occupa anche dell'esperienza utente nelle finestre di dialogo di sistema. Ad esempio, È possibile specificare un nome file suggerito quando si chiama showSaveFilePicker()Ciò consente all'utente di visualizzare qualcosa di più descrittivo, ad esempio "Nuovo documento.txt", invece di un generico "Nessun titolo".

Analogamente, È possibile suggerire una cartella iniziale in cui avviare il selettore dei file.Ciò avviene passando una proprietà startIn quando chiami showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()I valori possono essere stringhe come desktop, documents, downloads, music, pictures o videos, che corrispondono alle posizioni standard del sistema.

Inoltre, hai la possibilità di farlo utilizzare come valore di startIn un gestore di file o directory che hai giàIn tal caso, la finestra di dialogo si apre direttamente nella cartella in cui risiede tale handle, il che è molto comodo per riprendere il contesto di lavoro dell'ultima sessione.

Se l'applicazione gestisce diversi tipi di file (ad esempio, documenti di testo e immagini incorporate), È possibile definire ID diversi per ogni tipo di finestra di dialogoIn questo modo, il browser ricorderà l'ultima cartella utilizzata in modo indipendente per ciascun ID e non si confonderanno i percorsi dei documenti con quelli delle immagini.

Ricorda i file e le cartelle recenti con IndexedDB

Uno dei punti di forza di File System Access è che i suoi gestori sono serializzabili. Ciò significa che puoi memorizzare FileSystemFileHandle y FileSystemDirectoryHandle in IndexedDB e recuperarli nelle sessioni successive, sempre rispettando la policy dei permessi.

Grazie a questo, le applicazioni web possono offrire le funzionalità tipiche del desktop come elenchi di file recenti, riapertura dell'ultimo progetto o ripristino della cartella di lavoro precedenteBasta salvare gli handle nel database del browser e leggerli all'avvio dell'app.

Quando recuperi un handle memorizzato, Non dare per scontato che i permessi rimarranno in vigore.Il browser potrebbe decidere che sia necessario richiedere nuovamente l'autorizzazione, ad esempio perché è trascorso del tempo o perché l'ultima scheda di quella fonte è stata chiusa. Pertanto, si consiglia di verificare questo aspetto nel codice.

Per questo controllo, L'API include i metodi queryPermission() y requestPermission() sia nei gestori di file che di directoryPer prima cosa, chiedi in che stato si trova l'autorizzazione e, se non viene "concessa", puoi richiederla nuovamente all'utente, indicando nelle opzioni se desideri solo l'autorizzazione di lettura o di lettura e scrittura.

Una buona pratica è combinare entrambi i passaggi in un'unica funzione di aiuto Dato un handle e una modalità (sola lettura o lettura/scrittura), dovrebbe verificare se l'autorizzazione è già stata concessa e, in caso contrario, visualizzare il prompt corrispondente. Questo riduce il numero di dialoghi e rende l'esperienza più fluida.

Aprire e sfogliare intere directory dal browser

Oltre ai singoli file, l'API consente di lavorare con intere cartelle. Con showDirectoryPicker() l'utente può selezionare una directory completae l'applicazione riceve un FileSystemDirectoryHandle che dà accesso a tutti i suoi elementi.

Per impostazione predefinita avrai il permesso di lettura sui file in quella directory, anche se se hai bisogno di scriverci sopra È possibile richiedere l'accesso in lettura e scrittura passando { mode: 'readwrite' } quando si chiama showDirectoryPicker()Da quel momento in poi, la tua app potrà elencare e manipolare i contenuti in base all'autorizzazione concessa.

Per navigare nella cartella, È possibile iterare in modo asincrono su dirHandle.values()che restituisce, uno per uno, gli elementi che contiene: file e sottodirectory. Ogni voce ha una proprietà kind che ti dice se è un "file" o un "directory".

Se hai bisogno di accedere alle informazioni su ciascun file, come la sua dimensione, puoi chiamare entry.getFile(). In questi casi, si consiglia di eseguire le letture in parallelo utilizzando Promise.all() o tecniche simili, invece di procedere uno alla volta in modo rigorosamente sequenziale, il che può risultare più lento.

Puoi farlo anche da una directory creare nuove cartelle o file con getDirectoryHandle() y getFileHandle()È possibile specificare nelle opzioni se si desidera che vengano creati se non esistono già. Ad esempio, è possibile impostare una struttura di progetto come "Il mio progetto / Codice / Note.txt" direttamente dall'applicazione web.

Gestisci i file: elimina, rinomina e sposta

L'API non si limita alla lettura e alla scrittura. Permette inoltre di eliminare file e cartelle da una directory utilizzando removeEntry() su a FileSystemDirectoryHandleSe si tratta di una cartella, è possibile rendere l'eliminazione ricorsiva, in modo che includa tutte le sue sottocartelle e i suoi file.

Se invece di passare attraverso la directory si desidera agire direttamente su un handle di file o cartella, Alcuni browser offrono questo metodo remove() en FileSystemFileHandle y FileSystemDirectoryHandleIn questo modo si rimuove l'elemento senza dover fare riferimento al suo nome nella directory padre.

Per operazioni organizzative come la ridenominazione o lo spostamento di elementi in un'altra cartella, C'è un metodo move() nell'interfaccia FileSystemHandleÈ possibile passare direttamente un nuovo nome, una directory di destinazione o una directory più il nuovo nome da spostare e rinominare contemporaneamente.

Tuttavia, la compatibilità presenta delle sfumature: il supporto di move() È più maturo per i file all'interno del file system privato di origine (OPFS)e potrebbe essere ancora nascosto o non implementato per tutti gli scenari o per le directory in alcuni browser.

Trascina e rilascia file e cartelle sul Web

L'API File System Access si integra molto bene con il sistema drag-and-drop di HTML. Quando l'utente trascina file o cartelle dal sistema operativo a una pagina webil browser crea elementi DataTransferItem soci.

Attraverso il metodo DataTransferItem.getAsFileSystemHandle(), puoi ottenere un FileSystemFileHandle se l'elemento è un file o un FileSystemDirectoryHandle se è una directoryIn questo modo, un'app può consentire all'utente di trascinare e rilasciare un'intera cartella di foto e di lavorare direttamente sul suo contenuto.

Dovresti tenere presente che, nel contesto del trascinamento della selezione, DataTransferItem.kind Sarà sempre "file" sia per i file che per le cartelleOtterrai la distinzione tra file e directory consultando la proprietà kind del FileSystemHandle che ti restituisce getAsFileSystemHandle()che differenzierà tra "file" y "directory".

Private Source File System (OPFS) e accesso ottimizzato

Oltre all'accesso ai file e alle cartelle dell'utente, i browser Chromium offrono un file system privato di origine (OPFS)Si tratta di uno spazio di archiviazione dedicato a ciascun sito web, non direttamente accessibile dall'utente dal sistema operativo.

In pratica, questo significa questo Sebbene il browser memorizzi internamente questi dati sul disco, l'utente non li troverà come file "normali" in una cartella qualsiasi.Potrebbe trattarsi di un database, di file in pacchetti o di qualsiasi struttura interna che il browser ritiene appropriata.

Dall'API puoi accedere alla radice di questo sistema privato utilizzando navigator.storage.getDirectory(), che restituisce un FileSystemDirectoryHandle. Da lì puoi creare file e directory, leggerli, scriverci, rinominarli o eliminarli proprio come se fossero elementi del file system localeMa sapendo che sono isolati e dedicati esclusivamente alla tua applicazione web.

Per esigenze di prestazioni più avanzate, Chromium incorpora un tipo speciale di file con accesso sincrono ottimizzato. Attraverso fileHandle.createSyncAccessHandle() (disponibile nei worker), è possibile ottenere un handle che consente la lettura e la scrittura sincrona ed esclusiva, utile per casi d'uso molto intensivi o sensibili alla latenza.

L'ottenimento dell'handle è ancora asincrono, ma una volta ottenuto, Le operazioni di lettura e scrittura vengono eseguite come chiamate dirette, manipolando i buffer di byte.Ciò si avvicina molto alle prestazioni di un'applicazione nativa, ma senza abbandonare l'ambiente web e mantenendo l'isolamento dal sistema sorgente privato.

Polyfill e alternative quando non c'è supporto nativo

Sebbene l'API di accesso al file system offra molte possibilità, Non tutti i browser lo supportano ancoraNon è possibile creare un polyfill completo che ne replichi tutte le funzionalità, principalmente perché non esiste un modo per simulare in modo affidabile l'accesso al file system nativo senza la cooperazione del browser stesso.

Tuttavia, alcune parti possono essere approssimate. Per emulare showOpenFilePicker() un semplice <input type="file">, che visualizza la casella di selezione dei file e consente all'utente di scegliere uno o più file.

Qualcosa di simile accade con il risparmio. Per imitare showSaveFilePicker() un collegamento è spesso utilizzato <a download="nombre"> Cliccandoci sopra si avvia il download di un Blob generato da JavaScript. Questo consente di "salvare" i dati generati dal sito web, sebbene non offra l'opzione di sovrascrivere i file esistenti.

Per quanto riguarda la selezione di intere directory, l'attributo non standard è stato tradizionalmente utilizzato webkitdirectory en <input type="file">che consente di scegliere una cartella e ricevere un elenco dei file in essa contenuti. Non è una soluzione universale né potente come showDirectoryPicker()ma copre alcuni casi.

Per unificare questi approcci, Ci sono librerie come browser-fs-access Cercano di utilizzare l'API moderna ogni volta che è disponibile e, in caso contrario, ripiegano automaticamente su queste alternative migliori.In questo modo, lo sviluppatore scrive un codice relativamente uniforme e la libreria si occupa di adattarlo all'ambiente.

Sicurezza, permessi e controllo utente

Tutto questo potere comporta delle responsabilità e i team dei browser ne sono pienamente consapevoli. La progettazione dell'API di accesso al file system ruota attorno a due principi: controllo dell'utente e trasparenza.Non c'è modo che un sito web possa leggere segretamente metà di un disco rigido.

Quando l'utente apre un file utilizzando le caselle di selezione (sia per leggerne uno che per salvarne uno nuovo), È quel gesto che concede il permesso di lettura o scrittura sul file o sulla cartella specificaSe l'utente cambia idea e annulla il dialogo, il sito web non riceve nulla e quindi non ottiene alcun accesso.

Per salvare un nuovo file, fare clic sulla casella "Salva" Non solo consente di scegliere un nome e un percorso, ma garantisce anche l'autorizzazione di scrittura sul file appena creato.La logica è la stessa utilizzata da anni in elementi come <input type="file">ma ampliato con maggiori capacità.

Quando un'applicazione web vuole modificare un file già esistente, Non può semplicemente farlo; il browser potrebbe visualizzare un avviso specifico che chiede l'autorizzazione a scrivere.Questa finestra di dialogo può essere aperta solo in risposta a un'azione dell'utente, ad esempio premendo il pulsante "Salva modifiche".

Se l'utente decide di non concedere tale autorizzazione di scrittura, Il sito web deve offrire un'alternativa: scaricare una copia, salvare sul cloud, lavorare in OPFS o un altro meccanismo simile.L'idea è che l'utente abbia sempre l'ultima parola su ciò che viene toccato sul suo sistema locale.

In termini di trasparenza, I browser visualizzano un'icona nella barra degli indirizzi quando un sito Web ha accesso ai file localiSe l'utente clicca su quell'icona, vedrà un elenco dei file o delle cartelle a cui la pagina ha accesso in quel momento e potrà revocare le autorizzazioni in qualsiasi momento.

I permessi non sono permanenti. In genere, una pagina mantiene la possibilità di continuare a salvare file solo finché almeno una scheda di quella fonte è aperta.Una volta chiusi tutti i file, il browser potrebbe ritenere terminata la sessione e, al successivo utilizzo, sarà necessario richiedere nuovamente l'autorizzazione per quei file o directory.

Combinando lo schema file:/// per aprire risorse specifiche, il scorciatoie da tastiera per caricare file locali e l'API di accesso al file system per integrazioni approfondite Ciò rende il browser uno strumento molto più versatile sia per gli utenti che per gli sviluppatori.consentendo di visualizzare rapidamente un video salvato su disco o di modificare interi progetti senza uscire dall'ambiente web.