Ladda upp filer i WordPress, Revisited: Del 1 – Kundsidan

För flera år sedan skrev jag om hur man laddar upp filer i WordPress från det administrativa området. Det här inlägget är praktiskt taget en uppdatering av det inlägget, men det täcker nya överväganden som jag gör och några andra processer som jag tycker är nödvändiga.

För det här inlägget kommer jag att arbeta bort exemplet med att ladda upp en PDF-fil och hur man även gör den tillgänglig i mediebiblioteket.

Genom att göra det planerar jag också att täcka några överväganden som bör göras på klientsidan och serversidan samt saker att leta efter när någon överför information över tråden.

Ladda upp filer i WordPress (och till mediebiblioteket)

Innan jag kommer till kärnan i det här inlägget antar jag att du har:

1. En undermenysida eller administratörssida med en filinmatning,
2. Att du är rätt inställd för att acceptera MIME-typer,
3. Att du är bekväm med lite JavaScript,
4. Och du är bekväm med att arbeta med anpassade meddelanden utanför standard WordPress API.

Om så är fallet bör all kod vara relativt självförklarande (inte för att jag inte ska dela upp den bit för bit), men om något av ovanstående låter förvirrande kan inlägget innehålla en del material som kräver lite mer forskning i Codex eller om JavaScript som jag kommer att tillhandahålla här.

Oavsett vilket kommer jag att göra det jag kan göra så omfattande som möjligt.

1 Huvudidén

Idén med funktionen är enkel: Du vill ge användaren möjligheten att ladda upp PDF-filer via WordPress administrationsområde. Du vill också att filen ska finnas tillgänglig i mediebiblioteket.

Möjligheten att göra detta är inte svårt, men det finns sätt att förbättra användarens upplevelse som jag också skulle vilja ta upp i det här inlägget (som att inte kunna ladda upp något förrän filen har specificerats i inmatningsrutan, för exempel).

2 Användargränssnittet för att verifiera filtypen

Först, som jag sa överst i inlägget, utgår jag från att du har grunden lagd för administrationssidan i WordPress. Detta kan göras på vissa sätt – jag har valt att använda en undermenysida, men det finns några sätt detta kan göras.

För det andra är sidan enkel: den innehåller sidtiteln, ett filinmatningsfält och en "Ladda upp"-knapp som är inaktiverad som standard:

Observera att när jag försöker lägga till en bild som inte är en PDF får jag ett felmeddelande och knappen "Ladda upp" är fortfarande inaktiverad:

Men när jag lägger till en fil som är av den förväntade typen är knappen "Ladda upp" aktiverad:

Detta kräver några saker:

• JavaScript som sniffar ut filtypen,
• Delar med synlighet som kan växlas dynamiskt via JavaScript,
• Och möjligheten att aktivera eller inaktivera en filinmatningsknapp.

En viktig anmärkning är att på klientsidan: Vi kan bara anta att filen är av rätt filtyp baserat på dess tillägg. Vi måste göra mer arbete på serversidan för att säkerställa att detta är korrekt.

Men poängen med att kontrollera på klientsidan för att se till att vi ger den bästa möjliga upplevelsen genom aviseringsmeddelanden och aktivera eller inaktivera alternativ baserat på typen av fil.

3 Verifiera filtypen på klientsidan

Anta att vi för det här exemplet har en partial som återges när vi försöker ladda upp en fil som inte är en PDF. Som standard har behållaren en style="display:none;" attribut som vi kommer att manipulera via JavaScript inom kort:

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

Observera att denna del har ett ID för invalid-file-message. Detta är lite generaliserat eftersom du kanske vill prefixa det med något annat, men för detta inläggs syfte förstår du idén.

För att växla synligheten för detta meddelande måste du ställa in en hanterare i JavaScript för att övervaka förändringen i filinmatningselementet.

4 Övervaka filinmatningselementet

Vid det här laget måste det finnas en JavaScript-fil som övervakar värdet på filinmatningselementets ändringshändelse så att den kan avgöra vilken åtgärd som ska vidtas.

Ta en titt på den här koden:

Denna kod kommer att leta efter värdet på inmatningsfältet. Om filtypen inte matchar pdf kommer den att växla synligheten för felmeddelandet ovan; annars visas uppladdningsknappen.

Och kom ihåg att det är bra att köa det här skriptet endast i administrationsområdet och på sidan som det krävs :

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

Allt detta kommer att se till att din plugin registrerar skriptet korrekt på sidan där det behövs, ingen annanstans, och att det kontrolleras korrekt för att säkerställa att filen som specificeras är av rätt typ.

Men det finns mer

Ursprungligen skulle detta vara ett inlägg, men mängden innehåll för att kräva allt skulle ta för lång tid att sålla igenom (åtminstone enligt min mening). Så jag försöker göra det lite lättare att följa genom att dela upp det i ett par inlägg.

Som tidigare nämnts finns det bara så mycket vi kan göra på kundsidan. Visst, det finns steg som weUplo kan vidta för att förbättra användarupplevelsen, men det är inte det säkraste, och det finns mer arbete att göra på serversidan.

I den andra halvan av den här serien kommer jag att titta på PHP som krävs för att hantera uppladdningen av filer och göra det säkert.