File issue with File Upload

Topic: File issue with File Upload

Rushman1 free asked 5 years ago

Hello, I am running into an error when using the File Input/Upload functions. When I select the file I want, the file name is supposed to be inserted into the file-path input field. Instead I get an error on line 23158 of mdb.js (may be different than where it really is) stating that forEach is not a function. What can I do to alleviate this issue? Code:

(function($) {

    $(document).on("change",
        '.file-field input[type="file"]',
        function(e) {

            var $this = $(e.target);
            var $fileField = $this.closest(".file-field");
            var $pathInput = $fileField.find("input.file-path");
            var files = $this[0].files;
            var fileNames = [];
            files.forEach(function(file) {
                return fileNames.push(file.name);
            });
            $pathInput.val(fileNames.join(", "));
            $pathInput.trigger("change");
        });
})(jQuery);

Thank you, Tim

Add comment

Rocky Jekson free answered 3 years ago

0 0 Best answer

Just if u want to waste your time.. just work with mdbootstrap.I got everyday error

Grzegorz Bujański staff commented 3 years ago

Hi. I'm sorry but I was forced to censor your post. Tell me what errors you get and we will try to help you.

Add comment

motecl free answered 4 years ago

0 0 Best answer

I have the same issues

here the code

function(t) {
    t(document).on("change", '.file-field input[type="file"]', function(e) {
      var i = t(e.target),
        n = i.closest(".file-field").find("input.file-path"),
        o = [];
      i[0].files.forEach(function(t) {

        return o.push(t.name)
      }), n.val(o.join(", ")), n.trigger("change")
    })
  }

Grzegorz Bujański staff commented 4 years ago

Hi. Can you recreate this issue in snippet here: https://mdbootstrap.com/snippets/?

magikweb priority commented 4 years ago

Thanks chase.tb, your code worked for us. We noticed that the example has a , but since that field is already inside a parent form, that "child form tag" is removed the browser (Chrome).

Changing the form by a div worked well, but the JavaScript doesn't work anyway as of 4.15.

Mateusz Łubianka staff commented 4 years ago

Hi @magikweb,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,

Add comment

chase.tb pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

I'm using MDB Pro 4.7.4 and I'm also getting this error with file inputs.

Since I'm only concerned with one file being uploaded, I added the following function to the bottom of my HTML file.

<script>
    $('input[type="file"]').change(function (e) {
        var $this = $(e.target);
        var $fileField = $this.closest('.file-field');
        var $pathInput = $fileField.find('input.file-path');
        var fileNames = [];

        fileNames.push(e.target.files[0].name);

        $pathInput.val(fileNames.join(', '));
        $pathInput.trigger('change');
   });
</script>

Jakub Mandra staff commented 5 years ago

Hi,

Have you followed our documentation? https://mdbootstrap.com/docs/jquery/forms/file-input/

There is no need to attach your custom js to find file name. It should work normally with just our template, and send via form method.

chase.tb pro commented 5 years ago

I have copied and pasted directly from the examples in the documentation. This is the message in the Chrome developer console: Uncaught TypeError: i[0].files.forEach is not a function at HTMLInputElement.<anonymous> (mdb-4.7.4.min.js:1) at HTMLDocument.dispatch (jquery-3.3.1.min.js:2) at HTMLDocument.y.handle (jquery-3.3.1.min.js:2)

Jakub Mandra staff commented 5 years ago

Thanks for reporting then, I've requested our JQuery team to resolve that bug. Will head back when it's fixed.

Best,

Jakub

Add comment

Jakub Mandra staff answered 5 years ago