Dropzone eine File Type begrenzung und ein extra form parameter übergeben?

[Nightland Driver]

Hey,
ich nutze https://www.dropzonejs.com/ um meine Datei Upload Felder etwas schöner und übersichtlicher zu gestalten, leider kann ich trotzt mehreren versuchen und stunden langem googlen keine möglichkeit finden die Datei Typen zu begrenzen, noch einen extra wert mit zu übergeben.
In der Dokumentation steht zwar drin wie es funktionieren sollte, was aber nicht klappt. beim googlen hab ich mehrere möglichkeiten gefunden aber auch keine davon funktioniert. Hochladen und anzeigen macht er alles Richtig, nur kann ich keine Optionen hinzufügen.
Es gibt auch noch eine Andere Art das ganze einzubinden aber dazu habe ich auch nichts gefunden.

Hier ist einmal mein Aktueller Code:

<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h5 data-toggle="tooltip" data-html="true" title="" data-original-title="Erlaubte Formate<br/>[ .jpg | .jpeg | .png ]"><i class="feather icon-image"></i> Galerie Bilder</h5>
</div>
<div class="card-body">
<form id="image-upload" action="assets/plugins/fileupload/js/file-upload.php" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
<div class="row">
<div class="col-sm-6">
<div class="text-center m-t-20">
<select class="custom-select" name="folder" required>
<option value="" selected disabled hidden>Bitte wählen</option>
<option value="gallery">Gallerie</option>
<option value="memory">Erinnerung</option>
<option value="video">Video</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>

... more code ...

<!-- file-upload Js -->
<script src="assets/plugins/fileupload/js/dropzone-amd-module.min.js"></script>

<script type="text/javascript">
window.onload = function() {
Dropzone.options.imageUpload = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
dictResponseError: 'Server not Configured',
acceptedFiles: ".jpg",
init:function(){
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Delete";
//New file added
self.on("addedfile", function (file) {
console.log('new file added ', file);
});
// Send file starts
self.on("sending", function (file) {
console.log('upload started', file);
$('.meter').show();
});

// File upload Progress
self.on("totaluploadprogress", function (progress) {
console.log("progress ", progress);
$('.roller').width(progress + '%');
});

self.on("queuecomplete", function (progress) {
$('.meter').delay(999).slideUp(999);
});

// On removing file
self.on("removedfile", function (file) {
console.log(file);
});
}
};
};
</script>

[arnego2]

Anstelle zu googlen hast du schon mal versucht das zu stackoverflown ????

[Nightland Driver]

Anstelle zu googlen hast du schon mal versucht das zu stackoverflown ????

Daher kommt der oben stehende Code (der Script Teil), welcher auch nicht funktioniert. Ich habe einiges durch und nichts davon klappt.

[arnego2]

Style macht man über css wie sieht denn die <div class="card-body"> aus?

[Nightland Driver]

Style macht man über css wie sieht denn die <div class="card-body"> aus?

Hat ja nichts mit dem Sytle zu tun, es wird richtig angezeigt und funktioniert auch. Ich mag nur die Datei Typen begrenzen auf z.B. "JPG" und dann mag ich wenn das funktioniert noch einen weiteren wert hinzufügen, das aber erst wenn ich die Datei Typen begrenzt habe.

[Sempervivum]

Da musste ich eine Weile suchen. Es liegt daran, dass Du das Setzen der Option im window.onload machst. Nehme ich das heraus, funktioniert das Filtern nach Erweiterung einwandfrei:

    <script>
        // window.onload = function () {
        Dropzone.options.imageUpload = {
            paramName: "img", // The name that will be used to transfer the file
            maxFilesize: 10, // MB
            dictResponseError: 'Server not Configured',
            acceptedFiles: ".jpg",
            init: function () {
                var self = this;
                // config
                self.options.addRemoveLinks = true;
                self.options.dictRemoveFile = "Delete";
                //New file added
                self.on("addedfile", function (file) {
                    console.log('new file added ', file);
                });
                // Send file starts
                self.on("sending", function (file) {
                    console.log('upload started', file);
                    $('.meter').show();
                });
                // File upload Progress
                self.on("totaluploadprogress", function (progress) {
                    console.log("progress ", progress);
                    $('.roller').width(progress + '%');
                });
                self.on("queuecomplete", function (progress) {
                    $('.meter').delay(999).slideUp(999);
                });
                // On removing file
                self.on("removedfile", function (file) {
                    console.log(file);
                });
            }
        };
        // };
    </script>

[Nightland Driver]

Dann erhalte ich den Fehler: "Uncaught ReferenceError: Dropzone is not defined" bei folgender stelle:

Dropzone.options.imageUpload = {

[Sempervivum]

Dann hast Du vermutlich die Definition der Optionen vor dem Einbinden der JS-Dateien von Dropzone notiert. So funktioniert es bei mir:

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/dropzone.js"></script>
    <script>
        // window.onload = function () {
        Dropzone.options.imageUpload = {
            paramName: "img", // The name that will be used to transfer the file
            maxFilesize: 10, // MB
            dictResponseError: 'Server not Configured',
            acceptedFiles: ".jpg",
            init: function () {
                var self = this;
                // config
                self.options.addRemoveLinks = true;
                self.options.dictRemoveFile = "Delete";
                //New file added
                self.on("addedfile", function (file) {
                    console.log('new file added ', file);
                });
                // Send file starts
                self.on("sending", function (file) {
                    console.log('upload started', file);
                    $('.meter').show();
                });
                // File upload Progress
                self.on("totaluploadprogress", function (progress) {
                    console.log("progress ", progress);
                    $('.roller').width(progress + '%');
                });
                self.on("queuecomplete", function (progress) {
                    $('.meter').delay(999).slideUp(999);
                });
                // On removing file
                self.on("removedfile", function (file) {
                    console.log(file);
                });
            }
        };
        // };
    </script>
</body>

Und das Ganze, wie Du siehst, nach dem HTML am Ende des body.

[Nightland Driver]

Also bei mir sieht es wie folgt aus. Und dass sollte laut deinem Beispiel ja funktionieren. Das macht es leider nicht. Ich habe selbst noch nebenbei weiter gesucht aber nichts dazu gefunden was funktionieren würde, das meiste hat es noch schlimmer gemacht. [Ich habe den rest vom ende der Seite gekürzt weil es sich um ca 800 Zeilen handelt.]

<!-- ... more code ... -->
<!-- Required Js -->
<script src="assets/js/vendor-all.min.js"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/pcoded.min.js"></script>

<!-- notification Js -->
<script src="assets/plugins/notification/js/bootstrap-growl.min.js"></script>
<script src="pages-js/page_notification.js"></script>

<?php if($site_id == "index"){ ?>
<!-- ============== -->
<?php } else if($site_id == "upload"){ ?>
<!-- file-upload Js -->
<script src="assets/plugins/fileupload/js/dropzone-amd-module.min.js"></script>

<script>
//window.onload = function() {
// "myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.imageUpload = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
dictResponseError: 'Server not Configured',
acceptedFiles: ".jpg",
init:function(){
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Delete";
//New file added
self.on("addedfile", function (file) {
console.log('new file added ', file);
});
// Send file starts
self.on("sending", function (file) {
console.log('upload started', file);
$('.meter').show();
});

// File upload Progress
self.on("totaluploadprogress", function (progress) {
console.log("progress ", progress);
$('.roller').width(progress + '%');
});

self.on("queuecomplete", function (progress) {
$('.meter').delay(999).slideUp(999);
});

// On removing file
self.on("removedfile", function (file) {
console.log(file);
});
}
};
//};
</script>
<?php } else if($site_id == "news"){ ?>
<!-- ============== -->
<?php } ?>
</body>
</html>

JQuery ist im Header eingebunden, bzw könnte unter <!-- ... more code ... --> hinzugefügt werden, macht aber keinen Unterschied. Bei beiden fällen heißt es weiterhin "Uncaught ReferenceError: Dropzone is not defined"

[Nightland Driver]

* Hab den fehler gefunden. es gibt 2 verschiedene Scripts die man erhält, und ich habe auf irgendwo gelesen gehabt dass es nur mit dem "dropzone-amd-module" funktionieren soll, doch damit funktioniert es erst recht nicht. Habe jetzt das anderer genommen und es funktioniert einwandfrei. Bin nur durch dein eingebundenes auf die idee gekommen das andere mal wieder rein zu packen. Danke für die Hilfe.

Jetzt habe ich aber noch das Problem, dass ich einen 2. Parameter mit übergeben mag. Ich habe eine Galerie welche sich in 5 Teile aufteilt. Der jenige der Die Datei hochläd sollte also auswählen können in welche Galerie das Bild gehört und dies über einen Dropdown mit einem id wert auswählen und dann die Datein hochladen. Nur dazu finde ich keine Informationen wie ich das am besten anstelle, da Dropzone die Datein ja sofort an das Script zum Upload sendet.

[Sempervivum]

Mir scheint, in diesem Fall weiß Stackoverflow Rat:
https://stackoverflow.com/questions/...opzone-js-post
Dort wird u. a. ein hidden Input empfohlen. Hidden braucht dein Select nicht zu sein, denn der Besucher soll ihn ja sehen und etwas auswählen. Du musst ihn nur in das form-Tag verschieben, dann sollte sein Wert mit übertragen werden.
Was Du aber zusätzlich machen müsstest, ist sicher zu stellen, dass etwas ausgewählt wurde bevor man ein Bild herauf lädt. Das müsste sich mit einem der Callbacks von Dropzone erledigen lassen. Versuche es und wenn Du nicht zum Ziel kommst, melde dich wieder.

[Nightland Driver]

Ich würde das ganze eigentlich dann per Javascript lösen indem ich wenn der Benutzer einen Wert im Select außerhalb der Form auswählt, diesen wert in das Versteckte Feld übernehme und somit dann mitsende, da ein wert durch requierd drinstehen muss.
Nur ich bekomme es nicht so ganz hin den wert vom Select auszulesen und in das Versteckte Feld zu übergeben.

Zum besseren verständnis:

<div class="card-body">
<form action="assets/plugins/fileupload/js/file-upload.php" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
<input name="hiddenFolder" id="hiddenFolder" type="text" required="" value="" hidden>
</form>
<div class="row">
<div class="text-center m-t-20">
<select class="custom-select" name="folder" id="folder" required>
<option value="" selected disabled hidden>Bitte wählen</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>

Der gewählte wert vom folder select soll bei einer änderung in den Versteckten Input eingefügt werden. Und da finde ich nicht heraus wie ich das anstellen kann.

[Sempervivum]

So ist es auch kein Problem:

document.querySelector('#folder').addEventListener('change', event => {
    document.querySelector('#hiddenFolder').value = event.target.value;
});

Diesmal ungetestet.

[Nightland Driver]

Funktioniert jetzt einwandfrei, danke für die schnelle Hilfe.

[Nightland Driver]

*Nochmal kleiner Nachtrag, das mit dem wenn nichts ausgewählt ist funktioniert noch nicht so gut, dann sendert er die Datei trotzdem. Kann ich dass vor dem Hochladen irgendwie Prüfen oder kann ich dir Dropzone vorerst deaktivieren bis etwas ausgewählt ist?