A webalkalmazások most kölcsönhatásba léphetnek a fájlrendszerével – CloudSavvy IT

A File System Access API egy új böngészőfunkció, amely lehetővé teszi a webhelyek és alkalmazások számára, hogy közvetlenül interakcióba lépjenek az eszköz fájlrendszerével. Most van részleges támogatás az API-hoz a legújabb Chrome és Opera verziókban.

Mi van most a File System Access API régebben Native File System API néven ismerték. Hosszú fejlődésen ment keresztül, többszörös ismétléssel, a biztonsági problémák megoldása érdekében. A funkció a stabil kiadásban volt bekapcsolva a Chrome 86-ból.

Áttekintés

A fájlok webes támogatása történelmileg arra korlátozódott, hogy fájlokat válasszon ki az eszközéről a <input type="file">. A korábbi API-k segítségével lehetetlen közvetlenül a felhasználó fájlrendszerébe írni. Letöltési linkeket kell használnia, ha fájlt kell adnia a felhasználónak.

A File System Access API lehetőséget nyújt a webhelyeknek arra, hogy írás-olvasási hozzáférést érjenek el az eszköz fájlrendszeréhez. Ez lehetővé teszi új összetett webalkalmazások létrehozását, amelyek kölcsönhatásba lépnek a fájljaival. A webalapú szövegszerkesztők, a fotókönyvtárak és a médialejátszók mind a helyileg tárolt tartalmat tölthetik be a készülékre.

Az API használatával felsorolhatja a könyvtárak tartalmát, adatokat olvashat a fájlokból, és visszaírhatja a felhasználó eszközén tárolt új és meglévő fájlokba. A hozzáférést a FileSystemFileHandle és FileSystemDirectoryHandle objektumokat kezel, amelyek a felhasználó rendszerén található fájlokat képviselik.

A File System Access API csak a HTTPS-n keresztül betöltött oldalakról használható. Olyan engedélyek mögött van, amelyekhez a felhasználónak kifejezetten hozzájárulnia kell. Az API használatakor a felhasználót minden alkalommal meg kell adni hozzájárulását. Ez ugyanazt a rendszert használja, mint az engedélyezési kérelmek más webes szolgáltatásokhoz, például az értesítésekhez és a kamerához való hozzáféréshez.

A legtöbb modern JavaScript API-hoz hasonlóan a fájlrendszer-hozzáférés is aszinkron. Hívások az API felületére Ígéretek. A fogyasztás legtisztább módja a async/await az ES7 szintaxisa, ezt fogjuk használni a következő példákban.

Fájl olvasása

Fájl olvasásához nyissa meg a fájlválasztót a window.showOpenFilePicker() funkció. Nincs szükség a HTML használatára <input type="file"> elem.

A felhasználó operációs rendszere natív fájlválasztót jelenít meg. Amint a felhasználó kiválaszt egy fájlt, a visszaküldött Ígéret a FileSystemFileHandle tárgyakat.

A fájl tartalmának megszerzéséhez hívja a getFile() a fájlkezelő módszere. Ez eredményezi a File tárgy, amit kapsz, ha egy HTML fájlkezelővel dolgozol. Ha megvan a File, használhatja blob módszereit, mint pl text() és stream() hogy elolvassa az adatait.

const [fileHandle] = await window.showOpenFilePicker();
const file = await file.getFile();
const fileData = await file.text();
console.log(fileData);

window.showOpenFilePicker() egy opcióobjektumot fogad el egyetlen paraméterként. A. Beállításával engedélyezheti a felhasználó számára, hogy több fájlt válasszon multiple választási lehetőség. Ha a felhasználót meghatározott fájltípusokra szeretné korlátozni, adja át a types opció az engedélyezett típusokat leíró objektumok tömbjével. Minden típusú objektumnak tartalmaznia kell description és accept tulajdonságok, amelyek meghatározzák a típus fájlválasztó címkéjét és a megengedett MIME típusokat.

const files = await window.showOpenFilePicker({
    multiple: true,
    types: [
        {
            description: "Image Files",
            accept: ["image/jpeg", "image/png"]
        }
    ]
});
 
for await (file of files) {
    const fileData = await file.getFile();
    console.log(fileData);
}

Az „összes fájl” opció általában megengedett fájltípusként jelenik meg, még akkor is, ha a types opció be van állítva. A. Beállításával letilthatja az összes fájl felülírását excludeAcceptAllOption választási lehetőség.

Írás fájlba

Ha rendelkezik fájlkezelővel, írhat is rá! Van még egy absztrakciós réteg, amellyel meg kell küzdeni, mivel először meg kell szereznie a FileSystemWritableFileStream. Ez a folyam reprezentálja a fájlt, és lehetővé teszi az írások memóriában tartását, amíg azok megmaradnak a lemezen.

Így cserélheti le a (z) fájlkezelő tartalmát showOpenFilePicker():

// User selects a file
const fileHandle = await window.showOpenFilePicker();
 
// Get a `FileSystemWritableFileStream` we can write to
const writableFileStream = await fileHandle.createWritable();
 
// Write new file contents into the stream
await writableFileStream.write("Hello World");
 
// Close the writable stream - its content is now persisted to the file on disk
await writableFileStream.close();

Hívás write() írható adatfolyamon szöveget szúr be a kurzor aktuális pozíciójába. A kurzor helyzetének megváltoztatásához hívja a seek() az új kurzorpozíció átadásának módszere. A harmadik módszer az írható adatfolyamokra az truncate(), amely a fájlt maximálisan átméretezi bájtban, amelyet meg kell adnia.

Néha új fájlba kell írnia. Ezt úgy teheti meg, hogy megkéri a felhasználót, hogy a fájl használatával válasszon új helyet a fájl számára window.showSaveFilePicker(). Ez hasonlóan működik, mint window.showOpenFilePicker() – visszaadja a FileHandle amelyet majd hívhat createWritable() írható adatfolyam eléréséhez.

const fileHandle = await window.showSaveFilePicker();
const writable = await fileHandle.createWritable();
await writable.write("Hello World");
await writable.close();

Használhatja a excludeAcceptAllOption és types opciók a window.showSaveFilePicker(). Azonosak a munkájukkal showOpenFilePicker() társaik.

Könyvtárak

A File System Access API könyvtárakat is feltár. A felhasználót arra lehet kérni, hogy válasszon egy könyvtárat a segítségével window.showDirectoryPicker(). Ez a függvény nem fogad el paramétereket. Ígéretet ad vissza, amely megoldódik a-val FileSystemDirectoryHandle a könyvtárat képviseli.

A könyvtár tartalmát felsorolhatja a iterálásával values(). Az értékek fájl- vagy könyvtárkezelő példányok lehetnek.

const directoryHandle = window.showDirectoryPicker();
for await (let handle of directoryHandle.values()) {
    if (handle.type === "file") {
        // file
    }
    if (handle.type === "directory") {
        // subdirectory
    }
}

Ha tudja a keresett fájl vagy alkönyvtár nevét, használhatja a getFileHandle() vagy getDirectoryHandle() módszereket annak letöltésére. Ezek a módszerek egyaránt elfogadnak egy opcióobjektumot, amely jelenleg egyetlen tulajdonsággal rendelkezik, create. Ennek beállítása true a kért fájlt vagy könyvtárat automatikusan létrehozza a fájlrendszerben, ha még nem létezik.

Fájlokat és mappákat törölhet egy könyvtárból a removeEntry() metódus egy könyvtárkezelőn. Ez elfogadja a törölni kívánt fájl vagy alkönyvtár relatív nevét. Könyvtár törlésekor opcionálisan beállíthatja a recursive lehetőség a tartalmának eltávolítására is.

await directoryHandle.removeEntry("file.txt");
await directoryHandle.removeEntry("Subdirectory", {recursive: true});

Engedélyek

A File System Access API engedélyei fel vannak osztva olvasási és írási összetevőkre. Browers általában a különálló engedélykérés mind az olvasás, mind az írás, mind az egyes fájlok vagy könyvtárak számára, amelyekhez hozzáfér.

Miután megszerezte az engedélyt, addig használhatja a fájl- vagy könyvtárkezelőt, amíg a webhelye nyitva marad. Kivételt képez az az eset, ha az alapul szolgáló erőforrás megváltozik vagy módosul a lemezen, ebben az esetben a fogantyú érvénytelen.

Meghívhatja, hogy van-e még engedélye a fogantyú használatára, ha felhívja a fogantyút queryPermission() módszer:

const mode = "read";    // may also be "readwrite"
if (await fileHandle.queryPermission({mode}) === "granted") {
    // OK
}

Ha újra engedélyt kell kérnie, használja a requestPermission() módszer ugyanolyan módon.

Kerülje az engedélyek túl gyakran vagy túl sok fájl kérését. Ez valószínűleg gyenge felhasználói élményt fog okozni a több egymást követő párbeszédpanel miatt. Mindig kérjen engedélyt egy kifejezett felhasználói műveletre, például egy gombra kattintva.

Az API nem rendelkezik tartós engedélyek megadásáról. Miután az összes fül a webhelyén lezárták, a megadott fájlengedélyek visszavonásra kerülnek.

Következtetés

A File System Access API az egyik legizgalmasabb böngésző API, amelyet az elmúlt hónapokban indítottak el. Megváltoztathatja a webalkalmazások képességeit, és így még életképesebb alternatívát jelenthet az asztali programok számára.

Akár szövegszerkesztőt, fotógalériát vagy vállalati üzletág-alkalmazást épít, az eszköz fájlrendszerével való interakció új lehetőségeket kínál. Bár a böngésző támogatása belátható időn belül a Chrome-ra és az Operára korlátozódik (a Mozilla az API-t úgy nézi meg „Potenciálisan nagyon veszélyes”), A fájlrendszer-hozzáférés elősegíti az internet fejlesztését alkalmazásplatformként, és tovább csökkenti a web és a natív alkalmazások közötti szakadékot.