Counting 3 uploads

this is really annoying me (my lack of understanding does)

I have a form which allows multiple uploads

set up like

          <ul id="media-list" class="col-8 clearfix">
          <li class="myupload">
          <span>
          <i class="fa fa-plus" aria-hidden="true"></i>
          <input type="file" id="picupload" class="picupload" click-type="type2" name="Image[]" accept="image/*" multiple />
          </span>
          </li>
          </ul>

I’m having a hard time trying to upload all the images
Here is my php to try & so that

				echo 'Upload Diectory: '.$upload_directory;

				$tmp = $_FILES['Thumb']['tmp_name']; // Create and ppend a variable to tmp_name
				$image = $thumb; // Create and append a variable to tmp_name		  
			  
				require('test_image.php');
				
				echo '<br>Featured Pic: '.$tmp.' => '.$file;
				
				move_uploaded_file($tmp, $file);
				
			 }
			 //upload pictures
			 
			 if(isset($_FILES['Image']['name'][0])) {

				$total = count($_FILES['Image']['name']);
					
					echo '<pre>';print_r($_FILES['Image']);echo '</pre>';
					echo '<br>Count of Images: '.$total.', to be uploaded!<br>';

					// Loop through each file
					for($i = 0; $i < $total; $i++) {
			
						$tmp = $_FILES['Image']['tmp_name'][$i]; // Create and ppend a variable to tmp_name
						$image = $_FILES['Image']['name'][$i]; // Create and append a variable to tmp_name		  
			  
						require('test_image.php');
	
						echo '<br>Image '.$i.': '.$tmp.' => '.$file;
	
						move_uploaded_file($tmp, $file);
							
					}                                           			
			} // do nothing if the first image isn't selected (meaning no image is selected)

the result seems to be only 1 image seems to be there, why not all 3?

What does the value ‘2’ suggest in the ‘error’ element?

Is there any javascript involved in posting the form or is it just normal HTML?

sorrry, didn’t explain the situation too well.
Heres the form,


I can select multiple images for that plus thing (which is javascript based)
So if I fill out the form & submit it,

I can see that three images are selected
the HTML for that input button is


          <label class="col-sm-2 col-form-label">Images</label>
          <ul id="media-list" class="col-8 clearfix">
          <li class="myupload">
          <span>
          <i class="fa fa-plus" aria-hidden="true"></i>
          <input type="file" id="picupload" class="picupload" click-type="type2" name="Image[]" accept="image/*" multiple />
          </span>
          </li>
          </ul>

The result,


Here Im trying to see if I can get to each image by

<?php
					
					echo '<pre>';print_r($_FILES['Image']);echo '</pre>';
					echo '<br>Count of Images: '.$total.', to be uploaded!<br>';

					// Loop through each file
					for($i = 0; $i < $total; $i++) {
			
						$tmp = $_FILES['Image']['tmp_name'][$i]; // Create and ppend a variable to tmp_name
						$image = $_FILES['Image']['name'][$i]; // Create and append a variable to tmp_name		  
			  
						require('test_image.php');
	
						echo '<br>Image '.$i.': '.$tmp.' => '.$file;
	
						move_uploaded_file($tmp, $file);
							

?>

So as the PHP is only receiving an array with a single image in it, that suggests that the problem lies in whatever code is submitting the form data.

ok, well I have the form, being handled by PHP via the POST method.
I fill out the form


When I open up that developer console and take a look at the output I notice that the two images appear in some array
I dont see why in the output section, the whole POST array isn’t visible.
Do you know why that is?
Also when I submit the form to this php code,

echo "POST[[]";
var_dump($_POST);
echo '<br>';
echo 'FILES []	<pre>'.print_r($_FILES).'</pre>';
echo 'FILES["Image"]<pre>';print_r($_FILES['Image']);echo '</pre>';

I get…

POST[]array(18) { ["userID"]=> string(1) "3" ["Name"]=> string(6) "rtdrtf" ["Email"]=> string(22) "luke@gmail.comafghjsrt" ["phone1"]=> string(0) "" ["phone2"]=> string(0) "" ["phone3"]=> string(0) "" ["Method"]=> string(13) "Please Select" ["Rate"]=> string(1) "8" ["Weight"]=> string(1) "5" ["HFeet"]=> string(1) "5" ["HInches"]=> string(0) "" ["Waist"]=> string(1) "5" ["Cup"]=> string(1) "x" ["Age"]=> string(3) "-15" ["Ethnicity"]=> string(14) "iiiiiiiiiiiiii" ["Introduction"]=> string(6) "yf7uii" ["MAX_FILE_SIZE"]=> string(7) "1000000" ["submit"]=> string(0) "" }
Array ( [Thumb] => Array ( [name] => [type] => [tmp_name] => [error] => 4 [size] => 0 ) [Image] => Array ( [name] => Array ( [0] => 84397498.jpeg ) [type] => Array ( [0] => image/jpeg ) [tmp_name] => Array ( [0] => /tmp/phpwOonwD ) [error] => Array ( [0] => 0 ) [size] => Array ( [0] => 113849 ) ) ) FILES []

1

FILES["Image"]

Array
(
    [name] => Array
        (
            [0] => 84397498.jpeg
        )

    [type] => Array
        (
            [0] => image/jpeg
        )

    [tmp_name] => Array
        (
            [0] => /tmp/phpwOonwD
        )

    [error] => Array
        (
            [0] => 0
        )

    [size] => Array
        (
            [0] => 113849
        )

)

So is there a problem with the js whick lets me select multyiple images, that would be my uploiads.js but I think this is what is what im thinking the error must be coming from

            $('#media-list').html('');
            $('#media-list').html('<li class="myupload"><span><i class="fa fa-plus" aria-hidden="true"></i><input type="file" click-type="type2" id="picupload" class="picupload" name="Image[]"></span></li>');
            $('#hint_brand').modal('show');

But thats confusing cause arent all the images going into the Images?

That line will not output what is expected. The print_r() needs to be a separate statement and not concatenated.

Only an opening and closing <pre> statement is required to format the print_r and var_dump function contents.

Might it work concatenated if the second optional “return” parameter was TRUE? eg.

echo 'FILES [] <pre>'.print_r($_FILES, TRUE).'</pre>'; 
1 Like

TRUE :slight_smile:

1 Like

Well, I don’t know, which is why I keep asking about the code that handles that. I know you’re dealing with a $_POST array in your PHP, and I can see from your screen shots that it is not receiving the array as you might expect it to. Therefore, the issue must lie in whatever code goes between your <input> and the next stage of the process, which presumably is your uploads.js code. Either it’s not populating the images array in the way you expect it, or it’s not sending all of the array when the form is submitted.

What I’m wondering is, what happens when you hit the “+” button to add another image? Is it duplicating the html input in code? If so, does it change the id parameter, and if it does not change that, does the code that gathers the inputs do so using the id, so will having duplicates cause more trouble than having any html element with a duplicate id?

ok, Here in the uploads.js script to handle the uploads

$(function() {
    var names = [];
    $('body').on('change', '.picupload', function(event) {
        var getAttr = $(this).attr('click-type');
        var files = event.target.files;
        var output = document.getElementById("media-list");
        var z = 0
        if (getAttr == 'type1') {

            $('#media-list').html('');
            $('#media-list').html('<li class="myupload"><span><i class="fa fa-plus" aria-hidden="true"></i><input type="file" click-type="type2" id="picupload" class="picupload" name="Image[]"></span></li>');
            $('#hint_brand').modal('show');

            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                names.push($(this).get(0).files[i].name);
                if (file.type.match('image')) {
                    var picReader = new FileReader();
                    picReader.fileName = file.name
                    picReader.addEventListener("load", function(event) {
                        var picFile = event.target;

                        var div = document.createElement("li");


                        div.innerHTML = "<img src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/><div  class='post-thumb'><div class='inner-post-thumb'><a href='javascript:void(0);' data-id='" + event.target.fileName + "' class='remove-pic'><i class='fa fa-times' aria-hidden='true'></i></a><div></div>";

                        $("#media-list").prepend(div);


                    });
                } else {

                    var picReader = new FileReader();
                    picReader.fileName = file.name
                    picReader.addEventListener("load", function(event) {

                        var picFile = event.target;

                        var div = document.createElement("li");

                        div.innerHTML = "<video src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'></video><div id='" + z + "'  class='post-thumb'><div  class='inner-post-thumb'><a data-id='" + event.target.fileName + "' href='javascript:void(0);' class='remove-pic'><i class='fa fa-times' aria-hidden='true'></i></a><div></div>";
                        $("#media-list").prepend(div);

                    });

                }
                picReader.readAsDataURL(file);
            }
            console.log(names);
        } else if (getAttr == 'type2') {
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                names.push($(this).get(0).files[i].name);
                if (file.type.match('image')) {

                    var picReader = new FileReader();
                    picReader.fileName = file.name
                    picReader.addEventListener("load", function(event) {

                        var picFile = event.target;

                        var div = document.createElement("li");

                        div.innerHTML = "<img src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/><div  class='post-thumb'><div class='inner-post-thumb'><a href='javascript:void(0);' data-id='" + event.target.fileName + "' class='remove-pic'><i class='fa fa-times' aria-hidden='true'></i></a><div></div>";

                        $("#media-list").prepend(div);

                    });
                } else {
                    var picReader = new FileReader();
                    picReader.fileName = file.name
                    picReader.addEventListener("load", function(event) {

                        var picFile = event.target;

                        var div = document.createElement("li");

                        div.innerHTML = "<video src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'></video><div class='post-thumb'><div  class='inner-post-thumb'><a href='javascript:void(0);' data-id='" + event.target.fileName + "' class='remove-pic'><i class='fa fa-times' aria-hidden='true'></i></a><div></div>";

                        $("#media-list").prepend(div);

                    });
                }
                picReader.readAsDataURL(file);

            }
            // return array of file name
            console.log(names);
        }

    });

    $('body').on('click', '.remove-pic', function() {
        $(this).parent().parent().parent().remove();
        var removeItem = $(this).attr('data-id');
        var yet = names.indexOf(removeItem);

        if (yet != -1) {
            names.splice(yet, 1);
        }
        // return array of file name
        console.log(names);
    });
    $('#hint_brand').on('hidden.bs.modal', function(e) {
        names = [];
        z = 0;
    });
});

when I fill out the form (er only selecting images which im trying to add into an Image) like


The result is

FILES["Image"]

Array
(
    [name] => Array
        (
            [0] => 85503376.png
        )

    [type] => Array
        (
            [0] => image/png
        )

    [tmp_name] => Array
        (
            [0] => /tmp/php1s91ue
        )

    [error] => Array
        (
            [0] => 0
        )

    [size] => Array
        (
            [0] => 407211
        )

)

when i print out the Image
So it looks like your right as the array only holds 1 image and is overwritten whenever a new image is selected.
I thought I was on the right track when I made the name of the image thing in uploads.js to be Image to make each image added to the array, but I gather my logic is flawed.

I’m not that experienced in javascript, but your code there seems to be building up an array called names which contains the filenames as they are added to the form. I can’t see where the actual upload is handled - can you show the code for that part? If you have a look at the <form> tag or the <submit> tag, there may be a link to another js function. In your PHP, have you tried just doing a var_dump($_FILES) or var_dump($_POST) to see what’s there?

1 Like

Yep, when I print out the FILES, I get…

  [Image] => Array
        (
            [name] => Array
                (
                    [0] => 5a293bb0554e5_1g9zn8n8ellx__605-copy.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpcRKxut
                )

            [error] => Array
                (
                    [0] => 0
                )

            [size] => Array
                (
                    [0] => 119633
                )

        )

Which is only slightly tight as I choose three images, but the FILES{} only has the Image
Im not too experienced in javasript either but im thinking the forms upload button (and also any image choosen there-after is preformed by this part

$('#media-list').html('');
$('#media-list').html('<li class="myupload"><span><i class="fa fa-plus" aria-hidden="true"></i><input type="file" click-type="type2" id="picupload" class="picupload" name="Image[]"></span></li>');
 $('#hint_brand').modal('show');

I thought simply changing the name of the input to an array would ensure there would be an image in [0][1] and [2] of that array (Image[0] would be the first, Imagee[1] would be the second, and Image[2] would be the third)I

The forms method is to a php page so I thought only PHP would handle the data, no? If there is a BETTER WAY TO ACHIEVE THIS RESULT, LET ME KNOW BUT THE ONLY REASON i WANT THIS TO WORK IS SO THAT PEOPLE CAN PREVIEW AN IMAGE BEFORE IT IS UPLOADED.

and what about when you dump $_POST ?

Is “ADD PROVIDER” the button you click to actually submit the form to the PHP? What is the code for that? I think the code you’ve shown is to add an image to the form, not to actually submit the form.

What was it, before you changed it? If this is an image upload script you’ve got from somewhere, did it support multiple images before?

Yes, the "Add Provider button is the submit button of the form, here the output when I output the POST

POST []

array(18) {
  ["userID"]=>
  string(1) "8"
  ["Name"]=>
  string(6) "cfbdcf"
  ["Email"]=>
  string(21) "luke@gmail.comacvbncv"
  ["phone1"]=>
  string(0) ""
  ["phone2"]=>
  string(0) ""
  ["phone3"]=>
  string(0) ""
  ["Method"]=>
  string(13) "Please Select"
  ["Rate"]=>
  string(0) ""
  ["Weight"]=>
  string(0) ""
  ["HFeet"]=>
  string(0) ""
  ["HInches"]=>
  string(0) ""
  ["Waist"]=>
  string(0) ""
  ["Cup"]=>
  string(1) "x"
  ["Age"]=>
  string(0) ""
  ["Ethnicity"]=>
  string(0) ""
  ["Introduction"]=>
  string(0) ""
  ["MAX_FILE_SIZE"]=>
  string(7) "1000000"
  ["submit"]=>
  string(0) ""
}

I think I made a learning mistake as I just was so excited I found a way to preview images before upload I didnt bother to read any docs about its use. I assumed it\ put the files into an array because nothing seemed to happen when an image was selected
I noticed the image was added to the names which is output to the console


But when the form is submitted, there is no mention of the names array, since its not in the POST of FILES arrays do that mean these files (names) is not being attached to the form like I thought?
I think there might be an easier way to simply add a preview-thing to any image before its uploaded

ok, think I figured something out, when I select multiple images ussing the shift key. Ive been selecting 1 at a time) I get an output like

FILES["Image"]

Array
(
    [name] => Array
        (
            [0] => 85480610.jpg
            [1] => 85480621.jpg
            [2] => 85480641.jpg
            [3] => 
        )

    [type] => Array
        (
            [0] => image/jpeg
            [1] => image/jpeg
            [2] => image/jpeg
            [3] => 
        )

    [tmp_name] => Array
        (
            [0] => /tmp/phpZYfFBj
            [1] => /tmp/phplT5GvV
            [2] => /tmp/phpFsiLpx
            [3] => 
        )

    [error] => Array
        (
            [0] => 0
            [1] => 0
            [2] => 0
            [3] => 4
        )

    [size] => Array
        (
            [0] => 93344
            [1] => 68664
            [2] => 16752
            [3] => 0
        )

)

And everything works like I hoped.
I was only selecting one image at a time because I wanted to ensure the upload thing could be used by all (even users who only know how to select only 1 thing at a time & are clueless when it comes to the shift or control ,keys)

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.