CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
JVE999
JVE999

Reputation: 3517

Uploading file in Bootstrap form

I'm trying to upload a file using a form with Bootstrap. The reason I mention Bootstrap is usually the forms upload files fine, but this time it's with Bootstrap. It may or may not be the reason.

The HTML I have is:

<!-- Edit Window -->
<form action="" method="post" enctype="multipart/form-data" id="NewsEditorForm">
<div class="panel panel-info" style="position: absolute; top:200px; left:20%; width: 600px; height: 600px; box-shadow: 0px 1px 4px Gainsboro; z-index: 11;" id="NewsEditor" hidden>
    <div class="panel-heading">
        <h3 class="panel-title"><a id="closeNewsEditor"><span class="glyphicon glyphicon-remove"></span></a> Edit News</h3>
    </div>
    <div class="panel-body">
        <div class="input-group">
          <span class="input-group-addon">Title</span>
          <input type="text" class="form-control" name="Title" placeholder="">
        </div>
        <div class="input-group">
          <span class="input-group-addon">Short Description</span>
          <input type="text" class="form-control" name="Short_Description" placeholder="">
        </div>
        <div class="input-group">
          <span class="input-group-addon">Story</span>
          <input type="text" class="form-control" name="Story" placeholder="">
        </div>
        <div class="input-group">
          <span class="input-group-addon">Picture</span>
          <input type="file" class="form-control" name="Picture">
        </div>
        <div style="width: 100%; text-align: center; padding: 10px;">
            <button class="btn btn-large btn-primary newcenter" type="submit">Submit</button>
        </div>
    </div>
</div>
</form>

And the script for handling the form is:

    $("#NewsEditorForm").submit(function () {
        $.post(prefix_file + 'admin/process/editNewsStory.php',$(this).serialize(),function(data) {
            alert(data);
            if(data == true){
            } else {
            }

        });

            $("#NewsEditor").fadeOut(700);
            $(".callbackBackground").fadeOut(500);
            $(".newsEditRow").css('background',orig_bg);
            setTimeout(function () {window.location.href = 'updatenews.php';},700);
            return false;
        });

It works fine for everything and thealert(data) I added in the js handler informs me that it thinks no file was uploaded (it's print_r($_FILES), which returns and empty array). Also, there is no lag taken after hitting the submit button or any "file upload progress" that usually appears at the bottom of the browser.

Upvotes: 0

Views: 2300

Answers (1)

Adam Easterling
Adam Easterling

Reputation: 2405

The serialize method does not work with file fields. If you want to submit a file via AJAX, you'll need to take a different approach.

From the docs:

Data from file select elements is not serialized.

http://api.jquery.com/serialize/

Upvotes: 1

Related Questions