I'm making a step by step form that stores session variables as you follow the steps.
On one step I have a file upload that previews the image and shows an upload button, which when pressed calls a php script that needs to modify a $_SESSION variable, as well as echo the path to the uploaded file.
When I test it in my debugger without require_once('config.php')
, it works exactly as I anticipate, showing the image and it's filename, however, for some reason when I include the config file, when I iterate through it in my debugger, it appears to run the php script twice, it correctly updates the session variable, but the filename isn't echoed anymore and the data is lost before it reaches the frontend.
I can't tell if the mistake is in the config.php
file, or in the AJAX call, or maybe somewhere else where I'm missing.
The markup ('step4.php'):
<form method="post" action="step5.php">
<span id="newfile">
<input type="file" name="uploaded_file" id="imageupload" accept=".jpg, .jpeg, .png">
<img alt="Preview Loading..." id="imagepreview">
</span>
<!-- The submit button is elsewhere before the end of the form, it acts as a next button -->
</form>
The javascript function:
$(document).on('click', '#uploadbutton', function(e) {
e.preventDefault();
//Grab upload elements and and file
var uploadbutton = this;
var uploader = document.getElementById('imageupload');
var file = document.getElementById('imageupload').files[0];
//Hide the upload elements
uploadbutton.parentNode.removeChild(uploadbutton);
uploader.parentNode.removeChild(uploader);
//Make the form and pass it to server
var formData = new FormData();
formData.append('file', file); //$_FILES['file']
$.ajax({
url: 'uploadfile.php',
type: 'POST',
data: formData,
processData: false,
contentType: false
})
.done(function(data) {//Data is the relative path to the file
//Hide the old content
document.getElementById('newfile').innerHTML = '';
//Show the new image
var text = document.createTextNode('Uploaded File: '+data.replace('temp/', '', data));
var br = document.createElement("br");
var imgElement = document.createElement("IMG");
imgElement.setAttribute('src', data);
document.getElementById('newfile').appendChild(text);
document.getElementById('newfile').appendChild(br);
document.getElementById('newfile').appendChild(imgElement);
})
.fail(function() {
alert("Error uploading the file. Hit refresh and try again.");
});
});
'uploadfile.php': (the one that my debugger shows gets executed twice...)
<?php
//require_once('config.php'); //THE PROBLEM?
if($_FILES) {
//Get the uploaded file information
$name_of_uploaded_file = $_FILES['file']['name'];
//Actually upload the file to the server!
$upload_folder = 'temp/'; //Make a file named temp
$path_of_uploaded_file = $upload_folder.$name_of_uploaded_file;
$tmp_path = $_FILES["file"]["tmp_name"];
if(is_uploaded_file($tmp_path)) {
copy($tmp_path,$path_of_uploaded_file);
$_SESSION['step4filepath'] = $path_of_uploaded_file;
echo $path_of_uploaded_file;
}
}
?>
'config.php': the one that screws stuff up when it's included
<?php
session_start();
//Initialize session data
if(empty($_SESSION)) {
if(!isset($_SESSION['step4filepath'])) {
$_SESSION['step4filepath'] = '';
}
}
//Update session data
if($_SERVER['REQUEST_METHOD'] === 'POST') {
if($_SESSION['currentPage'] == 4) {
//input for step 4, we just want filename if they submit the form
$_SESSION['step4filepath'] = $_POST['step4filepath'];
}
//Enable us to hit the back button!
header("Location: " . $_SERVER['REQUEST_URI']);
}
?>
Totally lost on this.