upload field type is not working with Bootstrap 4

upload field type is not working with Bootstrap 4

kartikeyas00kartikeyas00 Posts: 16Questions: 4Answers: 0
<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

  • allanallan Posts: 52,624Questions: 1Answers: 8,050 Site admin
    Answer ✓

    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:

    '<input type="file" '+(multiple ? 'multiple' : '')+'/>'+
    

    That needs to be changed to be:

    '<input type="file" '+(multiple ? 'multiple' : '')+'></input>'+
    

    Then it will work. We'll include that in 1.9.4 which we'll drop in the next week or so.

    Regards,
    Allan

  • NettSiteNettSite Posts: 33Questions: 10Answers: 2

    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.

  • allanallan Posts: 52,624Questions: 1Answers: 8,050 Site admin

    Hi NettSite,

    Can you give me a link to your page so I can trace the problem through please?

    Thanks,
    Allan

Sign In or Register to comment.