Tiedostojen lataaminen WordPressiin, uudelleentarkastelu: Osa 1 – Asiakaspuoli
Vuosia sitten kirjoitin tiedostojen lataamisesta WordPressiin hallintoalueelta. Tämä viesti on käytännössä päivitys kyseiseen viestiin, mutta se kattaa uudet näkökohdat, joita teen, ja joitain muita prosesseja, jotka ovat mielestäni tarpeellisia.
Tässä postauksessa aion käyttää esimerkkiä PDF-tiedoston lataamisesta ja sen saamisesta saataville Mediakirjastossa.
Näin tehdessäni aion myös käsitellä joitain näkökohtia, jotka tulisi ottaa huomioon asiakas- ja palvelinpuolella, sekä asioita, joita tulee etsiä aina, kun joku siirtää tietoja langan yli.
Tiedostojen lataaminen WordPressissä (ja mediakirjastoon)
Ennen kuin pääsen tämän viestin ytimeen, oletan, että sinulla on:
- alivalikkosivu tai järjestelmänvalvojan sivun asetukset tiedostosyötteellä,
- että olet oikein määritetty hyväksymään MIME-tyypit,
- että olet tyytyväinen pieneen JavaScriptiin,
- Ja olet mukava työskennellä mukautettujen viestien kanssa tavallisen WordPress-sovellusliittymän ulkopuolella.
Jos näin on, koko koodin pitäisi olla suhteellisen itsestään selvää (ei sillä, ettenkö osoita sitä pala kerrallaan), mutta jos jokin yllä olevista kuulostaa hämmentävältä, viesti saattaa sisältää materiaalia, joka vaatii vähän lisää tutkimusta Codexista tai JavaScriptistä, jonka annan täällä.
Siitä huolimatta teen sen, mitä voin tehdä, mahdollisimman kattavasti.
1 Pääidea
Ominaisuuden idea on yksinkertainen: Haluat antaa käyttäjälle mahdollisuuden ladata PDF-tiedostoja WordPress-hallintaalueen kautta. Haluat myös tiedoston olevan saatavilla Mediakirjastossa.
Mahdollisuus tehdä tämä ei ole vaikeaa, mutta on olemassa tapoja parantaa käyttökokemusta, joita haluaisin käsitellä myös tässä viestissä (esim. en voi ladata mitään ennen kuin tiedosto on määritetty syöttökentässä, esimerkki).
2 Käyttöliittymä tiedostotyypin tarkistamiseen
Ensinnäkin, kuten sanoin viestin yläosassa, oletan, että sinulla on pohjatyöt WordPressin hallintasivulle. Tämä voidaan tehdä joillakin tavoilla – olen valinnut alivalikkosivun käytön, mutta on olemassa joitakin tapoja, joilla tämä voidaan tehdä.
Toiseksi sivu on yksinkertainen: se sisältää sivun otsikon, tiedoston syöttökentän ja ‘Lataa’-painikkeen, joka on oletusarvoisesti poissa käytöstä:
Huomaa, että kun yritän lisätä kuvan, joka ei ole PDF-tiedosto, saan virheilmoituksen ja Lataa-painike on edelleen poissa käytöstä:
Mutta kun lisään tiedoston, joka on odotettua tyyppiä, Lataa-painike on käytössä:
Tämä vaatii muutaman asian:
- JavaScript, joka haistaa tiedostotyypin,
- Osat, joiden näkyvyys voidaan vaihtaa dynaamisesti JavaScriptin kautta,
- Ja mahdollisuus ottaa käyttöön tai poistaa käytöstä tiedostonsyöttöpainike.
Tärkeä huomautus on, että asiakaspuolella: Voimme vain olettaa, että tiedosto on oikea tiedostotyyppi sen laajennuksen perusteella. Meidän on tehtävä enemmän työtä palvelinpuolella varmistaaksemme, että tämä on oikein.
Tarkoituksena on kuitenkin tarkistaa asiakkaalta, että annamme parhaan mahdollisen kokemuksen ilmoitusviestien ja tiedostotyypin perusteella ottavien tai poistavien vaihtoehtojen avulla.
3 Tiedostotyypin tarkistaminen asiakaspuolella
Oletetaan, että tässä esimerkissä meillä on osa, joka hahmontuu aina, kun yritämme ladata tiedoston, joka ei ole PDF. Säilön oletuksena on style="display:none;" attribuutti, jota käsittelemme pian JavaScriptin avulla:
Huomaa, että tämän osion tunnus on invalid-file-message. Tämä on hieman yleistetty, koska saatat haluta liittää sen johonkin muuhun, mutta tämän viestin tarkoituksiin saat idean.
Jos haluat vaihtaa tämän viestin näkyvyyttä, sinun on määritettävä JavaScript-käsittelijä, joka seuraa tiedoston syöttöelementin muutosta.
4 Tiedoston syöttöelementin valvonta
Tässä vaiheessa on oltava JavaScript-tiedosto, joka valvoo tiedoston syöttöelementin muutostapahtuman arvoa, jotta se voi määrittää, mitä toimia tulee tehdä.
Katso tämä koodi:
Tämä koodi etsii syöttökentän arvon. Jos tiedostotyyppi ei vastaa pdf -muotoa, se vaihtaa yllä olevan virheilmoituksen näkyvyyttä; muuten se näyttää latauspainikkeen.
Ja muista, että on hyvä käytäntö asettaa tämä komentosarja vain hallinta-alueelle ja sivulla, jota se vaaditaan :
Kaikki tämä varmistaa, että laajennus rekisteröi komentosarjan oikein sille sivulle, jolla sitä tarvitaan, ei missään muualla, ja että se tarkistaa oikein varmistaakseen, että määritettävä tiedosto on oikean tyyppinen.
Mutta On enemmän
Alunperin tämän piti olla kaikki yksi viesti, mutta kaiken vaativan sisällön seulominen kestäisi liian kauan (ainakin mielestäni). Joten yritän tehdä siitä hieman helpompaa seurata jakamalla sen pariin viestiin.
Kuten aiemmin mainittiin, asiakaspuolella voimme tehdä vain niin paljon. Toki, weUplo voi toteuttaa toimenpiteitä parantaakseen käyttökokemusta, mutta se ei ole turvallisin, ja palvelinpuolella on vielä tehtävää.
Tämän sarjan toisella puoliskolla tarkastelen PHP:tä, jota tarvitaan tiedostojen lataamisen hallintaan ja turvallisesti.