Topic: File issue with File Upload
(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
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 2 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 2 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 2 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
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 a year ago
Hi. Can you recreate this issue in snippet here: https://mdbootstrap.com/snippets/?
magikweb commented a year 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 a year ago
Hi @magikweb,
please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best,
Just if u want to waste your time.. just work with mdbootstrap.I got everyday error
Grzegorz Bujański staff commented 10 months 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.
Answered
- User: Free
- Premium support: No
- Technology: 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