Caricamento di file in WordPress, rivisitato: Parte 1 – Il lato client
Anni fa ho scritto su come caricare file in WordPress dall’area amministrativa. Questo post è praticamente un aggiornamento di quel post, ma copre nuove considerazioni che faccio e alcuni altri processi che ritengo necessari.
Per questo post, lavorerò sull’esempio del caricamento di un file PDF e su come renderlo disponibile nella Libreria multimediale.
In tal modo, ho anche intenzione di coprire alcune considerazioni che dovrebbero essere fatte sul lato client e sul lato server, nonché le cose da cercare ogni volta che qualcuno trasferisce informazioni attraverso il cavo.
Caricamento di file in WordPress (e nella libreria multimediale)
Prima di arrivare al succo di questo post, presumo che tu abbia:
- Una pagina di sottomenu o una pagina di amministrazione con un input di file,
- Che tu sia impostato correttamente per accettare i tipi MIME,
- Che ti trovi bene con un po’ di JavaScript,
- E ti senti a tuo agio a lavorare con messaggi personalizzati al di fuori dell’API standard di WordPress.
Se è così, tutto il codice dovrebbe essere relativamente autoesplicativo (non che non lo analizzerò pezzo per pezzo), ma se qualcuno dei precedenti suona confuso, allora il post potrebbe includere del materiale che richiede un po’ ulteriori ricerche nel Codex o riguardanti JavaScript che fornirò qui.
In ogni caso, farò quello che posso per essere il più completo possibile.
1 L’idea principale
L’idea della funzione è semplice: vuoi dare all’utente la possibilità di caricare file PDF tramite l’area di amministrazione di WordPress. Vuoi anche che il file sia disponibile nel Catalogo multimediale.
La possibilità di farlo non è difficile, ma ci sono modi per migliorare l’esperienza dell’utente che vorrei anche trattare in questo post (come non poter caricare nulla fino a quando il file non è specificato nella casella di input, per esempio).
2 L’interfaccia utente per la verifica del tipo di file
Innanzitutto, come ho detto all’inizio del post, presumo che tu abbia gettato le basi per la pagina di amministrazione in WordPress. Questo può essere fatto in alcuni modi: ho scelto di utilizzare una pagina di sottomenu, ma ci sono alcuni modi in cui è possibile farlo.
In secondo luogo, la pagina è semplice: include il titolo della pagina, un campo di immissione del file e un pulsante "Carica" disabilitato per impostazione predefinita:
Nota che quando provo ad aggiungere un’immagine che non è un PDF, viene visualizzato un messaggio di errore e il pulsante "Carica" è ancora disabilitato:
Ma quando aggiungo un file del tipo previsto, il pulsante "Carica" è abilitato:
Ciò richiede alcune cose:
- JavaScript che annusa il tipo di file,
- Parziali con visibilità che può essere attivata/disattivata dinamicamente tramite JavaScript,
- E la possibilità di abilitare o disabilitare un pulsante di input di file.
Una nota importante è quella sul lato client: possiamo solo presumere che il file sia il tipo di file corretto in base alla sua estensione. Dovremo fare più lavoro sul lato server per assicurarci che sia accurato.
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.
3 Verifica del tipo di file sul lato client
Supponiamo per questo esempio di avere un parziale che esegue il rendering ogni volta che tentiamo di caricare un file che non è un PDF. Per impostazione predefinita, il contenitore ha un style="display:none;" attributo che manipoleremo a breve tramite JavaScript:
<?php
/**
* Displays whenever a person tries to upload a file that isn't a PDF. This is toggled via JavaScript.
*/
?>
<div id="invalid-file-message" class="error notice is-dismissible" style="display:none;">
<p>You have attempted to upload an invalid file type.</p>
<button type="button" class="notice-dismiss">
<span class="screen-reader-text">Dismiss this notice.</span>
</button>
</div><!-- #invalid-file-message -->
Si noti che questo parziale ha un ID di file-message non valido. Questo è un po ‘generalizzato in quanto potresti voler anteporre qualcos’altro, ma ai fini di questo post, hai un’idea.
Per attivare o disattivare la visibilità di questo messaggio, devi impostare un gestore in JavaScript per monitorare la modifica nell’elemento di input del file.
4 Monitoraggio dell’elemento di input del file
A questo punto, è necessario che sia presente un file JavaScript che monitori il valore dell’evento di modifica dell’elemento di input del file in modo che possa determinare quale linea di condotta intraprendere.
Dai un’occhiata a questo codice:
Questo codice cercherà il valore del campo di input. Se il tipo di file non corrisponde a pdf, cambierà la visibilità del messaggio di errore sopra; in caso contrario, verrà visualizzato il pulsante di caricamento.
E ricorda, è buona norma accodare questo script solo nell’area di amministrazione e nella pagina è richiesto :
<?php
public function enqueue()
{
if (!is_admin() 'acme-upload-pdf' !== get_current_screen()->id) {
return;
}
wp_enqueue_script(
'acme-upload-pdf-admin',
$this->pluginUrl. 'assets/scripts/admin.js',
['jquery'],
);
}
Tutto ciò assicurerà che il tuo plug-in registri correttamente lo script sulla pagina in cui è necessario, in nessun altro luogo, e che controlli correttamente per assicurarsi che il file specificato sia del tipo giusto.
Ma c’è di più
In origine, questo sarebbe stato tutto un post, ma la quantità di contenuti per richiederli tutti richiederebbe troppo tempo per essere vagliata (almeno, secondo me). Quindi sto cercando di renderlo un po’ più facile da seguire suddividendolo in un paio di post.
Come accennato in precedenza, c’è solo così tanto che possiamo fare sul lato client. Certo, ci sono passaggi che weUplo può intraprendere per migliorare l’esperienza dell’utente, ma non è il più sicuro e c’è più lavoro da fare sul lato server.
Nella seconda metà di questa serie, esaminerò il PHP richiesto per gestire il caricamento dei file e farlo in modo sicuro.