Topic: Doesn't work file input in MDB Admin jQuery
Hellow. Staff, please, help me to fix file input in MDB Admin Dashboard Pro.
<section class="my-5">
<form class="md-form" enctype="multipart/form-data" action="" method="post">
<div class="row">
<div class="col-lg-8">
<div class="card mb-4 post-title-panel">
<div class="card-body">
<div class="file-field mb-4">
<div class="btn ptadmin-color white-text btn-sm float-left">
<span><i class="fas fa-image mr-2" aria-hidden="true"></i>Изображение новости</span>
<input type="file" name="imgnews">
</div>
<div class="file-path-wrapper">
<input class="file-path" type="text" placeholder="Загрузите изображение">
</div>
</div>
<div class="md-form mt-1 mb-0">
<input type="text" id="title" class="form-control">
<label class="form-check-label" for="newstitle">Тема новости</label>
</div>
</div>
</div>
<div class="card mb-4">
<textarea name="newscreator" id="newscreator" rows="10" cols="80"></textarea>
</div>
<div class="card mb-4">
<div class="card-body">
<div class="md-form mb-0 mt-2">
<textarea type="text" id="script_text" class="md-textarea form-control" rows="3"></textarea>
<label class="form-check-label" for="script_text">Текст для скрипта</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-cascade narrower mb-5">
<div class="view view-cascade gradient-card-header ptadmin-color">
<h4 class="font-weight-500 mb-0">Информация</h4>
</div>
<div class="card-body card-body-cascade pt-3 pb-3 text-center">
<p><i class="fas fa-user mr-1" aria-hidden="true"></i> Автор: <strong>Pavel</strong></p>
<div class="text-center">
<button class="btn ptadmin-color white-text" type="submit" name="createnews">Опубликовать</button>
</div>
</div>
</div>
</div>
</div>
</form>
So, in chrome console log i sen:
Unchecked runtime.lastError: The message port closed before a response was received.
mdb.min.js:1 Uncaught TypeError: o.forEach is not a function
at HTMLInputElement.<anonymous> (mdb.min.js:1)
at HTMLDocument.dispatch (jquery-3.4.1.min.js:2)
at HTMLDocument.v.handle (jquery-3.4.1.min.js:2)
Thanks in advance!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.5
- Device: Notebook
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
MDBootstrap staff commented 5 years ago
Can you please generate snippet that shows exactly what you are trying to accomplish? We test users examples in mdb snippets to always have the same environment. Right now your code looks like this in snippets: https://mdbootstrap.com/snippets/jquery/pjoter-2-0/943446 I think I understood your problem but I need to be sure before going forward.
R.Titovich pro commented 5 years ago
At you in Snippets everything for some reason normally works, and I have problems with JS. Code, code is correct, you same his from here copied =)
MDBootstrap staff commented 5 years ago
R. Titovich please, copy your code and post it in the snippet. Publish the snippet and share the link to it with me. You didn't copy any js code in your post above and you opened section and didn't copy the closing tag of it. Is it everything that you have in this section? Just please share your snippet with me so I can fully test your example. If everything will work fine in this snippet I will try to grant you a solution to why it doesn't in your home environment. Right now I am assuming you could do something wrong with package implementation. But I can only assume that.
R.Titovich pro commented 5 years ago
I`m sorry, some don't understand you at the first time. This - https://mdbootstrap.com/snippets/jquery/r-titovich/948583
MDBootstrap staff commented 5 years ago
In this snippet, can you tell me which part of it doesn't work properly?
R.Titovich pro commented 5 years ago
Can i show my problem on this video: https://youtu.be/b1qdMmj8aeA
MDBootstrap staff commented 5 years ago
Thank you for this example. I am sorry you had to explain it in that much detail. This is certainly a problem with our code. I added this task to be fixed in the future. For now please comment code that triggers this bug. As you can see in snippets (where we use our package to demonstrate how it works) it works fine. We need to investigate why this return error in your package. It may take some time.
@edit I tested mdb.js and mdb.min.js. Your problem should be gone if you switch to mdb.js. We will investigate why minification triggered this issue.
R.Titovich pro commented 5 years ago
How can I comment on my code? I use the most standard settings, except for the other WYSIWYG editor. I found the element I needed, copied its HTML code and pasted it to the right place(in the form). All I can say
MDBootstrap staff commented 5 years ago
Hi R. Titovich, if that is the case I recommend to wait until the next release cycle and update your package. We will fix this for sure. If you want to make it work try to change this line in html file:
<script type="text/javascript" src="js/mdb.min.js"></script>with this line<script type="text/javascript" src="js/mdb.js"></script>