Ako zabezpečiť, aby webové aplikácie pracovali s miestnym systémom súborov prostredníctvom prehliadača

Málokto bude namietať, že práca so súbormi cez okno prehliadača je jednou z nevyhnutných vecí pre každú modernú kancelársku webovú aplikáciu. V čase, keď mnohí z nás uprednostňujú prácu na diaľku, sa možnosť pracovať cez web stáva pre každý podnikateľský subjekt životne dôležitou. Niektoré z nich už decentralizovali svoju firemnú štruktúru, ale vyžadujú zachovanie pevných digitálnych väzieb medzi svojimi inštitúciami.

Zaujímavé je, že 90 % všetkých obchodných procesov, ktoré sa realizujú prostredníctvom webu, začína takou základnou funkciou, ako je správa súborov. Či už nahráte daňové hlásenie, otvoríte súbor vo formáte pdf, priložíte zoznamy objednávok alebo vložíte obrázok do blogu - všetky tieto činnosti sa vykonávajú prostredníctvom súborového systému.

Ako získať prístup k miestnym súborom z aplikácie Prieskumník

Z nesporných bezpečnostných dôvodov je zakázané, aby prehliadač pracoval so súborovým systémom a dotýkal sa akýchkoľvek údajov bez povolenia. Rozhodne nikto nechce, aby sa hacker dostal do jeho počítača cez najviac exponovanú a ľahko prístupnú časť systému - internetový prehliadač.

Preto vždy, keď chcete stiahnuť/odoslať súbor, systém zobrazí takéto okno:

Webový prehliadač nemôže pristupovať k súborovému systému operačného systému bez priameho povolenia používateľa. V dôsledku toho webové aplikácie, ktoré používajú JavaScript na strane prehliadača, nemajú oprávnenie zapisovať na klientsky SSD bez toho, aby bolo potrebné vypnúť množstvo možností zabezpečenia.

Našťastie existuje niekoľko spôsobov, ako zjednodušiť proces prístupu k súborom bez toho, aby ste používateľov obťažovali neustálymi tlačidlami a oknami "Prehľadávať".

Jednoduché je pridať obsluhu udalosti JS "drop" do niektorého prvku DOM na webovej stránke a vzorku JavaScriptu pre súbor na stiahnutie. Súbory získané pomocou jazyka JavaScript možno neskôr spracovať na strane klienta. Môžete napríklad použiť knižnice XLS na rozbor tabuliek xls a xlsx v prehliadači.

Ak máte binárne dáta, ako sú obrázky, videá alebo zvukové súbory, použite funkciu JavaScript Blob object.

Táto krátka technická odpoveď na otázku, ako získať obsah súboru v JavaScripte, vám určite pomôže. Existuje aj iná moderná metóda, ktorá môže byť pre vaše potreby vhodnejšia.

Funkcia Drag and Drop vo webových aplikáciách pomocou rozhrania HTML5 File API

V roku 2014 zverejnila W3C vylepšené HTML5. Okrem nového značkovania obsahovalo HTML5 niekoľko najlepších skriptovacích rozhraní API, ktoré možno používať s JavaScriptom a pripojiť k existujúcim rozhraniam DOM.

Stručne povedané, existuje jedno takéto rozhranie API s názvom File, ktoré je vytvorené špeciálne na spracovanie nahrávania súborov a manipulácie so súbormi (čítanie súborov JavaScript). Rozhranie File API nie je neoddeliteľnou súčasťou HTML5, ale možno ho pridať do DOM HTML5 a umožňuje používateľom vybrať, čítať a upravovať lokálny súbor s minimálnym úsilím.

Najlepšie funkcie rozhrania API súborov:

• Ťahanie a púšťanie súborov bez tlačidla "Prehľadávať"
• Výber viacerých súborov, čo je skvelé vylepšenie UX.
• Zobrazenie miniatúr používateľom vybraných obrázkov namiesto štandardných ikon súborov.
• Zobrazenie všetkých informácií o súboroch v prehliadači: veľkosť, dátum, id, názov, typ atď.
• Asynchrónne spracovanie procesu nahrávania súborov, ktoré zvyšuje výkon webovej aplikácie.
• Funkcia vytvárania úloh nahrávania je veľmi užitočná, ak potrebujete do svojho blogového CMS stiahnuť viacero obrázkov naraz.

Vývoj reálnych aplikácií rozhrania API súborového systému

Práca so súbormi v režime offline

Za starých čias, ak ste chceli napríklad... uložiť súbor na pevný disk používateľa, systém musel v JavaScripte vygenerovať súbor na jeho stiahnutie. To znamená, že ste museli odoslať súbor na server -> vykresliť ho na tejto strane -> odoslať ho späť používateľovi ako prílohu (Content-disposition: attachment). Je zrejmé, že takýto scenár nie je prijateľný, ak chcete, aby vaša webová aplikácia pracovala so súbormi offline.

Našťastie, pomocou rozhrania API File and Directory Entries môže vaša webová aplikácia prechádzať miestnym systémom ukladania a ukladať obsah na strane klienta bez toho, aby bola neustále online. Z technického hľadiska toto rozhranie API simuluje virtuálny súborový systém, v ktorom sa vaša webová aplikácia môže pohybovať a zobrazovať ho používateľom, ako keby išlo o skutočné úložisko. Ale koho to nakoniec zaujíma? Vaša aplikácia dobre pracuje s údajmi, ukladá ich do vyrovnávacej pamäte a spracováva veľké kusy na strane klienta. A to všetko sa vykonáva offline!

Prípady použitia API pre záznamy súborov a adresárov:

• Úprava zvuku/fotografií - Aplikácia môže sťahovať súbory na neskoršie použitie alebo ich upravovať z vyrovnávacej pamäte pomocou vlastných výpočtových schopností namiesto toho, aby to robila na strane servera.
• Práca s obrovskými súbormi - Klienti si môžu vybrať prácu s konkrétnym kusom údajov bez toho, aby museli sťahovať celý súbor.
• E-mailový klient offline - Umožňuje používateľom ukladať (ukladať do vyrovnávacej pamäte) prílohy lokálne a odosielať ich na požiadanie.
• Nahrávač odolný voči chybám - V prípade chyby prehliadača alebo neočakávaného vypnutia počítača bude vaša aplikácia pokračovať v sťahovaní súborov z miesta, kde bolo prerušené.

Práca s tabuľkami

Vezmime si na začiatok súbory CSV. Tieto súbory sú len hodnoty oddelené čiarkou: bla1, bla2, bla3. Povedzme, že pracujete s cenníkom v CSV s tromi stĺpcami vo vnútri: názov položky, množstvo, cena. Bohužiaľ, jeden z vašich výrobcov vám pošle súbor s cenníkom s presne rovnakým typom údajov, ale s nesprávne usporiadaným stĺpcom v ňom: suma, cena, názov. Je zrejmé, že budete mať problémy so zlúčením týchto súborov CSV kvôli rozdielnemu poradiu stĺpcov.

Našťastie môžete takéto problémy vyriešiť na cestách pomocou správy súborov vo svojej webovej aplikácii. Rozhranie File API umožňuje používateľom zobraziť náhľad súborov CSV (alebo súborov v akomkoľvek inom formáte) pred ich odoslaním na server. Používatelia tak môžu vopred zmeniť poradie stĺpcov na požadované.

Krájanie

Ak máte mediálny portál s obrovským množstvom obsahu vytvoreného používateľmi alebo máte veľmi špecifické požiadavky na údaje, ktoré môžu používatelia odosielať, rozrezanie vám môže ušetriť veľa miesta na disku.

Stačí dať zamestnancom prísne pokyny a nástroj na rezanie, ktorý im umožní rezať súbory (napr. pasové fotografie) priamo v prehliadači. Takto ušetríte veľa miesta na disku a čo je dôležitejšie, ušetríte veľa času pri objednávaní nespracovaných údajov, ktoré vám používatelia poskytnú.

Mimochodom, zvážte integráciu tejto funkcie, ak pracujete s veľkými dátami a technológiami na dolovanie údajov.

Korektúry

Ak podnikáte v oblasti publikovania, možno sa vám bude páčiť webová aplikácia s funkciou náhľadu, ktorá umožní vašim autorom skontrolovať a použiť niektoré štýly v textovom editore PRED samotným odoslaním do systému CMS.

Rovnaká funkcia sa dá použiť aj v iných odvetviach, kde často dochádza k drobným ľudským chybám. Platí na to zlaté pravidlo: čím viac rutinných úloh vaši zamestnanci vykonávajú, tým dôležitejšie je dať im možnosť dvakrát skontrolovať ich výsledky.

Zlepšenie výkonu webovej aplikácie

Pomocou rozhrania API File and Directory Entries môžeme tiež výrazne zvýšiť výkon vašej webovej aplikácie. Po prvé, zníži sa latencia tým, že sa odstránia zbytočné prenosy údajov medzi klientom a serverom a požiadavky. Jednoducho všetka práca sa vykoná na strane klienta a na server sa odošle len raz za čas.

Po druhé, môžeme nechať vašu webovú aplikáciu predvyberať údaje v procese na pozadí a ukladať ich do lokálnej vyrovnávacej pamäte. Alebo nechať používateľov pracovať s časťou údajov, pričom sa na pozadí potichu načíta ďalší segment súboru.

Prijímanie klientov zo starej školy

Niektoré podniky sú náročné na udržiavanie kontaktu s technológiami. Navyše, ak spolupracujete so štátnymi inštitúciami, jednoducho ich nemôžete nútiť, aby zmenili spôsob, akým robia veci. Žiaľ, niektorí ľudia si ešte ťažšie osvojujú nové zručnosti ako veľké inštitúcie, v ktorých pracujú. Práve v tomto prípade budete musieť svoju aplikáciu prispôsobiť zvyklostiam klienta.

Jedným z takýchto starých zvykov je práca s tradičným systémom správy súborov Windows. Toto používateľské rozhranie pieskoviska je stále veľmi obľúbené medzi kancelárskymi pracovníkmi, sekretárkami a špičkovými firemnými špecialistami. Preto môže byť vaším cieľom č. 1, aby sa vaša webová aplikácia stala pre nich známou. Naozaj, ako by ste očakávali, že klienti budú pracovať s vaším webovým nástrojom, ak strávia 10 minút len sťahovaním a hľadaním svojich súborov v systéme.

S trochou úsilia môžeme dať vašej supermodernej webovej aplikácii trochu iný vzhľad, čo môže vašim klientom výrazne uľahčiť prechodné obdobie.

Spodná hranica

Ak sa chystáte vyvíjať kancelársku webovú aplikáciu, majte na pamäti tieto tri názvy API File API, File and Directory Entries API a File Write (umožňuje zápis do súborov z webových aplikácií). Tieto rozhrania API sa môžu zdať v porovnaní s algoritmami budúcich technológií nenápadné, ale verte mi - správne vykonanie základných vecí posunie vašu aplikáciu na polceste k úspechu.