Image Upload Script WordPress
- SOLVED
I've been writing a simple ajax form processing script, which includes an image upload option. My entire form works perfect, except for the image part.
The HTML form is outputted through a shortcode and looks like this:
function wbm_submit_form()
{
$content .= '<fieldset id="wbm_fieldset">';
$content .= '<div id="wbm_note"></div> <!--notification area used by jQuery/Ajax -->';
$content .= '<div id="wbm_form_fields">';
$content .= '<form id="wbm_bug_form" action="' . WP_PLUGIN_URL . '/bug-manger/includes/bug-process-submission.php" method="POST" enctype="multipart/form-data">';
$content .= '<legend>Bug Submission Form</legend>';
$content .= '<div>';
$content .= '<div><label for="wbm_email">Your Email</label><input type="text" name="wbm_email" id="wbm_email" /></div>';
$content .= '<div><label for="wbm_dec">Description of Bug</label><textarea name="wbm_desc" id="wbm_desc"></textarea></div>';
$content .= '<div><input type="file" name="wmb_image"/></div>';
$content .= '<div><label for="wbm_level">Importance</label><select name="wbm_level" id="wbm_level">';
$content .= '<option>Urgent</option>';
$content .= '<option>High</option>';
$content .= '<option>Medium</option>';
$content .= '<option>Low</option>';
$content .= '</select></div>';
$content .= '<div><input class="submit" id="wbm_submit" type="submit" name="submit" value="Submit" /></div>';
$content .= '</div>';
$content .= '</form>';
$content .= '</div>';
$content .= '</fieldset>';
return $content;
}
add_shortcode('bugsform', 'wbm_submit_form');
Then here's my form processing code:
define ("MAX_SIZE","20000000");
//This function reads the extension of the file. It is used to determine if the file is an image by checking the extension.
function getExtension($str)
{
$parts = explode('.', $str);
return end($parts);
}
function wbm_submit_bug()
{
global $wpdb; // load the wordpress database
global $wbm_db_table;
error_reporting (E_ALL ^ E_NOTICE);
$post = (!empty($_POST)) ? true : false;
if($post) // if data is being sent
{
$address = trim($_POST['wbm_email']); // get the email address
$desc = strip_tags(stripslashes($_POST['wbm_desc'])); // get the email address
$image = $_FILES['wbm_image']['name'];
$level = $_POST['wbm_level']; // get the email address
// Check and make sure the address field is not empty
if(!$address)
{
$error .= 'Please enter your email.<br/>';
}
// make sure the email validates
if($address && !ValidateEmail($address))
{
$error .= "<strong>Error</strong>: An invalid email address was provided.";
}
if(!$desc)
{
$error .= 'Please enter a description.<br/>';
}
if ($image)
{
//get the original name of the file from the clients machine
$filename = stripslashes($_FILES['wmb_image']['name']);
//get the extension of the file in a lower case format
$extension = getExtension($filename);
$extension = strtolower($extension);
//if it is not a known extension, we will suppose it is an error and will not upload the file,
//otherwise we will do more tests
if (($extension != "jpg") && ($extension != "png") && ($extension != "gif"))
{
//print error message
$error .= 'Unknown extension! ' . $extension;
}
else
{
//get the size of the file in bytes
//$_FILES['image']['tmp_name'] is the temporary filename of the file
//in which the uploaded file was stored on the server
$size=filesize($_FILES['wmb_image']['tmp_name']);
//compare the size with the maxim size we defined and print error if bigger
if ($size > MAX_SIZE)
{
$error .= 'You have exceeded the size limit!';
}
//keep the original file name
$image_name=$filename;
if (!$error)
{
//the new name will be containing the full path where fonts will be stored (fonts folder)
$newname = WP_PLUGIN_URL . '/bug-manager/includes/uploads/' . $image_name;
//we verify if the image has been uploaded, and print error instead
$copied = copy($_FILES['wmb_image']['tmp_name'], $newname);
if (!$copied)
{
$error .= 'Copy unsuccessfull!';
}
}
}
}
// everything ok
if(!$error)
{
// insert the email into the database
$insert_data = $wpdb->insert( $wbm_db_table, array( 'submitter_email' => $address, 'bug_desc' => $desc, 'level' => $level, 'screenshot' => $image_name) );
if ($insert_data)
{
echo 'OK'; // this tells jquery to display the confirmation message
}
else
{
echo 'Something went wrong';
}
}
// if there's an error
else
{
echo '<div class="notification_error">'.$error.'</div>'; // set up error div for jQuery/Ajax
}
}
}
Remember, the form works perfect, except that images don't seem to get picked up at all. No error is thrown or anything.
Ideas?
Answers (2)
Kevin Robertson answers:
Looks like you just made a little typo.
In the form, you've got the name of the upload input as "<strong>wmb_image"</strong> but in the PHP function you're referencing "<strong>wbm_image</strong>'".
Just change the input name and it should start picking the image up.
Pippin Williamson comments:
You're right, I did have a typo, though it still doesn't work.
It seems as though the image isn't getting detected at all. I just tried restricting the uploads to just png's, then uploaded a jpg and the extension check didn't throw an error. I'm not even sure it's getting into the "if ($image)" check.
Pippin Williamson comments:
$image is coming up as NULL for some reason. Any idea why?
Kevin Robertson comments:
Are you sure file_uploads is enabled in your server's php.ini file?
Check with phpinfo() to make sure.
Maor Barazany answers:
Try to var_dump($image) to see what it contains.
Also try with Firebug's Net tab to see what is posted from the client to the server.
Than it might give a way to the source of the issue.
Pippin Williamson comments:
It's coming up as null, which is what I suspected, but why it's NULL, I have no idea.
Maor Barazany comments:
Try to var_dump($_FILES['wbm_image']) and also var_dump($_FILES) and see what it contains
Pippin Williamson comments:
Also null, as is var_dump($_FILES['wbm_image']['name'])
Maor Barazany comments:
Weird. Try to see what is posted to server via firebug's Net tab.
Also try to view the source of the output html form and see that everything in the output is as it should be.
Pippin Williamson comments:
The image isn't getting posted at all. Check the image.
The HTML looks fine.