CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
user3465521
user3465521

Reputation:

Form not submitting file / Undefined index: FileInput - PHP/AJAX/jQuery

I am trying to use jQuery to trigger a form submission and then use AJAX to call a PHP script that will handle the file and return a response. The issue, though, is that the file is not being uploaded upon submitting the form.

HTML:

<div id="browseButton" class="step1Button" onclick="browseFile()">Browse</div>

<form method="post" id="fileForm" style="display:inline-block;">
    <input id="browseInput" type="file" name="FileInput" style="display: none"/>
    <label for="upload-click-handler"></label>
    <input id="upload-click-handler"  type="text" readonly />

    <input id="submitForm" type="submit" style="display: none"/>

</form>

<div id="previewButton" class="step1Button pull-right" onclick="uploadFile()" style="background-color: #57a957">
    Preview
</div>

jQuery: 

function uploadFile() {
    submitForm();

    parseExcel();
}

var submitForm = function() {
    $('#previewButton').click(function(){
        $('#submitForm').click();
    });
};

var parseExcel = function() {

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET",'default/ParseExcel',true);
    xmlhttp.send();


    console.log("made it past excel parse");

};

The PHP that's called:

public function actionParseExcel() {
    print "made it to parse".PHP_EOL;
    print "File:";

    if($_FILES['FileInput']['tmp_name']) {
        print_r($_FILES['FileInput']['tmp_name']);
    }

    else {
        print "Not found";
    }

    print "Done.";

}

I know the issue is that my form isn't submitting the chosen file because that's typically why the "Undefined index" error is thrown. But I can't understand why.

Upvotes: 1

Views: 931

Answers (2)

QBernard
QBernard

Reputation: 383

First, if you don't want your page to refresh, you better use <input type="button"> or else call your JavaScript via <form onSubmit="uploadFile()"> and return false at the end of your function uploadFile().

Second, you'll need to put enctype="multipart/form-data" in your <form>.

I see you're using JQuery, you should use it to send your AJAX request too :

// This code supports multiple type="file" inputs
// Variable to store your files
var files;

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files = event.target.files;
}
// Create a formdata object and add the file
var data = new FormData();

// In case you want to upload more than one file
$.each(files, function(key, value)
{
    data.append(key, value);
});

$.ajax({
    url: 'your.php?FileInput',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Prevent the file from beeing converted to string
    contentType: false, // Set the content file to false prevent JQuery from using 'application/x-www-form-urlencoded; charset=UTF-8' as default type
    ...
});

I hope this will lead you to the solution...

Edited : var files declaration + files processing

Upvotes: 1

sebastianbarria
sebastianbarria

Reputation: 86

To send forms with files you need to use enctype="multipart/form-data". BUT, as far as I know, you can't send files using ajax.

So, the solution for that is to use a hidden iFrame:

  1. Create a hidden iFrame (outside of your form) and assing it an ID
  2. Create the form pointing to yout PHP file, and using the attribute enctype="multipart/form-data" and target="ID_OF_THE_IFRAME" (so the form, when submitted, will be sent to that iframe)
  3. When the PHP finish procesing the file, you could output a javascript that calls parent.YOURFUNCTION(), so you can do whatever you want when the process is done.

Good luck!

Upvotes: 0

Related Questions