File Input Not Working

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: File Input Not Working

Shashikant Farakate asked 8 years ago

I have used MDBootstrap 4.3.2 in my website. So because of mdbootstrap I cant use File input for file uploading functionality. Please help in this.

jorgefo pro answered 6 years ago

I just tested it in your docs page (https://mdbootstrap.com/components/bootstrap-file-input/) and it didn't work there either. Same error on Chrome and OSX.

mdb.min.js:1 Uncaught TypeError: i[0].files.forEach is not a function
at HTMLInputElement.<anonymous> (mdb.min.js:1)
at HTMLDocument.dispatch (jquery-3.3.1.min.js:2)
at HTMLDocument.y.handle (jquery-3.3.1.min.js:2)

 

jorgefo pro commented 6 years ago

I found the solution in line mdb.js 20499 files.forEach(function (file) { return fileNames.push(file.name); }); replace with for(let i = 0; i < files.length; i++) { fileNames.push(files[i].name); }

Guilherme Mallmann commented 5 years ago

Hey man, signed up just to thank you for the solution \o/

Bartłomiej Malanowski staff pro premium answered 8 years ago

Hi, It's because you use MDB Free. File input is a premium component which is available only in MDB Pro

otorres pro commented 6 years ago

I have the MDB Pro 4.5.8 and the File Input is not working. This is the error: Uncaught TypeError: i[0].files.forEach is not a function at HTMLInputElement. (mdb.min.js?compile=false:1) at HTMLDocument.dispatch (jquery-3.3.1.min.js?compile=false:2) at HTMLDocument.y.handle (jquery-3.3.1.min.js?compile=false:2) (anonymous) @ mdb.min.js?compile=false:1 dispatch @ jquery-3.3.1.min.js?compile=false:2 y.handle @ jquery-3.3.1.min.js?compile=false:2

otorres pro commented 6 years ago

That happens when I choose my file in the lookup window. The window closes, nothing happens but the error message in the console. I use Chrome over OSX. I just tested it in your docs page (https://mdbootstrap.com/components/bootstrap-file-input/) and it didn't work there either. Same error on Chrome and OSX.

HeyCaptain pro commented 6 years ago

Same here ! In the meantime, just add the following polyfill for FileList object in your page : FileList.prototype.forEach = function(callback) {[].forEach.call(this, callback)};

jorgefo pro commented 6 years ago

I found the solution in line mdb.js 20499 files.forEach(function (file) { return fileNames.push(file.name); }); replace with for(let i = 0; i < files.length; i++) { fileNames.push(files[i].name); }

mindtrigger pro answered 6 years ago

Has this been fixed in the official release yet?  I'm getting the same error today (12/21/18)

Bartłomiej Malanowski staff pro premium commented 6 years ago

Do you run the file input locally or you're using it on a server (this might be also live-server, xampp or similar)?

mindtrigger pro commented 6 years ago

I'm running it on a linux apache/php server.  The error is being thrown by mdb.min.js from the Admin Templates pack.  Doesn't work if I compile the file-input.js module from my webpack either.  I am running the latest version downloaded from here today.

Bartłomiej Malanowski staff pro premium commented 6 years ago

How can we reproduce your issue? I've checked it again and can't see it. What am I missing?
Write
Create snippet
Please insert min. 20 characters.

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: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Shashikant Farakate
0Support score
1Questions 0Answers
0Snippets likes 0Snippets