Ankündigung

Einklappen
Keine Ankündigung bisher.

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

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

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

    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:
    HTML-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>

  • #2
    Anstelle zu googlen hast du schon mal versucht das zu stackoverflown ????
    https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

    VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

    Kommentar


    • #3
      Zitat von arnego2 Beitrag anzeigen
      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.

      Kommentar


      • #4
        Style macht man über css wie sieht denn die <div class="card-body"> aus?
        https://arnego2.com <Webseiten, Umbau ab €80 und einiges mehr>

        VPS 8GB RAM 50 GB ROM < Server in der EU, 1rstes Jahr €38

        Kommentar


        • #5
          Zitat von arnego2 Beitrag anzeigen
          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.

          Kommentar


          • #6
            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:
            Code:
                <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>

            Kommentar


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

              Code:
              Dropzone.options.imageUpload = {

              Kommentar


              • #8
                Dann hast Du vermutlich die Definition der Optionen vor dem Einbinden der JS-Dateien von Dropzone notiert. So funktioniert es bei mir:
                Code:
                    <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.

                Kommentar


                • #9
                  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.]

                  HTML-Code:
                  <!-- ... 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"

                  Kommentar


                  • #10
                    * 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.
                    Zuletzt geändert von Nightland Driver; 23.02.2021, 15:13.

                    Kommentar


                    • #11
                      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.

                      Kommentar


                      • #12
                        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:
                        HTML-Code:
                        <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.

                        Kommentar


                        • #13
                          So ist es auch kein Problem:
                          Code:
                          document.querySelector('#folder').addEventListener('change', event => {
                              document.querySelector('#hiddenFolder').value = event.target.value;
                          });
                          Diesmal ungetestet.

                          Kommentar


                          • #14
                            Funktioniert jetzt einwandfrei, danke für die schnelle Hilfe.
                            Zuletzt geändert von Nightland Driver; 24.02.2021, 01:10.

                            Kommentar


                            • #15
                              *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?

                              Kommentar

                              homepage-forum.de - Hilfe für Webmaster! Statistiken

                              Einklappen

                              Themen: 56.802   Beiträge: 430.056   Mitglieder: 28.555   Aktive Mitglieder: 54
                              Willkommen an unser neuestes Mitglied, Fohlenfan.

                              Online-Benutzer

                              Einklappen

                              197 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 193.

                              Mit 3.502 Benutzern waren am 23.01.2020 um 18:20 die meisten Benutzer gleichzeitig online.

                              Die neuesten Themen

                              Einklappen

                              Die neuesten Beiträge

                              Einklappen

                              Lädt...
                              X