Failide üleslaadimine WordPressis, uuesti läbi vaadatud: 1. osa – kliendi pool

Aastaid tagasi kirjutasin sellest, kuidas administratiivalast WordPressi faile üles laadida . See postitus on praktiliselt selle postituse värskendus, kuid see hõlmab minu tehtud uusi kaalutlusi ja mõningaid muid minu arvates vajalikke protsesse.

Selle postituse jaoks toon näite PDF-faili üleslaadimisest ja sellest, kuidas see ka meediumiteegis kättesaadavaks teha.

Seda tehes kavatsen käsitleda ka mõningaid kaalutlusi, mida tuleks arvesse võtta kliendi ja serveri poolel, samuti asju, mida otsida, kui keegi edastab teavet juhtme kaudu.

Failide üleslaadimine WordPressis (ja meediumiteeki)

Enne selle postituse sisu juurde jõudmist eeldan, et teil on:

1. alammenüü leht või administraatori lehe seadistus failisisendiga,
2. Kas olete MIME tüüpide aktsepteerimiseks õigesti seadistatud,
3. Et tunneksite natukene JavaScripti,
4. Ja teile meeldib töötada kohandatud sõnumitega väljaspool standardset WordPress API-t.

Kui jah, siis peaks kogu kood olema suhteliselt iseenesestmõistetav (mitte, et ma seda tükkhaaval lahti ei hakkaks), aga kui mõni ülaltoodust tundub segane, siis võib postitus sisaldada materjali, mis nõuab veidi rohkem uurimusi Codexis või JavaScripti kohta, mida ma siin pakun.

Sellest hoolimata teen ma kõike, mida suudan, nii kõikehõlmavalt kui võimalik.

1 Põhiidee

Funktsiooni idee on lihtne: soovite anda kasutajale võimaluse PDF-faile üles laadida WordPressi haldusala kaudu. Samuti soovite, et fail oleks meediumiteegis saadaval.

Võimalus seda teha ei ole keeruline, kuid on olemas viise kasutajakogemuse parandamiseks, mida tahaksin ka selles postituses käsitleda (nt ei saa midagi üles laadida enne, kui fail on sisestuskastis täpsustatud, näide).

2 Kasutajaliides failitüübi kontrollimiseks

Esiteks, nagu ma postituse ülaosas ütlesin, eeldan, et olete WordPressi halduslehe jaoks aluse pannud. Seda saab teha mõnel viisil – olen valinud alammenüü lehe kasutamise, kuid seda saab teha mõnel viisil.

Teiseks on leht lihtne: see sisaldab lehe pealkirja, faili sisestusvälja ja nuppu Laadi üles, mis on vaikimisi keelatud:

Pange tähele, et kui proovin lisada pilti, mis pole PDF-fail, kuvatakse mulle veateade ja nupp „Laadi üles" on endiselt keelatud:

Kui aga lisan oodatud tüüpi faili, on nupp „Laadi üles” lubatud:

Selleks on vaja mõnda asja:

• JavaScript, mis nuusutab failitüübi,
• Nähtavusega osad, mida saab JavaScripti kaudu dünaamiliselt ümber lülitada,
• Ja võimalus lubada või keelata failisisestusnupp.

Oluline märkus on see , et kliendi poolel: saame eeldada, et fail on selle laiendi põhjal õige failitüüp. Selle täpsuse tagamiseks peame serveri poolel rohkem tööd tegema.

Kuid tasub kontrollida kliendi poolt, et tagada parima võimaliku kasutuskogemuse teavitussõnumite ja failitüübi alusel valikute lubamise või keelamise kaudu.

3 Failitüübi kontrollimine kliendi poolel

Oletame, et selle näite puhul on meil osa, mis renderdatakse alati, kui proovime üles laadida faili, mis ei ole PDF. Vaikimisi on konteineril style="display:none;" atribuut, mida me peagi JavaScripti kaudu manipuleerime:

<?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 -->

Pange tähele, et selle osa ID on kehtetu failisõnum. See on veidi üldistatud, kuna võite soovida selle eesliidet millegi muuga, kuid selle postituse jaoks saate sellest aru.

Selle sõnumi nähtavuse sisse- ja väljalülitamiseks peate seadistama JavaScriptis töötleja, et jälgida faili sisendelemendi muutust.

4 Faili sisendelemendi jälgimine

Siinkohal peab olema JavaScripti fail, mis jälgib faili sisendelemendi muudatuse sündmuse väärtust, et saaks määrata, milliseid toiminguid teha.

Heitke pilk sellele koodile:

See kood otsib sisestusvälja väärtust. Kui failitüüp ei ühti pdf -ga, lülitab see ülaltoodud veateate nähtavuse sisse ja välja; vastasel juhul kuvatakse üleslaadimisnupp.

Ja pidage meeles, et hea tava on panna see skript järjekorda ainult haldusalasse ja lehel, mis on vajalik :

<?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'],
    );
}

Kõik see tagab, et teie pistikprogramm registreerib skripti õigesti sellel lehel, kus seda vaja läheb, ja et see kontrollib õigesti, et määratav fail oleks õiget tüüpi.

Aga Seal on Rohkem

Algselt pidi see kõik olema üks postitus, kuid sisu kogus, mis seda kõike nõuab, võtaks liiga palju aega (vähemalt minu arvates). Nii et ma üritan selle jälgimist veidi lihtsamaks muuta, jagades selle paariks postituseks.

Nagu varem mainitud, saame kliendi poolel teha vaid nii palju. Muidugi saab weUplo kasutajakogemuse parandamiseks astuda samme, kuid see pole kõige turvalisem ja serveri poolel on vaja veel tööd teha.

Selle seeria teises pooles käsitlen PHP-d, mis on vajalik failide üleslaadimise haldamiseks ja selle turvaliseks tegemiseks.