File Input Not Working

Topic: File Input Not Working

Shashikant Farakate free asked 7 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.

Add comment

mindtrigger pro answered 6 years ago

0 0 Best answer

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

Bartłomiej Malanowski staff 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 commented 6 years ago

How can we reproduce your issue? I've checked it again and can't see it. What am I missing?

Add comment

jorgefo pro answered 6 years ago

1 0 Best answer

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 free commented 4 years ago

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

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

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.

Edouard Gatouillat 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); }

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

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Shashikant Farakate

0Support score
1Questions 0Answers 0Snippets