Upload Image in a Wordpress page using PHP

Question

Hello awesome people of SE! :)

Okay, so this is a little far-fetched but I'm trying to get a HTML form with a PHP upload script to work inside a Wordpress page. I can't use a plugin. It's supposed to be a webpage for like a designteam where customers can upload images through the html form (will require login and stuff but I'll deal with that later)

I got a child theme, I've created a page called "upload" and I am editing the file "page-upload.php"

My form in page-upload.php

        <form action="<?php bloginfo('template_url'); ?>/upload.php" method="post" enctype="multipart/form-data">
           <input type="file" name="file" />
            <input type="submit" name="submit" value="Upload" />
        </form>

form action = "upload.php" didn't locate the file correctly so after some googling I found this:

< ?php bloginfo('template_url'); ?>/upload.php"

which manage to locate the file but instead of uploading the image it just echoed every echo from the PHP.

I've used W3Schools PHP file upload example to just get me started but obv it wasn't as simple as I've hoped ^_^

http://www.w3schools.com/php/php_file_upload.asp

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        echo "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        echo "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
    echo "Sorry, there was an error uploading your file.";
    }
}
    ?>

So is this possible to do within WP with PHP and HTML or would it require some JS\jQuery in there? :)

Answer 1

Implementing your own upload form like this can be a major security vulnerability, you might want to instead use a library/script where such potential issues are already dealt with properly.

Here is one I remember using successfully on a project for a similar purpose (user uploaded video)... though it may be more than what you need, it does have more examples and documentation than a simplified web example: PL Upload

EDIT: I just remembered that was actually my fallback uploader for that project, the main one used was ResumeableJS as it supports file resuming for large files (very handy for video uploads!)