{"id":229541,"date":"2022-11-22T20:15:00","date_gmt":"2022-11-22T17:15:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229541"},"modified":"2022-11-09T08:23:30","modified_gmt":"2022-11-09T05:23:30","slug":"przesylanie-plikow-w-wordpressie-zrewidowane-czesc-1-po-stronie-klienta","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/przesylanie-plikow-w-wordpressie-zrewidowane-czesc-1-po-stronie-klienta\/","title":{"rendered":"Przesy\u0142anie plik\u00f3w w WordPressie, zrewidowane: Cz\u0119\u015b\u0107 1 &#8211; Po stronie klienta"},"content":{"rendered":"\n<p>Lata temu pisa\u0142em o tym, jak <a href=\"https:\/\/tommcfarlin.com\/upload-files-in-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wgrywa\u0107 pliki w WordPressie<\/a> z obszaru administracyjnego. Ten post jest praktycznie aktualizacj\u0105 tego posta, ale obejmuje nowe rozwa\u017cania, kt\u00f3re podejmuj\u0119 i kilka innych proces\u00f3w, kt\u00f3re uwa\u017cam za konieczne.<\/p>\n<p>W tym po\u015bcie om\u00f3wi\u0119 przyk\u0142ad przesy\u0142ania pliku PDF i tego, jak udost\u0119pni\u0107 go w Bibliotece medi\u00f3w.<\/p>\n<p>Czyni\u0105c to, zamierzam r\u00f3wnie\u017c om\u00f3wi\u0107 pewne kwestie, kt\u00f3re nale\u017cy uwzgl\u0119dni\u0107 po stronie klienta i po stronie serwera, a tak\u017ce rzeczy, kt\u00f3rych nale\u017cy szuka\u0107, gdy kto\u015b przesy\u0142a informacje przez sie\u0107.<\/p>\n<h2>Przesy\u0142anie plik\u00f3w w WordPress (i do biblioteki medi\u00f3w)<\/h2>\n<p>Zanim przejd\u0119 do sedna tego postu, zak\u0142adam, \u017ce masz:<\/p>\n<ol>\n<li>Strona podmenu lub ustawienia strony administratora z wej\u015bciem pliku,<\/li>\n<li>Czy masz prawid\u0142owo skonfigurowan\u0105 akceptacj\u0119 typ\u00f3w MIME,<\/li>\n<li>\u017be czujesz si\u0119 komfortowo z odrobin\u0105 JavaScriptu,<\/li>\n<li>Mo\u017cesz swobodnie pracowa\u0107 z niestandardowymi wiadomo\u015bciami poza standardowym API WordPress.<\/li>\n<\/ol>\n<p>Je\u015bli tak, to ca\u0142y kod powinien by\u0107 w miar\u0119 oczywisty (nie \u017cebym nie rozk\u0142ada\u0142 go po kawa\u0142ku), ale je\u015bli kt\u00f3rykolwiek z powy\u017cszych brzmi dezorientuj\u0105co, to post mo\u017ce zawiera\u0107 troch\u0119 materia\u0142u, kt\u00f3ry wymaga troch\u0119 wi\u0119cej bada\u0144 w Kodeksie lub dotycz\u0105cych JavaScript, kt\u00f3re przedstawi\u0119 tutaj.<\/p>\n<p>Niezale\u017cnie od tego, zrobi\u0119 to, co mog\u0119, tak wyczerpuj\u0105co, jak to tylko mo\u017cliwe.<\/p>\n<h3>1 G\u0142\u00f3wna idea<\/h3>\n<p>Idea funkcji jest prosta: chcesz da\u0107 u\u017cytkownikowi mo\u017cliwo\u015b\u0107 przesy\u0142ania plik\u00f3w PDF za po\u015brednictwem obszaru administracyjnego WordPress. Chcesz r\u00f3wnie\u017c, aby plik by\u0142 dost\u0119pny w Bibliotece multimedi\u00f3w.<\/p>\n<p>Mo\u017cliwo\u015b\u0107 zrobienia tego nie jest trudna, ale s\u0105 sposoby na zwi\u0119kszenie do\u015bwiadczenia u\u017cytkownika, kt\u00f3re r\u00f3wnie\u017c chcia\u0142bym om\u00f3wi\u0107 w tym po\u015bcie (na przyk\u0142ad niemo\u017cno\u015b\u0107 wgrania czegokolwiek, dop\u00f3ki plik nie zostanie okre\u015blony w polu wprowadzania, na przyk\u0142ad przyk\u0142ad).<\/p>\n<h3>2 Interfejs u\u017cytkownika do weryfikacji typu pliku<\/h3>\n<p>Po pierwsze, jak powiedzia\u0142em na pocz\u0105tku postu, zak\u0142adam, \u017ce masz przygotowane podstawy dla strony administracyjnej w WordPressie. Mo\u017cna to zrobi\u0107 na kilka sposob\u00f3w \u2013 zdecydowa\u0142em si\u0119 u\u017cy\u0107 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_submenu_page\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">strony podmenu<\/a>, ale mo\u017cna to zrobi\u0107 na kilka sposob\u00f3w.<\/p>\n<p>Po drugie, strona jest prosta: zawiera tytu\u0142 strony, pole wej\u015bciowe pliku i przycisk \u201ePrze\u015blij&quot;, kt\u00f3ry jest domy\u015blnie wy\u0142\u0105czony:<\/p>\n<p>Zauwa\u017c, \u017ce gdy pr\u00f3buj\u0119 doda\u0107 obraz, kt\u00f3ry nie jest plikiem PDF, otrzymuj\u0119 komunikat o b\u0142\u0119dzie, a przycisk \u201ePrze\u015blij&#8221; jest nadal wy\u0142\u0105czony:<\/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=\"Przesy\u0142anie plik\u00f3w w WordPressie, zrewidowane: Cz\u0119\u015b\u0107 1 - Po stronie klienta\" ><\/a><\/p>\n<p>Ale kiedy dodaj\u0119 plik, kt\u00f3ry jest oczekiwanego typu, przycisk \u201ePrze\u015blij&#8221; jest w\u0142\u0105czony:<\/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=\"Przesy\u0142anie plik\u00f3w w WordPressie, zrewidowane: Cz\u0119\u015b\u0107 1 - Po stronie klienta\" ><\/a><\/p>\n<p>Wymaga to kilku rzeczy:<\/p>\n<ul>\n<li>JavaScript, kt\u00f3ry wyszukuje typ pliku,<\/li>\n<li>Cz\u0119\u015bci z widoczno\u015bci\u0105, kt\u00f3re mo\u017cna dynamicznie prze\u0142\u0105cza\u0107 za pomoc\u0105 JavaScript,<\/li>\n<li>Oraz mo\u017cliwo\u015b\u0107 w\u0142\u0105czania lub wy\u0142\u0105czania przycisku wprowadzania pliku.<\/li>\n<\/ul>\n<p><strong>Wa\u017cn\u0105 uwag\u0105 jest to<\/strong>, \u017ce <strong>po stronie klienta:<\/strong> mo\u017cemy jedynie za\u0142o\u017cy\u0107, \u017ce plik jest odpowiednim typem pliku na podstawie jego rozszerzenia. B\u0119dziemy musieli wykona\u0107 wi\u0119cej pracy po stronie serwera, aby upewni\u0107 si\u0119, \u017ce jest to dok\u0142adne.<\/p>\n<p>Ale punkt sprawdzania po stronie klienta, aby upewni\u0107 si\u0119, \u017ce zapewniamy najlepsz\u0105 mo\u017cliw\u0105 jako\u015b\u0107 poprzez powiadomienia i w\u0142\u0105czanie lub wy\u0142\u0105czanie opcji w zale\u017cno\u015bci od typu pliku.<\/p>\n<h3>3 Weryfikacja typu pliku po stronie klienta<\/h3>\n<p>Za\u0142\u00f3\u017cmy, \u017ce w tym przyk\u0142adzie mamy podszablon, kt\u00f3ry renderuje si\u0119 za ka\u017cdym razem, gdy pr\u00f3bujemy przes\u0142a\u0107 plik, kt\u00f3ry nie jest plikiem PDF. Domy\u015blnie kontener ma <strong>style=&quot;display:none;&quot;<\/strong> atrybut, kt\u00f3rym wkr\u00f3tce b\u0119dziemy manipulowa\u0107 przez JavaScript:<\/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>Zauwa\u017c, \u017ce ta cz\u0119\u015b\u0107 ma identyfikator <strong>niewa\u017cny-plik-wiadomo\u015b\u0107<\/strong>. Jest to nieco uog\u00f3lnione, poniewa\u017c mo\u017cesz chcie\u0107 poprzedzi\u0107 to czym\u015b innym, ale na potrzeby tego postu masz pomys\u0142.<\/p>\n<p>Aby prze\u0142\u0105czy\u0107 widoczno\u015b\u0107 tej wiadomo\u015bci, musisz skonfigurowa\u0107 procedur\u0119 obs\u0142ugi w JavaScript, aby monitorowa\u0107 zmiany w elemencie wej\u015bciowym pliku.<\/p>\n<h3>4 Monitorowanie elementu wej\u015bciowego pliku<\/h3>\n<p>W tym momencie musi istnie\u0107 plik JavaScript, kt\u00f3ry monitoruje warto\u015b\u0107 zdarzenia <strong>zmiany<\/strong> elementu wej\u015bciowego pliku, aby m\u00f3g\u0142 okre\u015bli\u0107, jakie dzia\u0142ania nale\u017cy podj\u0105\u0107.<\/p>\n<p>Sp\u00f3jrz na <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-01-montorfileupload-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ten kod:<\/a><\/p>\n<p>Ten kod b\u0119dzie szuka\u0142 warto\u015bci pola wej\u015bciowego. Je\u015bli typ pliku nie pasuje do <strong>pdf<\/strong>, prze\u0142\u0105czy widoczno\u015b\u0107 powy\u017cszego komunikatu o b\u0142\u0119dzie; w przeciwnym razie wy\u015bwietli przycisk przesy\u0142ania.<\/p>\n<p>I pami\u0119taj, dobr\u0105 praktyk\u0105 jest umieszczanie tego skryptu w kolejce tylko w obszarze administracyjnym i na <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-02-enqueue-file-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">stronie jest on wymagany<\/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>Wszystko to zapewni, \u017ce wtyczka poprawnie zarejestruje skrypt na stronie, na kt\u00f3rej jest potrzebny, nigdzie indziej, oraz \u017ce poprawnie sprawdzi, czy okre\u015blony plik jest w\u0142a\u015bciwego typu.<\/p>\n<h2>Ale jest wi\u0119cej<\/h2>\n<p>Pierwotnie mia\u0142 to by\u0107 jeden post, ale ilo\u015b\u0107 tre\u015bci, kt\u00f3ra wymaga\u0142aby tego wszystkiego, zaj\u0119\u0142aby zbyt du\u017co czasu (przynajmniej moim zdaniem). Dlatego staram si\u0119 nieco u\u0142atwi\u0107 \u015bledzenie, dziel\u0105c to na kilka post\u00f3w.<\/p>\n<p>Jak wspomniano wcze\u015bniej, po stronie klienta mo\u017cemy zrobi\u0107 tylko tyle. Oczywi\u015bcie, weUplo mo\u017ce podj\u0105\u0107 pewne kroki, aby poprawi\u0107 komfort u\u017cytkowania, ale nie jest to najbezpieczniejsze, a po stronie serwera jest jeszcze wi\u0119cej do zrobienia.<\/p>\n<p>W drugiej po\u0142owie tej serii przyjrz\u0119 si\u0119 PHP wymaganemu do zarz\u0105dzania przesy\u0142aniem plik\u00f3w i bezpiecznego robienia tego.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Patrz\u0105c na przesy\u0142anie plik\u00f3w w WordPressie, nale\u017cy r\u00f3wnie\u017c pomy\u015ble\u0107 o do\u015bwiadczeniu u\u017cytkownika i aspektach bezpiecze\u0144stwa.<\/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":[721,897,845,866],"tags":[1169],"class_list":["post-229541","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-kod","category-samouczki","category-wordpress-7","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=229541"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/229541\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/164806"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=229541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=229541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=229541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}