{"id":229698,"date":"2022-11-22T19:59:00","date_gmt":"2022-11-22T16:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229698"},"modified":"2022-11-09T15:59:52","modified_gmt":"2022-11-09T12:59:52","slug":"failide-ueleslaadimine-wordpressis-uuesti-laebi-vaadatud-1-osa-kliendi-pool","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/failide-ueleslaadimine-wordpressis-uuesti-laebi-vaadatud-1-osa-kliendi-pool\/","title":{"rendered":"Failide \u00fcleslaadimine WordPressis, uuesti l\u00e4bi vaadatud: 1. osa \u2013 kliendi pool"},"content":{"rendered":"\n<p>Aastaid tagasi kirjutasin sellest, kuidas administratiivalast <a href=\"https:\/\/tommcfarlin.com\/upload-files-in-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi faile \u00fcles laadida .<\/a> See postitus on praktiliselt selle postituse v\u00e4rskendus, kuid see h\u00f5lmab minu tehtud uusi kaalutlusi ja m\u00f5ningaid muid minu arvates vajalikke protsesse.<\/p>\n<p>Selle postituse jaoks toon n\u00e4ite PDF-faili \u00fcleslaadimisest ja sellest, kuidas see ka meediumiteegis k\u00e4ttesaadavaks teha.<\/p>\n<p>Seda tehes kavatsen k\u00e4sitleda ka m\u00f5ningaid kaalutlusi, mida tuleks arvesse v\u00f5tta kliendi ja serveri poolel, samuti asju, mida otsida, kui keegi edastab teavet juhtme kaudu.<\/p>\n<h2>Failide \u00fcleslaadimine WordPressis (ja meediumiteeki)<\/h2>\n<p>Enne selle postituse sisu juurde j\u00f5udmist eeldan, et teil on:<\/p>\n<ol>\n<li>alammen\u00fc\u00fc leht v\u00f5i administraatori lehe seadistus failisisendiga,<\/li>\n<li>Kas olete MIME t\u00fc\u00fcpide aktsepteerimiseks \u00f5igesti seadistatud,<\/li>\n<li>Et tunneksite natukene JavaScripti,<\/li>\n<li>Ja teile meeldib t\u00f6\u00f6tada kohandatud s\u00f5numitega v\u00e4ljaspool standardset WordPress API-t.<\/li>\n<\/ol>\n<p>Kui jah, siis peaks kogu kood olema suhteliselt iseenesestm\u00f5istetav (mitte, et ma seda t\u00fckkhaaval lahti ei hakkaks), aga kui m\u00f5ni \u00fclaltoodust tundub segane, siis v\u00f5ib postitus sisaldada materjali, mis n\u00f5uab veidi rohkem uurimusi Codexis v\u00f5i JavaScripti kohta, mida ma siin pakun.<\/p>\n<p>Sellest hoolimata teen ma k\u00f5ike, mida suudan, nii k\u00f5ikeh\u00f5lmavalt kui v\u00f5imalik.<\/p>\n<h3>1 P\u00f5hiidee<\/h3>\n<p>Funktsiooni idee on lihtne: soovite anda kasutajale v\u00f5imaluse PDF-faile \u00fcles laadida WordPressi haldusala kaudu. Samuti soovite, et fail oleks meediumiteegis saadaval.<\/p>\n<p>V\u00f5imalus seda teha ei ole keeruline, kuid on olemas viise kasutajakogemuse parandamiseks, mida tahaksin ka selles postituses k\u00e4sitleda (nt ei saa midagi \u00fcles laadida enne, kui fail on sisestuskastis t\u00e4psustatud, n\u00e4ide).<\/p>\n<h3>2 Kasutajaliides failit\u00fc\u00fcbi kontrollimiseks<\/h3>\n<p>Esiteks, nagu ma postituse \u00fclaosas \u00fctlesin, eeldan, et olete WordPressi halduslehe jaoks aluse pannud. Seda saab teha m\u00f5nel viisil \u2013 olen valinud <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_submenu_page\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">alammen\u00fc\u00fc lehe<\/a> kasutamise, kuid seda saab teha m\u00f5nel viisil.<\/p>\n<p>Teiseks on leht lihtne: see sisaldab lehe pealkirja, faili sisestusv\u00e4lja ja nuppu Laadi \u00fcles, mis on vaikimisi keelatud:<\/p>\n<p>Pange t\u00e4hele, et kui proovin lisada pilti, mis pole PDF-fail, kuvatakse mulle veateade ja nupp \u201eLaadi \u00fcles&quot; on endiselt keelatud:<\/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=\"Failide \u00fcleslaadimine WordPressis, uuesti l\u00e4bi vaadatud: 1. osa \u2013 kliendi pool\" ><\/a><\/p>\n<p>Kui aga lisan oodatud t\u00fc\u00fcpi faili, on nupp \u201eLaadi \u00fcles&#8221; lubatud:<\/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=\"Failide \u00fcleslaadimine WordPressis, uuesti l\u00e4bi vaadatud: 1. osa \u2013 kliendi pool\" ><\/a><\/p>\n<p>Selleks on vaja m\u00f5nda asja:<\/p>\n<ul>\n<li>JavaScript, mis nuusutab failit\u00fc\u00fcbi,<\/li>\n<li>N\u00e4htavusega osad, mida saab JavaScripti kaudu d\u00fcnaamiliselt \u00fcmber l\u00fclitada,<\/li>\n<li>Ja v\u00f5imalus lubada v\u00f5i keelata failisisestusnupp.<\/li>\n<\/ul>\n<p><strong>Oluline m\u00e4rkus on<\/strong> see <strong>, et kliendi poolel:<\/strong> saame eeldada, et fail on selle laiendi p\u00f5hjal \u00f5ige failit\u00fc\u00fcp. Selle t\u00e4psuse tagamiseks peame serveri poolel rohkem t\u00f6\u00f6d tegema.<\/p>\n<p>Kuid tasub kontrollida kliendi poolt, et tagada parima v\u00f5imaliku kasutuskogemuse teavituss\u00f5numite ja failit\u00fc\u00fcbi alusel valikute lubamise v\u00f5i keelamise kaudu.<\/p>\n<h3>3 Failit\u00fc\u00fcbi kontrollimine kliendi poolel<\/h3>\n<p>Oletame, et selle n\u00e4ite puhul on meil osa, mis renderdatakse alati, kui proovime \u00fcles laadida faili, mis ei ole PDF. Vaikimisi on konteineril <strong>style=&quot;display:none;&quot;<\/strong> atribuut, mida me peagi JavaScripti kaudu manipuleerime:<\/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>Pange t\u00e4hele, et selle osa ID on <strong>kehtetu failis\u00f5num<\/strong>. See on veidi \u00fcldistatud, kuna v\u00f5ite soovida selle eesliidet millegi muuga, kuid selle postituse jaoks saate sellest aru.<\/p>\n<p>Selle s\u00f5numi n\u00e4htavuse sisse- ja v\u00e4ljal\u00fclitamiseks peate seadistama JavaScriptis t\u00f6\u00f6tleja, et j\u00e4lgida faili sisendelemendi muutust.<\/p>\n<h3>4 Faili sisendelemendi j\u00e4lgimine<\/h3>\n<p>Siinkohal peab olema JavaScripti fail, mis j\u00e4lgib faili sisendelemendi <strong>muudatuse<\/strong> s\u00fcndmuse v\u00e4\u00e4rtust, et saaks m\u00e4\u00e4rata, milliseid toiminguid teha.<\/p>\n<p>Heitke pilk <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-01-montorfileupload-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sellele koodile:<\/a><\/p>\n<p>See kood otsib sisestusv\u00e4lja v\u00e4\u00e4rtust. Kui failit\u00fc\u00fcp ei \u00fchti <strong>pdf<\/strong> -ga, l\u00fclitab see \u00fclaltoodud veateate n\u00e4htavuse sisse ja v\u00e4lja; vastasel juhul kuvatakse \u00fcleslaadimisnupp.<\/p>\n<p>Ja pidage meeles, et hea tava on panna see skript j\u00e4rjekorda ainult haldusalasse ja <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-02-enqueue-file-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">lehel, mis on vajalik<\/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>K\u00f5ik see tagab, et teie pistikprogramm registreerib skripti \u00f5igesti sellel lehel, kus seda vaja l\u00e4heb, ja et see kontrollib \u00f5igesti, et m\u00e4\u00e4ratav fail oleks \u00f5iget t\u00fc\u00fcpi.<\/p>\n<h2>Aga Seal on Rohkem<\/h2>\n<p>Algselt pidi see k\u00f5ik olema \u00fcks postitus, kuid sisu kogus, mis seda k\u00f5ike n\u00f5uab, v\u00f5taks liiga palju aega (v\u00e4hemalt minu arvates). Nii et ma \u00fcritan selle j\u00e4lgimist veidi lihtsamaks muuta, jagades selle paariks postituseks.<\/p>\n<p>Nagu varem mainitud, saame kliendi poolel teha vaid nii palju. Muidugi saab weUplo kasutajakogemuse parandamiseks astuda samme, kuid see pole k\u00f5ige turvalisem ja serveri poolel on vaja veel t\u00f6\u00f6d teha.<\/p>\n<p>Selle seeria teises pooles k\u00e4sitlen PHP-d, mis on vajalik failide \u00fcleslaadimise haldamiseks ja selle turvaliseks tegemiseks.<\/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>WordPressis failide \u00fcleslaadimisel on oluline m\u00f5elda ka kasutaja kogemusele ja turvalisuse aspektidele.<\/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":[718,894,842,863],"tags":[1165,1165],"class_list":["post-229698","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229698","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=229698"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/229698\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/164806"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=229698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=229698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=229698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}