Failide üleslaadimisest veebi kaudu

Kuna tekkis probleem võimaluste kohta, mis on hetkel veebi kaudu failide üleslaadimiseks, siis otsustasin seda küsimust veidi uurida. Selgus, et pikka uurimist polegi – võimalused on nimelt niivõrd nirud. Aastal 2006 pole lihtsalt failide üleslaadimise võimalus kaugemale jõudnud oma esimestest sammudest.

Failivaliku elemendi lisamine vormile

Selle jaoks, et lisada lehele faililaadimisvalikut, tuleb kõigepealt form elemendile, mille sisse too valik tekib, lisada ühe tavaliselt mittevajamineva atribuudi – enctype.

enctype=”multipart/form-data” (vaikimisi on “application/x-www- form-urlencoded”)

“method” peab olema loomulikult “post” ehk siis kokku tuleb

<form name=”uploadvorm” action=”action.cgi” method=”post” enctype=”multipart/form-data”>

Lisaks tasub panna vormi sisse ka maksimumsuurust tähistava teate – sellest suurusest edasi läheb skriptile tühi fail. Iseenesest pead ei anna, kas see ka õieti töötab, aga idee järgi peaks nii olema.

<input type=”hidden” name=”MAX_FILE_SIZE” value=”1000000″ />

Ja lõpuks kõige tähtsam – “file” tüüpi väli

<input type=”file” name=”fail” />

Nüüd on kõik vajalik olemas ja tulemuseks on järgmine vorm:

Ja kui nüüd aus olla, siis see on ka kõik, mida näha võib. Valida saab ainult ühte faili (vanemates Opera versioonides ka rohkem) ning ainus võimalus saata rohkem faile, on lisada iga faili kohta üks taoline väli. Uskumatu, aga nii see on, kõikidest edusammudest hoolimata brauserite maailmas pole asjaga kaugemale jõutud, kui ühe faili korraga valimine.

Ainus töötav võimalus, mis hetkel eksisteerib niiöelda ühe augu kaudu suurema hulga failide saatmiseks, on kõik need failid eelnevalt kokku pakkida ja üheainsa sülemina serverisse ära saata, kus nad siis uuesti lahti pakitakse. Tänapäeval, kus pakkimist saab teostada õnneks vaid hiire vasaku klahvi abil otse Windows Exploreris (eeldusel muidugi, et on mingi vastav pakkimisprogramm installeeritud), nii et see pole kõige raskem tegevus, eriti võrreldes just ükshaaval failide lisamisega. Aga samas kõige mugavam ka mitte.

Accept

Samas ei toeta enamus brausereid ka “accept” muutujat, mis “file” elemendile lisades peaks brauserile teatama, et mis tüüpi faile ta valida lubada laseks. Näiteks accept=”image/gif” peaks laskma valida vaid GIF pilte. Reaalsuses näeme ainult *.* valikut, mis lubab valida igat faili.

Kujundusprobleemid

Teine probleem on “file” vormielemendi kui sellisena, nagu eespoolt näha pole tegu just kõige kenama väljanägemisega elemendiga ehk, et kogu kujundus on algasendis. Ja nagu ilmneb, siis väga palju muuta ei annagi. Saab vähekese tänu CSS-ilem aga mitte palju. “Browse…” nupp on millegipärast üsna immuunne igasugustele mahhinatsioonidele ja seega on kogu element lehe kujundusse raskesti integreeritav.

Samuti ei lase brauser JavaScriptiga asja muuta, võiks ju lihtsalt selle õige välja ära peita, vähekese liiklust ümber suunata ja lõpuks saadud tulem skriptiga file väljale omistada. Selgub aga, et tavalise skriptiga on tagajärjeks vaid error ning skripti edasise töö peatamine, signeeritud skripte aga ei oska tavainimene unes ka teha.

Nii et hektel ainus võimalus kuju muutmiseks on kasutada erinevaid üksteise peal asuvaid kihte, kus alumises kihis (z-index: 1) siis on ilusam pilt nupu jaoks ning ülemises (z-index: 2) on nähtamatu (mitte visibility: hidden, vaid opacity: 0) “file” element. Kui nüüd kasutaja vajutab sellele alumisele pildile, siis tegelikult rakendub hoopis pildi kohal asuv nupp ja ilmubki nagu imeväel failivaliku aken. Pikemalt võib antud teemast lugeda siit.

Seda viimast meetodit kasutab näiteks Eesti Posti margikujundamis leht ning ka pic.tr.ee.

Probleemiks tõik, et ei õnnestu kuidagi sellele ülemisele Browse nupule hiirega üleminekul sobivamat ehk sõrmega osutavat kursorit tekitada, mis siis aimu annaks, et tegu on mingit sorti nupu või lingiga ja sellele klikkima kutsuks. Hetkel võib kasutaja arvata, et tegu on hoopis mingi kujunduselemendiga ja seega jäävad nupu taha peituvad kasutusvõimalused täiesti avastamata.

Ühesõnaga brauseritel on veel pikk maa minna kasutusmugavuse tõsmiseks ja mitme faili korraga lisamine on mitte liigne luksus vaid hädavajalik omadus. Hetkel peab lihtsalt siis ümbernurga ja käepäraste vahenditega hakkama saama. Ega failid sellise pisiasja pärast ometi üles laadimata jää 🙂

4 thoughts on “Failide üleslaadimisest veebi kaudu”

  1. Heip!

    Rubyit õppides jäi mulle silma üks lahe ajax vidin, mis näitab kasutajale faili üleslaadimise kulgemist. Selline kiiruse näitaja peaks pic.tr.ee lehele väga hästi sobima. Igatahes mulle asjandus meeldis.

    Vidina demo:
    http://sean.treadway.info/demo/upload/

    Ahja, ma ise pole seda vidinat veel koodis kasutanud ning üldse veel ruby ja railsi õppimine veel pooleli. Muuseas, kui keegi on rubyit õppimas, siis tulge kampa ja jagame oma kogemusi http://ruby.org.ee

    Priit

  2. Suure häkkimisega sai taoline progressbar zip-laadimistele külge pandud. Päris hea idee iseenesest. Teostus pole küll ruby-s, vaid Perl+PHP+JavaScript.

    Ruby-st ma ausalt öeldes ei teagi suurt midagi peale fakti, et ta olemas on ning et kes kasutavad, need kiidavad. Mul vastavat masinat, mis oleks otsapidi netis ja milles oleks Ruby peal, pole kuskilt võtta ja seega ajan endiselt ja edukalt läbi siis tavapärase PHP-ga.

    – See progressbar paistab upload protsessi kole aeglaseks muutvat, aga tuleb veel veidi katsetada.

  3. see oleks täiesti mõeldav alternatiiv. fireftp. ütled kasutajale et ta lisaks selle om brauserile, annad kasutajanime ja passwordi. ekraanil on tuttavad failikataloogi moodi asjad. ma usun et paljud saaksid hakkama.

    või muuta seda ja teha selle baasil uus extension

    http://fireftp.mozdev.org/

Kommenteerimine on suletud.