Feuerwehr-eppingen/resources/views/inc/upload/fileUploadScripts.blade.php

<script>
//	Dropzone.autoDiscover			= false;

	$(document).ready(function (){
		$('body').find('#uploadGaleryContainer').remove();
		var container = $('<div></div>')
		.attr('id', 'uploadGaleryContainer');
		$('body').append(container);
		$('#myModal').appendTo('#uploadGaleryContainer');

        $(document).off('click', '.startfile a');
		$(document).on('click', '.startfile a', function (){
			var filename = $(this).parent().attr('data-filename');
			if (filename){
				$.ajax({
					type: 'POST',
					url: '/upload/startbild',
					data: {
						model: '{{ $model->type }}',
						model_id: '{{ $model->id }}',
						filename: filename,
						_token: $('#csrf-token').val()
					},
					dataType: 'html',
					success: function (data){
						var rep = JSON.parse(data);
						if (rep.status.error == false){
							$.each(rep.content.json, function (key, value){
								updateStartfile(value.filename, value.isPreview);
							});
						}
					},
					error: function (jqXHR, textStatus, errorThrown){
					}
				});
			}
		});

		$('.dropzone').each(function(){
			var dropzoneControl = $(this)[0].dropzone;
			if (dropzoneControl){
				dropzoneControl.destroy();
			}
		});
		var realDropzone				= new Dropzone("form#real-dropzone",
//	Dropzone.options.realDropzone = {
			{
				uploadMultiple: false,
				parallelUploads: 100,
				maxFilesize: 8,
				previewsContainer: '#dropzonePreview',
				previewTemplate: document.querySelector('#preview-template').innerHTML,
				addRemoveLinks: true,
				dictDefaultMessage: "Dateien hier abgelegen zum Hochladen",
				dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
				dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
				dictFileTooBig: "Die Datei ist zu groß ({ {filesize} }MiB). Maximale Dateigröße: { {maxFilesize} }MiB.",
				dictInvalidFileType: "Dieser Dateityp ist nicht erlaubt",
				dictResponseError: "Server responded with { {statusCode} } code.",
				dictCancelUpload: "Upload abbrechen",
				dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
				dictRemoveFile: "löschen",
				dictRemoveFileConfirmation: null,
				dictMaxFilesExceeded: "You can not upload any more files.",

				// The setting up of the dropzone
				init: function (){
					var myDropzone = this;

					$.get('/uploads/{{ $model->type }}/{{ $model->id }}', function (data){
						$.each(data.images, function (key, value){
							var file = {name: value.filename, size: value.filesize};

							myDropzone.options.addedfile.call(myDropzone, file);
							myDropzone.options.thumbnail.call(myDropzone, file, value.previewPath);

							// Link für das Startbild erstellen
							var startfile = $('.dz-preview:last-child > .startfile');
							createStartfileLink(startfile, value.filename);

							updateStartfile(value.filename, value.isPreview);

							if (!addGalleryItem(file, value)){
								$(file.previewElement).click(function (imgCounter){
									window.open(value.path, '_blank');
								});
							}
							myDropzone.emit("complete", file);
							fileCounter++;
							$("#files-count").text("(" + fileCounter + ")");
						});
					})

					this.on("complete", function (file){
						// Link für das Startbild erstellen
						$.ajax({
							type: 'GET',
							url: '/upload/original/{{ $model->type }}/{{ $model->id }}/' + file.name,
							data: {
								_token: $('#csrf-token').val()
							},
							dataType: 'json',
							success: function (data){
								if (data.status.error == false){
									var startfile = $('.dz-preview:last-child > .startfile');
									createStartfileLink(startfile, data.content.json.filename);
									updateStartfile(data.content.json.filename, data.content.json.isPreview);
								}
							},
						});
					});

					this.on("removedfile", function (file){
						$.ajax({
							type: 'Delete',
							url: '/upload',
							data: {id: file.name, _token: $('#csrf-token').val()},
							dataType: 'html',
							success: function (data){
								var rep = JSON.parse(data);
								var rep = JSON.parse(data);
								if (rep.status.error == false){
									fileCounter--;
									$("#files-count").text("(" + fileCounter + ")");
									$.each(rep.content.json, function (key, value){
										updateStartfile(value.filename, value.isPreview);
									});
								}
							},
							error: function (jqXHR, textStatus, errorThrown){
							}
						});
					});
				},
				error: function (file, response){
					if ($.type(response) === "string")
						var message = response; //dropzone sends it's own error messages in string
					else
						var message = response.message;
					file.previewElement.classList.add("dz-error");
					_ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
					_results = [];
					for (_i = 0, _len = _ref.length; _i < _len; _i++){
						node = _ref[_i];
						_results.push(node.textContent = message);
					}
					return _results;
				},
				success: function (file, done){
					addGalleryItem(file, done.fileinfo);
					fileCounter++;
					$("#files-count").text("(" + fileCounter + ")");
				},
				removedfile: function (file, removed){
					var item = $(file.previewElement).find('.dz-image a').attr('data-slide-to');

					// lösche das Bild in der Slideshow
					$('.carousel-indicators').find('li[data-slide-to=' + item + ']').remove();
					$('.carousel-inner').find('div[carousel-item=' + item + ']').remove();
					$('.carousel-inner div').removeClass('active');
					$('.carousel-inner div').first().addClass('active');

					// Lösche das Bild aus der Dropzone
					var _ref;
					if (file.previewElement){
						if ((_ref = file.previewElement) != null){
							_ref.parentNode.removeChild(file.previewElement);
						}
					}
					return this._updateMaxFilesReachedClass();
				}
			});
	})

	function createStartfileLink(element, filename){
		element.attr('data-filename', filename);
	}

	function updateStartfile(filename, isPreview){
		var startfile = $("[data-filename='" + filename + "']");
		if (isPreview == 1){
			startfile.text("Startbild");
		}
		else{
			var preview = $('<a>Als Startbild</a>')
			.attr('href', 'javascript:undefined;');
			startfile.html(preview);
		}
	};

	var fileCounter = 0;
	var imgCounter = 0;

	function addGalleryItem(file, value){
		if (value.filetype == 'image'){
			var indicator = $('<li></li>')
			.attr('data-target', '#myCarousel')
			.attr('data-slide-to', imgCounter);
			var slide = $('<div></div>')
			.addClass('carousel-item')
			.attr('data-item', imgCounter);
			if (imgCounter == 0){
				indicator.addClass('active');
				slide.addClass('active');
			}
			var image = $('<img>')
			.attr('src', value.path)
			.attr('alt', value.filename)
			.addClass('carousel-swipe d-block w-100');
			slide.append(image);
			$('.carousel-inner').append(slide);
			$('.carousel-indicators').append(indicator);

			$(file.previewElement).find('.dz-image')
			.attr('data-toggle', 'modal')
			.attr('data-target', '#myModal');
			$(file.previewElement).find('.dz-image a')
			.attr('href', '#myCarousel')
			.attr('data-slide-to', imgCounter);

			imgCounter++;
			return true;
		}
		else{
			return false;
		}
	};
</script>