https://monosurveys.com/libraries/js/dragndrop-files/dragndrop-files.js

1window.addEventListener("load", () => {
2
3	(function() {
4
5		/* Ermitteln der Eingabeelemente mit dem Klassennamen "drop-zone-single-input". */
6		document.querySelectorAll(".drop-zone-single-input").forEach(inputElement => {
7
8			//Ändert sich zu true, wenn die Bedingungen erfüllt sind
9			let fileTypeStatus = false;
10			let fileSizeStatus = false;
11			let fileMaxStatus = false;
12
13
14			//Benutzerdefinierte Attribute abrufen
15			let fileTypesAllowed = inputElement.dataset.types;
16			let maxFiles = inputElement.dataset.max;
17			let fileSize = inputElement.dataset.size;
18
19			//Trennen Sie die Größe von der Einheit
20			let fileSizeUnit = fileSize.slice(-1);
21			fileSize = fileSize.slice(0,-1);
22
23			if(fileSizeUnit == 'K') {
24				//KB in MB umwandeln
25				fileSize = fileSize / 1024;
26			}
27			else if (fileSizeUnit == 'M') {
28				//Nichts zu konvertieren. Kann in Zukunft verwendet werden, wenn wir uns für eine andere Einheit entscheiden.
29			}
30			else if (fileSize == 'G') {
31				//GB in MB umwandeln
32				fileSize = fileSize * 1024;
33			}
34
35
36			/* Holen Sie sich das "div"-Element, das den "Input" für den Datei-Upload enthält. Dies wird als Drop-Zone verwendet */
37			const dropZoneElement = inputElement.closest(".drop-zone-single-file")
38
39
40			/* Auf Klick Datei-Explorer öffnen */
41			dropZoneElement.addEventListener("click", e => {
42				inputElement.click();
43			});
44
45			/* Wenn dem Eingabeelement etwas hinzugefügt wurde, wird das Ereignis "Change" ausgelöst. */
46			inputElement.addEventListener("change", e=>{
47
48				checkDataTypes(fileTypesAllowed, inputElement.files);
49				checkFileSize(fileSize, inputElement.files);
50				checkMaxFiles(maxFiles, inputElement.files.length);
51
52				/* If clicked ESC or cancel on file dialog, files will be removed by default. In this case, there is no need to show errors. */
53				if(inputElement.files.length < 1 ) {
54					inputElement.value = "";
55					/* updateThumbnail is called to show the prompt to drag & drop */
56					updateThumbnail(dropZoneElement, inputElement.files, inputElement.files.length);
57				}
58				else {
59					if(!fileTypeStatus) {
60						document.querySelector(".drop-error-type").style.display = 'block';
61					} else {
62						document.querySelector(".drop-error-type").style.display = 'none';
63					}
64					if(!fileSizeStatus) {
65						document.querySelector(".drop-error-size").style.display = 'block';
66					} else {
67						document.querySelector(".drop-error-size").style.display = 'none';
68					}
69					if(!fileMaxStatus) {
70						document.querySelector(".drop-error-max").style.display = 'block';
71					} else {
72						document.querySelector(".drop-error-max").style.display = 'none';
73					}
74
75					if(!fileTypeStatus || !fileSizeStatus || !fileMaxStatus) {
76						inputElement.value = "";
77					}
78
79					updateThumbnail(dropZoneElement, inputElement.files, inputElement.files.length);
80				}
81
82			});
83
84
85			/* Wenn das Bild in der Drop-Zone abgelegt wird */
86			dropZoneElement.addEventListener("drop", e=> {
87
88				e.preventDefault();
89
90				if(e.dataTransfer.files.length < 1) {
91					dropZoneElement.classList.remove("drop-zone-over");
92				}
93				else {
94					/* Hinzufügen der abgelegten Dateien zum Eingabeelement */
95					inputElement.files = e.dataTransfer.files;
96
97					checkDataTypes(fileTypesAllowed, inputElement.files);
98					checkFileSize(fileSize, inputElement.files);
99					checkMaxFiles(maxFiles, inputElement.files.length);
100
101					if(!fileTypeStatus) {
102						document.querySelector(".drop-error-type").style.display = 'inline';
103					} else {
104						document.querySelector(".drop-error-type").style.display = 'none';
105					}
106					if(!fileSizeStatus) {
107						document.querySelector(".drop-error-size").style.display = 'inline';
108					} else {
109						document.querySelector(".drop-error-size").style.display = 'none';
110					}
111					if(!fileMaxStatus) {
112						document.querySelector(".drop-error-max").style.display = 'inline';
113					} else {
114						document.querySelector(".drop-error-max").style.display = 'none';
115					}
116
117					if(!fileTypeStatus || !fileSizeStatus || !fileMaxStatus) {
118						inputElement.value = "";
119						dropZoneElement.classList.remove("drop-zone-over");
120					}
121
122					updateThumbnail(dropZoneElement, inputElement.files, inputElement.files.length);
123					dropZoneElement.classList.remove("drop-zone-over");
124				}
125
126			});
127
128			/* Nach Dateien suchen, die über der Abwurfzone schweben */
129			dropZoneElement.addEventListener("dragover", e => {
130				e.preventDefault();
131				/* Wenn Sie die Datei in der Drop-Zone verschieben, fügen Sie einen propperen Stil hinzu */
132				dropZoneElement.classList.add("drop-zone-over");
133			});
134
135			/* Führen Sie für jeden der im Array angegebenen Ereignisnamen die angegebene Funktion aus */
136			/* vorgesehene Ereignisse:
137			   1. dragleave - Ziehen der Dateien aus dem Ablagebereich
138			   2. dragend - wenn das Ziehen abgebrochen wurde (Beispiel: esc) */
139			["dragleave", "dragend"].forEach(type => {
140
141				/* Hören Sie auf die bereitgestellten Ereignisse des Typs */
142				dropZoneElement.addEventListener(type, e=> {
143					/* Entfernen Sie den Schwebestil */
144					dropZoneElement.classList.remove("drop-zone-over");
145				});
146
147			});
148
149			/* Eine Vorschau des hochzuladenden Bildes anzeigen */
150			function updateThumbnail(dropZoneElement, file, filesNumber) {
151				let thumbnailElement = dropZoneElement.querySelector(".drop-zone-thumb");
152				let iconElement = dropZoneElement.querySelector(".icon_add_document");
153				let dropZonePromptText = dropZoneElement.querySelector(".drop-zone-prompt > p");
154				let thumbnailTitle = dropZoneElement.querySelector(".drop-zone-title");
155				let thumbnailText1 = dropZoneElement.querySelector(".drop-zone-selected-text1");
156				let thumbnailText2 = dropZoneElement.querySelector(".drop-zone-selected-text2");
157
158				if (dropZonePromptText) {
159					dropZonePromptText.classList.remove("display_none");
160				}
161
162				/* Wenn das Ereignis "Drop" ausgelöst wird und sich keine Dateien darin befinden, wird die Ausführung ohne Unterbrechung beendet. */
163				if (filesNumber < 1) {
164					dropZoneElement.querySelector(".drop-zone-prompt").style.display = 'block';
165					thumbnailElement.remove();
166					thumbnailTitle.style.display = "none";
167				}
168				else {
169					/* Anzeigen des Dateinamens oder der Anzahl der ausgewählten Dateien */
170					if (filesNumber === 1) {
171						thumbnailTitle.style.display = "block";
172						thumbnailText1.innerHTML = file[0].name.length > 40 ? file[0].name.substring(0, 40) + "..." : file[0].name;
173						thumbnailText2.style.display = "none";
174					}
175					else if(filesNumber > 1) {
176						thumbnailTitle.style.display = "block";
177						thumbnailText1.innerHTML = filesNumber;
178						thumbnailText2.style.display = "inline";
179					}
180
181					/* Miniaturansicht und Progressbar */
182					if (filesNumber > 0) {
183						const reader = new FileReader();
184						const progressBar = document.getElementById("progress_bar");
185
186						// Zurücksetzen des Balkens bei Start
187						progressBar.value = 0;
188
189						// Fortschritt überwachen (funktioniert jetzt für jede Datei)
190						reader.onprogress = (e) => {
191							if (e.lengthComputable) {
192								progressBar.value = e.loaded / e.total;
193							}
194						};
195
196						reader.onload = () => {
197							// Nur wenn es ein Bild ist, die Miniaturansicht setzen
198							if (file[0].type.startsWith("image/")) {
199								/* Entfernen Sie die Aufforderung nach dem ersten erfolgreichen Upload */
200								if(dropZoneElement.querySelector(".drop-zone-prompt")) {
201									dropZoneElement.querySelector(".drop-zone-prompt").style.display = 'none';
202								}
203
204								// Thumbnail kreieren
205								if (!thumbnailElement) {
206									thumbnailElement = document.createElement("div");
207									thumbnailElement.classList.add("drop-zone-thumb");

208									dropZoneElement.appendChild(thumbnailElement);
209								}
210								thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
211							} else {
212								// Standard-Icon für Dokumente
213								if (iconElement) {
214									iconElement.classList.remove("icon_add_document");
215									iconElement.classList.add("icon_add_document_success");
216								}
217								if (dropZonePromptText) {
218									dropZonePromptText.classList.add("display_none");
219								}
220							}
221
222							// Progressbar am Ende auf 1 setzen
223							progressBar.value = 1;
224						};
225
226						reader.onerror = () => {
227							progressBar.value = 0;
228						};
229
230						// Wir lesen die Datei als DataURL, um sie (falls Bild) anzuzeigen
231						// oder einfach nur den Lesevorgang zu simulieren/prüfen
232						reader.readAsDataURL(file[0]);
233
234					} else {
235						// Wenn keine Datei vorhanden ist
236						thumbnailElement.style.backgroundImage = null;
237						if (document.getElementById("progress_bar")) {
238							document.getElementById("progress_bar").value = 0;
239						}
240					}
241				}
242
243			}
244
245			// Prüfung auf zulässige Datentypen:
246			// Kommas (,) verwenden, um verschiedene Typen zu akzeptieren.
247			// Nach der Konvertierung in ein Array werden wir die Leerzeichen bei jedem der angegebenen Dateitypen sicher entfernen, falls jemand versehentlich Leerzeichen entfernt hat!
248			function checkDataTypes(fileTypesAllowed, files) {
249
250				// Wenn das Schlüsselwort "all" angegeben wird, wird der Status auf "true" gesetzt und es wird nicht nach Dateitypen gesucht.
251				if(fileTypesAllowed === "all") {
252					fileTypeStatus = true;
253					return;
254				}
255
256				let fileTypesAllowedArray = fileTypesAllowed.split(",");
257
258				let fileTypesArray = []; //Dies wird von der Funktion getExtension ausgefüllt
259
260				//Ermittlung eindeutiger Datentypen aus den hochzuladenden Dateien
261				for(let i=0; i<files.length; i++) {
262					getExtension(files[i].name);
263				}
264
265
266				fileTypesArray = [...new Set(fileTypesArray)];
267
268
269				//Whitespace aus erlaubten Datentypen entfernen
270				fileTypesAllowedArray.forEach(trimDataTypes);
271
272
273				//WICHTIG - ÄNDERN SIE DEN STATUS ENTSPRECHEND
274				if(fileTypesArray.length < 1) {
275					fileTypeStatus = false;
276				}
277				else {
278					fileTypeStatus = fileTypesArray.every(element => {
279						return fileTypesAllowedArray.includes(element.toLowerCase());
280					});
281				}
282
283
284				//Whitespace aus Datentypen entfernen
285				function trimDataTypes(item, index) {
286					fileTypesAllowedArray[index] = fileTypesAllowedArray[index].trim();
287				}
288				//Dateierweiterung abrufen
289				function getExtension(fileName) {
290					let typeOnly = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);
291					fileTypesArray.push(typeOnly);
292				}
293
294			}
295
296
297			//Wenn nur eine Datei die zulässige Größe überschreitet, wird der Status auf false gesetzt.
298			function checkFileSize(fileSizeAllowed, files) {
299
300				let fileSizeArray = [];
301
302				for(let i=0; i<files.length; i++) {
303					//Bytes in Kilobytes in Megabytes umwandeln
304					fileSizeArray.push(files[i].size / 1024 / 1024);
305				}
306
307				fileSizeStatus = fileSizeArray.every(el => {
308					return el < fileSizeAllowed;
309				});
310
311			}
312
313
314			function checkMaxFiles(maxFilesAllowed, fileLength) {
315				fileMaxStatus = fileLength <= maxFilesAllowed;
316			}
317
318		});
319
320	})();
321
322});