ProcessWire Upload Formular mit Drag and Drop - Versionsgeschichte

37.49.72.8: /* HTML Drop Area */

2019-02-19T10:54:23Z

HTML Drop Area

37.49.72.8: /* HTML Drop Area */

2019-02-19T10:35:09Z

HTML Drop Area

37.49.72.8: /* HTML Drop Area */

2019-02-19T10:32:14Z

HTML Drop Area

37.49.72.8: /* Upload Handeln */

2019-02-19T10:31:05Z

Upload Handeln

37.49.72.8: /* WireUpload in ProcessWire */

2019-02-19T10:20:14Z

WireUpload in ProcessWire

37.49.72.8: /* Aufräumarbeiten */

2019-02-19T07:58:41Z

Aufräumarbeiten

37.49.72.8: /* Upload und weitere Formularfelder zusammenführen */

2019-02-19T06:28:17Z

Upload und weitere Formularfelder zusammenführen

37.49.72.8: /* Upload und weitere Formularfelder */

2019-02-18T11:00:28Z

Upload und weitere Formularfelder

37.49.72.8 am 18. Februar 2019 um 06:38 Uhr

2019-02-18T06:38:31Z

37.49.72.8 am 18. Februar 2019 um 06:30 Uhr

2019-02-18T06:30:20Z

@@ Zeile 46: / Zeile 46: @@
 Das alte Images Uploadfeld brauchen wir nicht mehr. Man könnte es als Fallback nutzen. Aber beim Upload von mehreren Bildern muss man viele Nachteile in Kauf nehmen und kommt auch evtl. in Timeout und Max-Size Probleme. Daher schmeißen wir das ganz weg und ersetzen es.
-Wir ergänzen einen Bereich #drop-area in die der User seine Dateien ziehen kann.
+Wir ergänzen einen Bereich #drop-area in die der User seine Dateien ziehen kann. Dazu noch einen Bereich für die Vorschau-Bilder und einen Fortschrittsbalken.
 Außerdem bauen wir noch ein onchange Event ein. Dazu später mehr.
@@ Zeile 53: / Zeile 53: @@
 <syntaxhighlight lang="html5">
-        <div class="row <?php if(isset($errors['images'])) echo "error";?>">
+<div id="drop-area">
-          <div id="drop-area">
+  <input id="fileElem" type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
-            <input id="fileElem" type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
+  <label for="fileElem" id="images-label" class="upload-button">Select Images</label>
-            <label for="fileElem" id="images-label" class="upload-button">Select Images</label>
+</div>
-          </div>
+<progress id="progress-bar" max=100 value=0></progress>
-          <div id="uploaded-messages" class="messages"><?php if(isset($errors['uploaded'])) echo showError($errors['uploaded']); ?></div>
+<div id="gallery"></div>
-        </div>
+<div id="uploaded-messages" class="messages"><?php if(isset($errors['uploaded'])) echo showError($errors['uploaded']); ?></div>
 </syntaxhighlight>

@@ Zeile 44: / Zeile 44: @@
 == HTML Drop Area ==
 Wir ergänzen einen Bereich #drop-area in die der User seine Dateien ziehen kann.
@@ Zeile 69: / Zeile 71: @@
 		}, false)
 </syntaxhighlight>
 === Styling für die Drop Area ===
 <syntaxhighlight lang="css">

@@ Zeile 48: / Zeile 48: @@
 Außerdem bauen wir noch ein onchange Event ein. Dazu später mehr.
-Das file Input Feld wird über CSS versteckt und das label stlen wir wie einen Button.
+Das file Input Feld wird über CSS versteckt und das label stylen wir wie einen Button.
 <syntaxhighlight lang="html5">
-<div id="drop-area">
+        <div class="row <?php if(isset($errors['images'])) echo "error";?>">
-  <input id="fileElem" type="file"  onchange="handleFiles(this.files)" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
+          <div id="drop-area">
-  <label for="fileElem" id="images-label" class="upload-button">Select Images</label>
+            <input id="fileElem" type="file" name="images[]" id="images" multiple="multiple" size="40" accept="image/jpg,image/jpeg,image/gif,image/png"/>
-</div>
+            <label for="fileElem" id="images-label" class="upload-button">Select Images</label>
 </syntaxhighlight>
 Anstatt dem change Handler im Feld könnte man auch im JavaScript Code den Handler unterbringen. Da haben wir auch noch etwas mehr Platz für Aufräumarbeiten. Die Browser sind nämlich nicht ganz einheitlich was das Verhalten bei mehrfachem auswählen angeht.
 <syntaxhighlight lang="javascript">

@@ Zeile 409: / Zeile 409: @@
+}
 </syntaxhighlight>
 == Aufräumarbeiten ==

@@ Zeile 335: / Zeile 335: @@
 * File Resizing
 * evtl. Thumb löschen oder markieren
 == Aufräumarbeiten ==

@@ Zeile 338: / Zeile 338: @@
 == Aufräumarbeiten ==
 Beim Anlegen der ProcessWire Seite löschen wir eigentlich bereits die Datein aus dem temporären Bilderordner. Aber es könnte vielleicht sein, dass durch Skriptabbrüche etc. vielleicht mal noch ein paar Bilder rumliegen. Daher löschen wir über eine Funktion auch alle älteren Bilder.
 == Code Zusammengefaßt ==

← Nächstältere Version		Version vom 19. Februar 2019, 06:28 Uhr
Zeile 328:		Zeile 328:
	So können wir theoretisch sverschiedene Verarbeitungsmethoden ansteuern.		So können wir theoretisch sverschiedene Verarbeitungsmethoden ansteuern.

		+	=== WireUpload in ProcessWire ===
		+	* Neue Funktion
		+	* Alte WireUpload Funktion abschalten
		+	* Fehler auslesen
		+	* Fehlerrückgabe, Messsages ausgeben
		+	* File Resizing
		+	* evtl. Thumb löschen oder markieren

	== Aufräumarbeiten ==		== Aufräumarbeiten ==

@@ Zeile 317: / Zeile 317: @@
 </syntaxhighlight>
-== Upload und weitere Formularfelder ==
+== Upload und weitere Formularfelder zusammenführen ==
 Da die Bilder schon vor den restlichen Formulardaten auf dem Server landen, müsssen wir irgendwie dafür sorgen, dass am Ende die bereits hochgeladenen Bilder und die Formulardaten zusammengefügt werden. Dazu sind mehrere Möglichkeiten denkbar. In unserem Fall nutzen wir einfach ein verstecktes Formularfeld, in dem wir die hochgeladenen Bilder mit dem vom Server generierten Namen hochladen.
 === Bereits hochgeladene Dateien tracken ===
   <input type="hidden" name="uploaded[]" id="uploaded" value=""/>
 == Code Zusammengefaßt ==

@@ Zeile 175: / Zeile 175: @@
 == Zusätzliche Funktionalität ==
 === Vorschau Bilder ===
 Dazu nutzen wir die FileReader API. Sie arbeitet asnchron, so blockieren wir nicht den Thread
@@ Zeile 216: / Zeile 217: @@
 HTML5 bietet für solche Zwecke eigens ein progress Tag:
   <progress id="progress-bar" max=100 value=0></progress>
 ==== Variante 1 - fetch ====
 Bei der Variante mit Fetch (siehe oben) kann man nur Feststellen wann eine Datei komplett hochgeladen ist. Daher können wir auch nur über die Anzahl der Dateien mitteln.
@@ Zeile 314: / Zeile 316: @@
 </syntaxhighlight>
 === JS ===
 <syntaxhighlight lang="javascript">
 // ************************ Drag and drop ***************** //

@@ Zeile 39: / Zeile 39: @@
 })
 </syntaxhighlight>
 == HTML Drop Area ==
@@ Zeile 86: / Zeile 89: @@
+}
 </syntaxhighlight>
 == Drag and Drop Funktionalität ==
 === Event Listener ===