File issue with File Upload

Topic: File issue with File Upload

Rushman1 asked 6 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

Jakub Mandra staff premium answered 6 years ago

0 0 Best answer

Hello, please update your mdb package to the newest version. This problem has been resolved. Best, Jakub

Add comment

chase.tb pro answered 6 years ago

0 0 Best answer

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 premium commented 6 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 6 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 premium commented 6 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

motecl answered 5 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 5 years ago

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

magikweb pro premium priority commented 5 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 5 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

Rocky Jekson answered 5 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 5 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

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB jQuery
MDB Version: 4.5.9
Device: Laptop
Browser: Chrome 68.0.3440.106
OS: Windows 7 Pro
Provided sample code: No
Provided link: No

Rushman1

31Support score
3Questions 1Answers

0Snippets likes 0Snippets