Multidimensional array file upload

Question

I'm currently working on a script where users can add field groups to a form and include an image The problem is I have no idea where to start with uploading files in a multidimentional array.

I have built the form so far: http://letsfixit.co.uk/fortest.php and have it working with the adding field groups and creating the array, but so far nothing on getting the files to upload. All I can see is it storing the filename as a string in the array and that is it!

Is there a way to use a foreach statement and just use a normal method of file upload using php? Something like a modified version of:

if ($_FILES["file"]["error"] > 0) {
    echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
  } else {
    echo "Upload: " . $_FILES["file"]["name"] . "<br>";
    echo "Type: " . $_FILES["file"]["type"] . "<br>";
    echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
    echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";
    if (file_exists("upload/" . $_FILES["file"]["name"])) {
      echo $_FILES["file"]["name"] . " already exists. ";
    } else {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "upload/" . $_FILES["file"]["name"]);
      echo "Stored in: " . "upload/" . $_FILES["file"]["name"];
    }
  }

The only problem I am having is when the form is posted there is nothing in the $_FILES, it is just an empty array

Answer 1

This is the final edit -

you were missing the 'enctype' option from your form:

I couldn't get your php script to work. here is an approach...

imo, you are working too hard at the client. PHP will sort out your input field arrays for you. Currently, on the client, you are trying to organise all the data for each step by generating indexes your self. I suggest not to bother. Use array widget names but fixed ones and collect all the data for each step server side. It simplifies your javascript as you just duplicate field groups but do not change the names.

Serverside PHP arranges all the inputs in separate arrays. That is fine, as the first row in each array is for step 1, the second 'step 2' etc.

Anyway, here is a 'two step' form and upload script that works and has been tested.

<?php
if (!empty($_FILES)) {

    // var_dump($_POST);

    // foreach($_FILES as $key => $value){
    //    var_dump($key, 'the key', $value, 'the value');
    // }
    // var_dump($_FILES["steps"]["error"]["image"], '$_FILES["steps"]["error"]["image"]');

    // all valid steps in here...
    $theOutputSteps = array();

    /*
     * Please note there are separate arrays.
     * But any ONE index value across all arrays is the complete record!
     *
     * This works 'cos empty values still come in and php makes them...
     */

    // we need to pick something to drive off... I use '$_POST[steps][title].
    // It does not matter as all the input arrays are the exact same size.

    /*
     * let us start to reassemble the information into a useable form...
     */
    foreach($_POST['steps']['title'] as $key => $value) {
        $curStep = array();
        $curStep['title'] = $value;
        $curStep['description'] = $_POST['steps']['description'][$key];

        // file details...
        $curStep['image']['error'] = $_FILES["steps"]["error"]["image"][$key];
        if (!$curStep['image']['error']) { // save the file
            $curStep['image']['name']      = $_FILES["steps"]["name"]["image"][$key];
            $curStep['image']['type']      = $_FILES["steps"]["type"]["image"][$key];
            $curStep['image']['size']      = $_FILES["steps"]["size"]["image"][$key];
            $curStep['image']['tmp_name']  = $_FILES["steps"]["tmp_name"]["image"][$key];

            if (!file_exists('./upload/'.$curStep['image']['name'])) {
                 move_uploaded_file($curStep['image']['tmp_name'],
                 './upload/'.$curStep['image']['name']);
            }
            else {
                 $curStep['image']['error'] = "file already exists: ". $curStep['image']['name'];
            }
        }

        $theOutputSteps[] = $curStep;
    }
    var_dump($theOutputSteps, '$theOutputSteps');
}
?>

<form id="steps" method="POST" action="" enctype="multipart/form-data">
    <div id="p_scents">
        <p>
                <label for="p_title_scnt"><input type="text" id="p_title_scnt" size="20" name="steps[title][]" value="Step 1" placeholder="Input Value" /></label> <br />
                <label for="p_step_scnt"><textarea id="p_step_scnt" name="steps[description][]" ></textarea></label> <br />
                <label for="p_image_scnt"><input type="file" id="p_image_scnt" name="steps[image][]" value="" /></label>
        </p>
        <p>
                <label for="p_title_scnt"><input type="text" id="p_title_scnt" size="20" name="steps[title][]" value="Step 2" placeholder="Input Value" /></label> <br />
                <label for="p_step_scnt"><textarea id="p_step_scnt" name="steps[description][]" ></textarea></label> <br />
                <label for="p_image_scnt"><input type="file" id="p_image_scnt" name="steps[image][]" value="" /></label>
        </p>
    </div>
    <a href="#" id="addScnt">Add Another Input Box</a><br /><br />
    <input type="submit" value="Post Guide">
</form>