{"id":230266,"date":"2022-11-22T20:49:00","date_gmt":"2022-11-22T17:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230266"},"modified":"2022-11-09T20:52:45","modified_gmt":"2022-11-09T17:52:45","slug":"tiedostojen-lataaminen-wordpressiin-uudelleentarkastelu-osa-1-asiakaspuoli","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/tiedostojen-lataaminen-wordpressiin-uudelleentarkastelu-osa-1-asiakaspuoli\/","title":{"rendered":"Tiedostojen lataaminen WordPressiin, uudelleentarkastelu: Osa 1 &#8211; Asiakaspuoli"},"content":{"rendered":"\n<p>Vuosia sitten kirjoitin <a href=\"https:\/\/tommcfarlin.com\/upload-files-in-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tiedostojen lataamisesta WordPressiin<\/a> hallintoalueelta. T\u00e4m\u00e4 viesti on k\u00e4yt\u00e4nn\u00f6ss\u00e4 p\u00e4ivitys kyseiseen viestiin, mutta se kattaa uudet n\u00e4k\u00f6kohdat, joita teen, ja joitain muita prosesseja, jotka ovat mielest\u00e4ni tarpeellisia.<\/p>\n<p>T\u00e4ss\u00e4 postauksessa aion k\u00e4ytt\u00e4\u00e4 esimerkki\u00e4 PDF-tiedoston lataamisesta ja sen saamisesta saataville Mediakirjastossa.<\/p>\n<p>N\u00e4in tehdess\u00e4ni aion my\u00f6s k\u00e4sitell\u00e4 joitain n\u00e4k\u00f6kohtia, jotka tulisi ottaa huomioon asiakas- ja palvelinpuolella, sek\u00e4 asioita, joita tulee etsi\u00e4 aina, kun joku siirt\u00e4\u00e4 tietoja langan yli.<\/p>\n<h2>Tiedostojen lataaminen WordPressiss\u00e4 (ja mediakirjastoon)<\/h2>\n<p>Ennen kuin p\u00e4\u00e4sen t\u00e4m\u00e4n viestin ytimeen, oletan, ett\u00e4 sinulla on:<\/p>\n<ol>\n<li>alivalikkosivu tai j\u00e4rjestelm\u00e4nvalvojan sivun asetukset tiedostosy\u00f6tteell\u00e4,<\/li>\n<li>ett\u00e4 olet oikein m\u00e4\u00e4ritetty hyv\u00e4ksym\u00e4\u00e4n MIME-tyypit,<\/li>\n<li>ett\u00e4 olet tyytyv\u00e4inen pieneen JavaScriptiin,<\/li>\n<li>Ja olet mukava ty\u00f6skennell\u00e4 mukautettujen viestien kanssa tavallisen WordPress-sovellusliittym\u00e4n ulkopuolella.<\/li>\n<\/ol>\n<p>Jos n\u00e4in on, koko koodin pit\u00e4isi olla suhteellisen itsest\u00e4\u00e4n selv\u00e4\u00e4 (ei sill\u00e4, ettenk\u00f6 osoita sit\u00e4 pala kerrallaan), mutta jos jokin yll\u00e4 olevista kuulostaa h\u00e4mment\u00e4v\u00e4lt\u00e4, viesti saattaa sis\u00e4lt\u00e4\u00e4 materiaalia, joka vaatii v\u00e4h\u00e4n lis\u00e4\u00e4 tutkimusta Codexista tai JavaScriptist\u00e4, jonka annan t\u00e4\u00e4ll\u00e4.<\/p>\n<p>Siit\u00e4 huolimatta teen sen, mit\u00e4 voin tehd\u00e4, mahdollisimman kattavasti.<\/p>\n<h3>1 P\u00e4\u00e4idea<\/h3>\n<p>Ominaisuuden idea on yksinkertainen: Haluat antaa k\u00e4ytt\u00e4j\u00e4lle mahdollisuuden ladata PDF-tiedostoja WordPress-hallintaalueen kautta. Haluat my\u00f6s tiedoston olevan saatavilla Mediakirjastossa.<\/p>\n<p>Mahdollisuus tehd\u00e4 t\u00e4m\u00e4 ei ole vaikeaa, mutta on olemassa tapoja parantaa k\u00e4ytt\u00f6kokemusta, joita haluaisin k\u00e4sitell\u00e4 my\u00f6s t\u00e4ss\u00e4 viestiss\u00e4 (esim. en voi ladata mit\u00e4\u00e4n ennen kuin tiedosto on m\u00e4\u00e4ritetty sy\u00f6tt\u00f6kent\u00e4ss\u00e4, esimerkki).<\/p>\n<h3>2 K\u00e4ytt\u00f6liittym\u00e4 tiedostotyypin tarkistamiseen<\/h3>\n<p>Ensinn\u00e4kin, kuten sanoin viestin yl\u00e4osassa, oletan, ett\u00e4 sinulla on pohjaty\u00f6t WordPressin hallintasivulle. T\u00e4m\u00e4 voidaan tehd\u00e4 joillakin tavoilla \u2013 olen valinnut <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_submenu_page\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alivalikkosivun<\/a> k\u00e4yt\u00f6n, mutta on olemassa joitakin tapoja, joilla t\u00e4m\u00e4 voidaan tehd\u00e4.<\/p>\n<p>Toiseksi sivu on yksinkertainen: se sis\u00e4lt\u00e4\u00e4 sivun otsikon, tiedoston sy\u00f6tt\u00f6kent\u00e4n ja &#8217;Lataa&#8217;-painikkeen, joka on oletusarvoisesti poissa k\u00e4yt\u00f6st\u00e4:<\/p>\n<p>Huomaa, ett\u00e4 kun yrit\u00e4n lis\u00e4t\u00e4 kuvan, joka ei ole PDF-tiedosto, saan virheilmoituksen ja Lataa-painike on edelleen poissa k\u00e4yt\u00f6st\u00e4:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164805-61e76e82b59a7.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164805-61e76e82b59a7.png\" alt=\"Tiedostojen lataaminen WordPressiin, uudelleentarkastelu: Osa 1 - Asiakaspuoli\" ><\/a><\/p>\n<p>Mutta kun lis\u00e4\u00e4n tiedoston, joka on odotettua tyyppi\u00e4, Lataa-painike on k\u00e4yt\u00f6ss\u00e4:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164805-61e76e857097f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-164805-61e76e857097f.png\" alt=\"Tiedostojen lataaminen WordPressiin, uudelleentarkastelu: Osa 1 - Asiakaspuoli\" ><\/a><\/p>\n<p>T\u00e4m\u00e4 vaatii muutaman asian:<\/p>\n<ul>\n<li>JavaScript, joka haistaa tiedostotyypin,<\/li>\n<li>Osat, joiden n\u00e4kyvyys voidaan vaihtaa dynaamisesti JavaScriptin kautta,<\/li>\n<li>Ja mahdollisuus ottaa k\u00e4ytt\u00f6\u00f6n tai poistaa k\u00e4yt\u00f6st\u00e4 tiedostonsy\u00f6tt\u00f6painike.<\/li>\n<\/ul>\n<p><strong>T\u00e4rke\u00e4 huomautus on<\/strong>, ett\u00e4 <strong>asiakaspuolella:<\/strong> Voimme vain olettaa, ett\u00e4 tiedosto on oikea tiedostotyyppi sen laajennuksen perusteella. Meid\u00e4n on teht\u00e4v\u00e4 enemm\u00e4n ty\u00f6t\u00e4 palvelinpuolella varmistaaksemme, ett\u00e4 t\u00e4m\u00e4 on oikein.<\/p>\n<p>Tarkoituksena on kuitenkin tarkistaa asiakkaalta, ett\u00e4 annamme parhaan mahdollisen kokemuksen ilmoitusviestien ja tiedostotyypin perusteella ottavien tai poistavien vaihtoehtojen avulla.<\/p>\n<h3>3 Tiedostotyypin tarkistaminen asiakaspuolella<\/h3>\n<p>Oletetaan, ett\u00e4 t\u00e4ss\u00e4 esimerkiss\u00e4 meill\u00e4 on osa, joka hahmontuu aina, kun yrit\u00e4mme ladata tiedoston, joka ei ole PDF. S\u00e4il\u00f6n oletuksena on <strong>style=&quot;display:none;&quot;<\/strong> attribuutti, jota k\u00e4sittelemme pian JavaScriptin avulla:<\/p>\n<pre><code>&lt;?php\n\/**\n * Displays whenever a person tries to upload a file that isn't a PDF. This is toggled via JavaScript.\n *\/\n?&gt;\n\n&lt;div id=\"invalid-file-message\" class=\"error notice is-dismissible\" style=\"display:none;\"&gt;\n    &lt;p&gt;You have attempted to upload an invalid file type.&lt;\/p&gt;\n    &lt;button type=\"button\" class=\"notice-dismiss\"&gt;\n        &lt;span class=\"screen-reader-text\"&gt;Dismiss this notice.&lt;\/span&gt;\n    &lt;\/button&gt;\n&lt;\/div&gt;&lt;!-- #invalid-file-message --&gt;\n<\/code><\/pre>\n<p>Huomaa, ett\u00e4 t\u00e4m\u00e4n osion tunnus on <strong>invalid-file-message<\/strong>. T\u00e4m\u00e4 on hieman yleistetty, koska saatat haluta liitt\u00e4\u00e4 sen johonkin muuhun, mutta t\u00e4m\u00e4n viestin tarkoituksiin saat idean.<\/p>\n<p>Jos haluat vaihtaa t\u00e4m\u00e4n viestin n\u00e4kyvyytt\u00e4, sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 JavaScript-k\u00e4sittelij\u00e4, joka seuraa tiedoston sy\u00f6tt\u00f6elementin muutosta.<\/p>\n<h3>4 Tiedoston sy\u00f6tt\u00f6elementin valvonta<\/h3>\n<p>T\u00e4ss\u00e4 vaiheessa on oltava JavaScript-tiedosto, joka valvoo tiedoston sy\u00f6tt\u00f6elementin <strong>muutostapahtuman<\/strong> arvoa, jotta se voi m\u00e4\u00e4ritt\u00e4\u00e4, mit\u00e4 toimia tulee tehd\u00e4.<\/p>\n<p>Katso <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-01-montorfileupload-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">t\u00e4m\u00e4 koodi:<\/a><\/p>\n<p>T\u00e4m\u00e4 koodi etsii sy\u00f6tt\u00f6kent\u00e4n arvon. Jos tiedostotyyppi ei vastaa <strong>pdf<\/strong> -muotoa, se vaihtaa yll\u00e4 olevan virheilmoituksen n\u00e4kyvyytt\u00e4; muuten se n\u00e4ytt\u00e4\u00e4 latauspainikkeen.<\/p>\n<p>Ja muista, ett\u00e4 on hyv\u00e4 k\u00e4yt\u00e4nt\u00f6 asettaa t\u00e4m\u00e4 komentosarja vain hallinta-alueelle ja <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-02-enqueue-file-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sivulla, jota se vaaditaan<\/a> :<\/p>\n<pre><code>&lt;?php\n\npublic function enqueue()\n{\n    if (!is_admin() 'acme-upload-pdf' !== get_current_screen()-&gt;id) {\n        return;\n    }\n\n    wp_enqueue_script(\n        'acme-upload-pdf-admin',\n        $this-&gt;pluginUrl. 'assets\/scripts\/admin.js',\n        ['jquery'],\n    );\n}\n<\/code><\/pre>\n<p>Kaikki t\u00e4m\u00e4 varmistaa, ett\u00e4 laajennus rekister\u00f6i komentosarjan oikein sille sivulle, jolla sit\u00e4 tarvitaan, ei miss\u00e4\u00e4n muualla, ja ett\u00e4 se tarkistaa oikein varmistaakseen, ett\u00e4 m\u00e4\u00e4ritett\u00e4v\u00e4 tiedosto on oikean tyyppinen.<\/p>\n<h2>Mutta On enemm\u00e4n<\/h2>\n<p>Alunperin t\u00e4m\u00e4n piti olla kaikki yksi viesti, mutta kaiken vaativan sis\u00e4ll\u00f6n seulominen kest\u00e4isi liian kauan (ainakin mielest\u00e4ni). Joten yrit\u00e4n tehd\u00e4 siit\u00e4 hieman helpompaa seurata jakamalla sen pariin viestiin.<\/p>\n<p>Kuten aiemmin mainittiin, asiakaspuolella voimme tehd\u00e4 vain niin paljon. Toki, weUplo voi toteuttaa toimenpiteit\u00e4 parantaakseen k\u00e4ytt\u00f6kokemusta, mutta se ei ole turvallisin, ja palvelinpuolella on viel\u00e4 teht\u00e4v\u00e4\u00e4.<\/p>\n<p>T\u00e4m\u00e4n sarjan toisella puoliskolla tarkastelen PHP:t\u00e4, jota tarvitaan tiedostojen lataamisen hallintaan ja turvallisesti.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kun tarkastelet tiedostojen lataamista WordPressiin, on t\u00e4rke\u00e4\u00e4 ajatella my\u00f6s k\u00e4ytt\u00e4j\u00e4n kokemusta ja turvallisuusn\u00e4k\u00f6kohtia.<\/p>\n","protected":false},"author":1,"featured_media":164806,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,843,864],"tags":[1166],"class_list":["post-230266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=230266"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/230266\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/164806"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=230266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=230266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=230266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}