{"id":230441,"date":"2022-11-22T20:14:00","date_gmt":"2022-11-22T17:14:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230441"},"modified":"2022-11-09T22:24:19","modified_gmt":"2022-11-09T19:24:19","slug":"caricamento-di-file-in-wordpress-rivisitato-parte-1-il-lato-client","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/caricamento-di-file-in-wordpress-rivisitato-parte-1-il-lato-client\/","title":{"rendered":"Caricamento di file in WordPress, rivisitato: Parte 1 &#8211; Il lato client"},"content":{"rendered":"\n<p>Anni fa ho scritto su come <a href=\"https:\/\/tommcfarlin.com\/upload-files-in-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">caricare file in WordPress<\/a> dall&#8217;area amministrativa. Questo post \u00e8 praticamente un aggiornamento di quel post, ma copre nuove considerazioni che faccio e alcuni altri processi che ritengo necessari.<\/p>\n<p>Per questo post, lavorer\u00f2 sull&#8217;esempio del caricamento di un file PDF e su come renderlo disponibile nella Libreria multimediale.<\/p>\n<p>In tal modo, ho anche intenzione di coprire alcune considerazioni che dovrebbero essere fatte sul lato client e sul lato server, nonch\u00e9 le cose da cercare ogni volta che qualcuno trasferisce informazioni attraverso il cavo.<\/p>\n<h2>Caricamento di file in WordPress (e nella libreria multimediale)<\/h2>\n<p>Prima di arrivare al succo di questo post, presumo che tu abbia:<\/p>\n<ol>\n<li>Una pagina di sottomenu o una pagina di amministrazione con un input di file,<\/li>\n<li>Che tu sia impostato correttamente per accettare i tipi MIME,<\/li>\n<li>Che ti trovi bene con un po&#8217; di JavaScript,<\/li>\n<li>E ti senti a tuo agio a lavorare con messaggi personalizzati al di fuori dell&#8217;API standard di WordPress.<\/li>\n<\/ol>\n<p>Se \u00e8 cos\u00ec, tutto il codice dovrebbe essere relativamente autoesplicativo (non che non lo analizzer\u00f2 pezzo per pezzo), ma se qualcuno dei precedenti suona confuso, allora il post potrebbe includere del materiale che richiede un po&#8217; ulteriori ricerche nel Codex o riguardanti JavaScript che fornir\u00f2 qui.<\/p>\n<p>In ogni caso, far\u00f2 quello che posso per essere il pi\u00f9 completo possibile.<\/p>\n<h3>1 L&#8217;idea principale<\/h3>\n<p>L&#8217;idea della funzione \u00e8 semplice: vuoi dare all&#8217;utente la possibilit\u00e0 di caricare file PDF tramite l&#8217;area di amministrazione di WordPress. Vuoi anche che il file sia disponibile nel Catalogo multimediale.<\/p>\n<p>La possibilit\u00e0 di farlo non \u00e8 difficile, ma ci sono modi per migliorare l&#8217;esperienza dell&#8217;utente che vorrei anche trattare in questo post (come non poter caricare nulla fino a quando il file non \u00e8 specificato nella casella di input, per esempio).<\/p>\n<h3>2 L&#8217;interfaccia utente per la verifica del tipo di file<\/h3>\n<p>Innanzitutto, come ho detto all&#8217;inizio del post, presumo che tu abbia gettato le basi per la pagina di amministrazione in WordPress. Questo pu\u00f2 essere fatto in alcuni modi: ho scelto di utilizzare <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_submenu_page\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">una pagina di sottomenu<\/a>, ma ci sono alcuni modi in cui \u00e8 possibile farlo.<\/p>\n<p>In secondo luogo, la pagina \u00e8 semplice: include il titolo della pagina, un campo di immissione del file e un pulsante &quot;Carica&quot; \u200b\u200bdisabilitato per impostazione predefinita:<\/p>\n<p>Nota che quando provo ad aggiungere un&#8217;immagine che non \u00e8 un PDF, viene visualizzato un messaggio di errore e il pulsante &quot;Carica&quot; \u200b\u200b\u00e8 ancora disabilitato:<\/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=\"Caricamento di file in WordPress, rivisitato: Parte 1 - Il lato client\" ><\/a><\/p>\n<p>Ma quando aggiungo un file del tipo previsto, il pulsante &quot;Carica&quot; \u200b\u200b\u00e8 abilitato:<\/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=\"Caricamento di file in WordPress, rivisitato: Parte 1 - Il lato client\" ><\/a><\/p>\n<p>Ci\u00f2 richiede alcune cose:<\/p>\n<ul>\n<li>JavaScript che annusa il tipo di file,<\/li>\n<li>Parziali con visibilit\u00e0 che pu\u00f2 essere attivata\/disattivata dinamicamente tramite JavaScript,<\/li>\n<li>E la possibilit\u00e0 di abilitare o disabilitare un pulsante di input di file.<\/li>\n<\/ul>\n<p><strong>Una nota importante \u00e8<\/strong> quella <strong>sul lato client:<\/strong> possiamo solo presumere che il file sia il tipo di file corretto in base alla sua estensione. Dovremo fare pi\u00f9 lavoro sul lato server per assicurarci che sia accurato.<\/p>\n<p>Ma il punto di controllare sul lato client per assicurarci di offrire la migliore esperienza possibile attraverso messaggi di notifica e abilitazione o disabilitazione delle opzioni in base al tipo di file.<\/p>\n<h3>3 Verifica del tipo di file sul lato client<\/h3>\n<p>Supponiamo per questo esempio di avere un parziale che esegue il rendering ogni volta che tentiamo di caricare un file che non \u00e8 un PDF. Per impostazione predefinita, il contenitore ha un <strong>style=&quot;display:none;&quot;<\/strong> attributo che manipoleremo a breve tramite 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>Si noti che questo parziale ha un ID di <strong>file-message non valido<\/strong>. Questo \u00e8 un po &#8216;generalizzato in quanto potresti voler anteporre qualcos&#8217;altro, ma ai fini di questo post, hai un&#8217;idea.<\/p>\n<p>Per attivare o disattivare la visibilit\u00e0 di questo messaggio, devi impostare un gestore in JavaScript per monitorare la modifica nell&#8217;elemento di input del file.<\/p>\n<h3>4 Monitoraggio dell&#8217;elemento di input del file<\/h3>\n<p><strong>A questo punto, \u00e8 necessario che sia presente un file JavaScript che monitori il valore dell&#8217;evento di modifica<\/strong> dell&#8217;elemento di input del file in modo che possa determinare quale linea di condotta intraprendere.<\/p>\n<p>Dai un&#8217;occhiata a <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-01-montorfileupload-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">questo codice:<\/a><\/p>\n<p>Questo codice cercher\u00e0 il valore del campo di input. Se il tipo di file non corrisponde a <strong>pdf<\/strong>, cambier\u00e0 la visibilit\u00e0 del messaggio di errore sopra; in caso contrario, verr\u00e0 visualizzato il pulsante di caricamento.<\/p>\n<p>E ricorda, \u00e8 buona norma accodare questo script solo nell&#8217;area di amministrazione e nella <a href=\"https:\/\/gist.github.com\/tommcfarlin\/79c7f788488e6dc84079fcf3795fa417#file-02-enqueue-file-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pagina \u00e8 richiesto<\/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>Tutto ci\u00f2 assicurer\u00e0 che il tuo plug-in registri correttamente lo script sulla pagina in cui \u00e8 necessario, in nessun altro luogo, e che controlli correttamente per assicurarsi che il file specificato sia del tipo giusto.<\/p>\n<h2>Ma c&#8217;\u00e8 di pi\u00f9<\/h2>\n<p>In origine, questo sarebbe stato tutto un post, ma la quantit\u00e0 di contenuti per richiederli tutti richiederebbe troppo tempo per essere vagliata (almeno, secondo me). Quindi sto cercando di renderlo un po&#8217; pi\u00f9 facile da seguire suddividendolo in un paio di post.<\/p>\n<p>Come accennato in precedenza, c&#8217;\u00e8 solo cos\u00ec tanto che possiamo fare sul lato client. Certo, ci sono passaggi che weUplo pu\u00f2 intraprendere per migliorare l&#8217;esperienza dell&#8217;utente, ma non \u00e8 il pi\u00f9 sicuro e c&#8217;\u00e8 pi\u00f9 lavoro da fare sul lato server.<\/p>\n<p>Nella seconda met\u00e0 di questa serie, esaminer\u00f2 il PHP richiesto per gestire il caricamento dei file e farlo in modo sicuro.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando si esamina il caricamento di file in WordPress, \u00e8 importante pensare anche all&#8217;esperienza dell&#8217;utente e agli aspetti di sicurezza.<\/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":[896,720,844,865],"tags":[1168],"class_list":["post-230441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codice","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230441","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=230441"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/230441\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/164806"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=230441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=230441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=230441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}