2

I am submitting a form which contains some text field, dropdown and a file input. The form is submitted using JQuery/Ajax and the data is sent to php. If I submit the form without using bootstrapFileInput, all the data of the form is sent to php and correctly processed but as soon as I enable bootstrapFileInput, the input file is missing while all other fields are correctly submitted. I get no error in the console.

HTML :

<div class="form-inline">
            <div id="singUser">
                <form role="form" name="setLimit" id="setLimit" class="form-inline" enctype="multipart/form-data">

                    <input type="text" id="userid" name="userid" class="form-control" placeholder="Enter User ID">
                    <input type="text" id="quota" name="quota"  class="form-control" placeholder="Enter Quota limit in GB">                     
                    <select class="form-control" id="ltype" name="ltype">
                        <option value="desktop">Desktop</option>
                        <option value="server">Server</option>
                    </select>
                    <input type="checkbox" id="rmlimit" name="rmlimit"> Remove Limit (Set to Shared storage)
                    <button type="submit" id="sgUserButn" class="btn btn-default btn-primary" >Set Limit!</button> 
            </div>
            <span id="multUser"> 
                <p>Select a file with a list of user ids and the limit in GB you wish to assign <a href="template/template.csv">download the example file.</a></p>
                <img src="img/csvex.png" id="csvexp" ><br><br>
                <input class="file-input-wrapper" type="file" id="lsUsers" name="lsUsers" data-filename-placement="inside"  title="Select CSV File">
                <button id="mulUserButn" type="submit" class="btn btn-default btn-primary" >Set Limit!</button>
            </span>
            </form>

        </div>

JQuery

    $(document).ready(function() {

    $.ajaxSetup({
        cache: false
    });

    $('input[type=file]').bootstrapFileInput();
    $('.file-inputs').bootstrapFileInput();

$('#setLimit')
            .submit(function(e) {

                busyStatus();

                $.ajax({
                    url: 'testProcess.php',
                    type: 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    complete: function() {

                        idleStatus();

                    },
                    success: function(result) {
                        //$(document.body).append(result);
                        //alert( $(result).toArray() );
                        $("#result").html(result);
                    }
                });

                e.preventDefault();
                return false;
            });
});

PHP

   <?php
    print_r($_POST);
    echo '<br>';
    print_r($_FILES);
    ?>

I am really out of ideas and would really appreciate some help. Thanks in advance.

JeromeB
  • 21
  • 1
  • I have solved my problem. Issue was in the html, the form was not correctly closed causing the data in the input file to be not correctly submitted. – JeromeB Jan 13 '15 at 23:09

0 Answers0