Hochladen von Dateien in WordPress, Revisited: Teil 1 – Die Client-Seite
Vor Jahren habe ich darüber geschrieben, wie man Dateien in WordPress aus dem Verwaltungsbereich hochlädt. Dieser Beitrag ist praktisch ein Update zu diesem Beitrag, aber er behandelt neue Überlegungen, die ich mache, und einige andere Prozesse, die ich für notwendig halte.
Für diesen Beitrag werde ich am Beispiel des Hochladens einer PDF-Datei und deren Bereitstellung in der Mediathek abarbeiten.
Dabei plane ich auch, einige Überlegungen zu behandeln, die auf der Client- und der Serverseite angestellt werden sollten, sowie Dinge, auf die man achten sollte, wenn jemand Informationen über das Kabel überträgt.
Hochladen von Dateien in WordPress (und in die Medienbibliothek)
Bevor ich zum Kern dieses Beitrags komme, gehe ich davon aus, dass Sie Folgendes haben:
- Eine Untermenüseite oder Admin-Seite eingerichtet mit einer Dateieingabe,
- Dass Sie richtig eingerichtet sind, um MIME-Typen zu akzeptieren,
- Dass Sie mit ein wenig JavaScript vertraut sind,
- Und Sie können bequem mit benutzerdefinierten Nachrichten außerhalb der Standard-WordPress-API arbeiten.
Wenn ja, sollte der gesamte Code relativ selbsterklärend sein (nicht, dass ich ihn nicht Stück für Stück aufschlüsseln werde), aber wenn einer der oben genannten Punkte verwirrend klingt, enthält der Beitrag möglicherweise Material, das ein wenig erfordert mehr Recherche im Codex oder bezüglich JavaScript, die ich hier bereitstellen werde.
Unabhängig davon werde ich tun, was ich tun kann, um so umfassend wie möglich zu sein.
1 Die Hauptidee
Die Idee hinter dem Feature ist einfach: Sie möchten dem Benutzer die Möglichkeit geben, PDF-Dateien über den WordPress-Administrationsbereich hochzuladen. Sie möchten auch, dass die Datei in der Medienbibliothek verfügbar ist.
Die Möglichkeit, dies zu tun, ist nicht schwierig, aber es gibt Möglichkeiten, die Benutzererfahrung zu verbessern, die ich auch in diesem Beitrag behandeln möchte (wie zum Beispiel nichts hochladen zu können, bis die Datei im Eingabefeld angegeben wurde, z Beispiel).
2 Die Benutzeroberfläche zum Überprüfen des Dateityps
Erstens, wie ich oben im Beitrag sagte, gehe ich davon aus, dass Sie die Grundlagen für die Verwaltungsseite in WordPress gelegt haben. Dies kann auf verschiedene Arten erfolgen – ich habe mich für die Verwendung einer Untermenüseite entschieden, aber es gibt einige Möglichkeiten, dies zu tun.
Zweitens ist die Seite einfach: Sie enthält den Seitentitel, ein Dateieingabefeld und eine Schaltfläche zum Hochladen, die standardmäßig deaktiviert ist:
Beachten Sie, dass beim Versuch, ein Bild hinzuzufügen, das kein PDF ist, eine Fehlermeldung angezeigt wird und die Schaltfläche „Hochladen” weiterhin deaktiviert ist:
Aber wenn ich eine Datei des erwarteten Typs hinzufüge, ist die Schaltfläche „Hochladen” aktiviert:
Dies erfordert ein paar Dinge:
- JavaScript, das den Dateityp ausfindig macht,
- Partials mit Sichtbarkeit, die dynamisch über JavaScript umgeschaltet werden kann,
- Und die Möglichkeit, eine Dateieingabeschaltfläche zu aktivieren oder zu deaktivieren.
Ein wichtiger Hinweis auf der Client-Seite: Wir können nur aufgrund ihrer Erweiterung davon ausgehen, dass die Datei den richtigen Dateityp hat. Wir müssen mehr Arbeit auf der Serverseite leisten, um sicherzustellen, dass dies korrekt ist.
Aber der Punkt, auf der Clientseite zu überprüfen, um sicherzustellen, dass wir durch Benachrichtigungen und das Aktivieren oder Deaktivieren von Optionen basierend auf dem Dateityp die bestmögliche Erfahrung bieten.
3 Überprüfen des Dateityps auf der Client-Seite
Nehmen wir für dieses Beispiel an, dass wir einen Teil haben, der gerendert wird, wenn wir versuchen, eine Datei hochzuladen, die keine PDF-Datei ist. Standardmäßig hat der Container ein style="display:none;" Attribut, das wir in Kürze über JavaScript manipulieren werden:
Beachten Sie, dass dieser Partial die ID invalid-file-message hat. Dies ist etwas verallgemeinert, da Sie ihm vielleicht etwas anderes voranstellen möchten, aber für die Zwecke dieses Beitrags verstehen Sie die Idee.
Um die Sichtbarkeit dieser Nachricht umzuschalten, müssen Sie einen Handler in JavaScript einrichten, um die Änderung im Dateieingabeelement zu überwachen.
4 Überwachen des Dateieingabeelements
An diesem Punkt muss eine JavaScript-Datei vorhanden sein, die den Wert des Änderungsereignisses des Dateieingabeelements überwacht, damit sie bestimmen kann, welche Vorgehensweise zu ergreifen ist.
Schauen Sie sich diesen Code an:
Dieser Code sucht nach dem Wert des Eingabefelds. Wenn der Dateityp nicht mit pdf übereinstimmt, wird die Sichtbarkeit der obigen Fehlermeldung umgeschaltet; andernfalls wird die Upload-Schaltfläche angezeigt.
Und denken Sie daran, dass es sich bewährt hat, dieses Skript nur im Administrationsbereich und auf der Seite einzureihen, auf der es erforderlich ist :
All dies stellt sicher, dass Ihr Plugin das Skript ordnungsgemäß auf der Seite registriert, auf der es benötigt wird, und nirgendwo sonst, und dass es ordnungsgemäß überprüft, um sicherzustellen, dass die angegebene Datei vom richtigen Typ ist.
Aber es gibt noch mehr
Ursprünglich sollte dies alles ein Beitrag sein, aber die Menge an Inhalten, die alles erfordert, würde zu viel Zeit in Anspruch nehmen (zumindest meiner Meinung nach). Deshalb versuche ich, es ein wenig einfacher zu machen, ihm zu folgen, indem ich es in ein paar Posts aufteile.
Wie bereits erwähnt, können wir auf der Clientseite nur begrenzt etwas tun. Sicher, es gibt Schritte, die weUplo unternehmen kann, um die Benutzererfahrung zu verbessern, aber es ist nicht das sicherste, und es gibt noch mehr Arbeit auf der Serverseite.
In der zweiten Hälfte dieser Serie werde ich mir das PHP ansehen, das erforderlich ist, um das Hochladen von Dateien zu verwalten und dies sicher zu tun.