Przesyłanie plików w WordPressie, zrewidowane: Część 1 – Po stronie klienta

Lata temu pisałem o tym, jak wgrywać pliki w WordPressie z obszaru administracyjnego. Ten post jest praktycznie aktualizacją tego posta, ale obejmuje nowe rozważania, które podejmuję i kilka innych procesów, które uważam za konieczne.

W tym poście omówię przykład przesyłania pliku PDF i tego, jak udostępnić go w Bibliotece mediów.

Czyniąc to, zamierzam również omówić pewne kwestie, które należy uwzględnić po stronie klienta i po stronie serwera, a także rzeczy, których należy szukać, gdy ktoś przesyła informacje przez sieć.

Przesyłanie plików w WordPress (i do biblioteki mediów)

Zanim przejdę do sedna tego postu, zakładam, że masz:

1. Strona podmenu lub ustawienia strony administratora z wejściem pliku,
2. Czy masz prawidłowo skonfigurowaną akceptację typów MIME,
3. Że czujesz się komfortowo z odrobiną JavaScriptu,
4. Możesz swobodnie pracować z niestandardowymi wiadomościami poza standardowym API WordPress.

Jeśli tak, to cały kod powinien być w miarę oczywisty (nie żebym nie rozkładał go po kawałku), ale jeśli którykolwiek z powyższych brzmi dezorientująco, to post może zawierać trochę materiału, który wymaga trochę więcej badań w Kodeksie lub dotyczących JavaScript, które przedstawię tutaj.

Niezależnie od tego, zrobię to, co mogę, tak wyczerpująco, jak to tylko możliwe.

1 Główna idea

Idea funkcji jest prosta: chcesz dać użytkownikowi możliwość przesyłania plików PDF za pośrednictwem obszaru administracyjnego WordPress. Chcesz również, aby plik był dostępny w Bibliotece multimediów.

Możliwość zrobienia tego nie jest trudna, ale są sposoby na zwiększenie doświadczenia użytkownika, które również chciałbym omówić w tym poście (na przykład niemożność wgrania czegokolwiek, dopóki plik nie zostanie określony w polu wprowadzania, na przykład przykład).

2 Interfejs użytkownika do weryfikacji typu pliku

Po pierwsze, jak powiedziałem na początku postu, zakładam, że masz przygotowane podstawy dla strony administracyjnej w WordPressie. Można to zrobić na kilka sposobów – zdecydowałem się użyć strony podmenu, ale można to zrobić na kilka sposobów.

Po drugie, strona jest prosta: zawiera tytuł strony, pole wejściowe pliku i przycisk „Prześlij", który jest domyślnie wyłączony:

Zauważ, że gdy próbuję dodać obraz, który nie jest plikiem PDF, otrzymuję komunikat o błędzie, a przycisk „Prześlij” jest nadal wyłączony:

Ale kiedy dodaję plik, który jest oczekiwanego typu, przycisk „Prześlij” jest włączony:

Wymaga to kilku rzeczy:

• JavaScript, który wyszukuje typ pliku,
• Części z widocznością, które można dynamicznie przełączać za pomocą JavaScript,
• Oraz możliwość włączania lub wyłączania przycisku wprowadzania pliku.

Ważną uwagą jest to, że po stronie klienta: możemy jedynie założyć, że plik jest odpowiednim typem pliku na podstawie jego rozszerzenia. Będziemy musieli wykonać więcej pracy po stronie serwera, aby upewnić się, że jest to dokładne.

Ale punkt sprawdzania po stronie klienta, aby upewnić się, że zapewniamy najlepszą możliwą jakość poprzez powiadomienia i włączanie lub wyłączanie opcji w zależności od typu pliku.

3 Weryfikacja typu pliku po stronie klienta

Załóżmy, że w tym przykładzie mamy podszablon, który renderuje się za każdym razem, gdy próbujemy przesłać plik, który nie jest plikiem PDF. Domyślnie kontener ma style="display:none;" atrybut, którym wkrótce będziemy manipulować przez 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 -->

Zauważ, że ta część ma identyfikator nieważny-plik-wiadomość. Jest to nieco uogólnione, ponieważ możesz chcieć poprzedzić to czymś innym, ale na potrzeby tego postu masz pomysł.

Aby przełączyć widoczność tej wiadomości, musisz skonfigurować procedurę obsługi w JavaScript, aby monitorować zmiany w elemencie wejściowym pliku.

4 Monitorowanie elementu wejściowego pliku

W tym momencie musi istnieć plik JavaScript, który monitoruje wartość zdarzenia zmiany elementu wejściowego pliku, aby mógł określić, jakie działania należy podjąć.

Spójrz na ten kod:

Ten kod będzie szukał wartości pola wejściowego. Jeśli typ pliku nie pasuje do pdf, przełączy widoczność powyższego komunikatu o błędzie; w przeciwnym razie wyświetli przycisk przesyłania.

I pamiętaj, dobrą praktyką jest umieszczanie tego skryptu w kolejce tylko w obszarze administracyjnym i na stronie jest on wymagany :

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

Wszystko to zapewni, że wtyczka poprawnie zarejestruje skrypt na stronie, na której jest potrzebny, nigdzie indziej, oraz że poprawnie sprawdzi, czy określony plik jest właściwego typu.

Ale jest więcej

Pierwotnie miał to być jeden post, ale ilość treści, która wymagałaby tego wszystkiego, zajęłaby zbyt dużo czasu (przynajmniej moim zdaniem). Dlatego staram się nieco ułatwić śledzenie, dzieląc to na kilka postów.

Jak wspomniano wcześniej, po stronie klienta możemy zrobić tylko tyle. Oczywiście, weUplo może podjąć pewne kroki, aby poprawić komfort użytkowania, ale nie jest to najbezpieczniejsze, a po stronie serwera jest jeszcze więcej do zrobienia.

W drugiej połowie tej serii przyjrzę się PHP wymaganemu do zarządzania przesyłaniem plików i bezpiecznego robienia tego.