upload field type is not working with Bootstrap 4
upload field type is not working with Bootstrap 4
kartikeyas00
Posts: 16Questions: 4Answers: 0
in Editor
<div class="col-lg-12">
<table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>Year</th>
<th>Company</th>
<th>Line</th>
<th>BaseColor</th>
<th>BaseDescription</th>
<th>AccentColor</th>
<th>AccentDescription</th>
<th>PartNumber</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<script type="text/javascript" charset="utf-8">
var editor;
$(document).ready(function () {
uploadEditor = new $.fn.dataTable.Editor({
ajax:"{{url_for('adminpanel_uploadcolorstabledata')}}",
table: "#myTable",
idSrc: 'Id',
fields: [
{
label: "Upload File:",
name: "upload_file",
type: "upload",
clearText: "Clear",
},
],
});
$('#myTable').DataTable(
{
"processing": true,
"serverSide": true,
"ajax": "{{ url_for('adminpanel_colorstabledata')}}",
dom: 'Blfrtip',
"columns": [
{ "data": "Id", "visible": false, "searchable": false },
{ "data": "Year" },
{ "data": "Company" },
{ "data": "Line" },
{ "data": "BaseColor" },
{ "data": "BaseDescription" },
{ "data": "AccentColor" },
{ "data": "AccentDescription" },
{ "data": "PartNumber" },
],
order: [1, 'asc'],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", text:"upload",editor: uploadEditor} ,
"colvis",
"csv"
],
}
);
});
</script>
Description of problem:
When I try to click the choose file button it doesn't open anything to choose file from. By that I meant it doesn't open a file browser in windows. I am not sure what is causing this issue but I might suspect it is a bootstrap 4 issue.
Here are all the stylesheet and javascript libraries I am using:
<head>
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='bootstrap-4.4.1-dist/css/bootstrap.min.css') }}" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='DataTables-1.10.21/css/dataTables.bootstrap4.min.css') }}"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='Buttons-1.6.2/css/buttons.bootstrap4.min.css') }}" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='Select-1.3.1/css/select.bootstrap4.min.css') }}" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='ColReorder-1.5.2/css/colReorder.bootstrap4.min.css') }}"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='FixedHeader-3.1.7/css/fixedHeader.bootstrap4.min.css') }}"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='RowReorder-1.2.7/css/rowReorder.bootstrap4.min.css') }}"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='Responsive-2.2.4/css/responsive.bootstrap4.min.css') }}"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='select2-4.0.13/css/select2.min.css') }}"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="{{ url_for('static', filename='Editor-1.9.2/css/editor.bootstrap4.min.css') }}" crossorigin="anonymous">
</head>
<script>
<script src="{{ url_for('static', filename='jquery-3.5.1/jquery-3.5.1.min.js') }}" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='bootstrap-4.4.1-dist/js/bootstrap.min.js') }}"
crossorigin="anonymous"></script>
<script src="{{url_for('static', filename='DataTables-1.10.21/js/jquery.dataTables.min.js')}}"
crossorigin="anonymous"></script>
<script src="{{url_for('static', filename='DataTables-1.10.21/js/dataTables.bootstrap4.min.js')}}"
crossorigin="anonymous"></script>
<script src="{{url_for('static', filename='Select-1.3.1/js/dataTables.select.min.js')}}"
crossorigin="anonymous"></script>
<Script src="{{url_for('static', filename='FixedHeader-3.1.7/js/dataTables.fixedHeader.min.js')}}"
crossorigin="anonymous"></Script>
<script src="{{url_for('static', filename='Responsive-2.2.4/js/dataTables.responsive.min.js')}}"
crossorigin="anonymous"></script>
<Script src="{{url_for('static', filename='ColReorder-1.5.2/js/dataTables.colReorder.min.js')}}"
crossorigin="anonymous"></Script>
<Script src="{{url_for('static', filename='RowReorder-1.2.7/js/dataTables.rowReorder.min.js')}}"
crossorigin="anonymous"></Script>
<Script src="{{url_for('static', filename='percentageBars/percentageBars.js')}}" crossorigin="anonymous"></Script>
<script type="text/javascript" src="{{ url_for('static', filename='Editor-1.9.2/js/dataTables.editor.min.js') }}"
crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ url_for('static', filename='Editor-1.9.2/js/editor.bootstrap4.min.js') }}"
crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='Buttons-1.6.2/js/dataTables.buttons.min.js') }}"
crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='Buttons-1.6.2/js/buttons.bootstrap4.min.js') }}"
crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='Buttons-1.6.2/js/buttons.colVis.min.js') }}"
crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='Buttons-1.6.2/js/buttons.html5.min.js') }}"
crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='select2-4.0.13/js/select2.min.js') }}" crossorigin="anonymous"></script>
<script src="https://momentjs.com/downloads/moment.js" crossorigin="anonymous"></script>
</script>
Also, I am using flask(python) as a backend but I don't see it as an issue though!
This question has an accepted answers - jump to answer
Answers
Thank you for reporting this! It isn't actually an issue with Bootstrap 4, but rather a change in how jQuery 3.5 parses HTML compared to the previous versions of Bootstrap 4. In Editor's source there is the line:
That needs to be changed to be:
Then it will work. We'll include that in 1.9.4 which we'll drop in the next week or so.
Regards,
Allan
Hi Allan,
I am using 1.9.4 and I have confirmed that the line above is as you said it should be, but I am having the same problem.
It works fine if I use Bootstrap, instead of Bootstrap4.
Hi NettSite,
Can you give me a link to your page so I can trace the problem through please?
Thanks,
Allan
Estou com o mesmo problema
See Allan's last post above.
ja tentei a solução acima
Allan's last post says this: