I have a simple page that has 9 block regions, for each region - the user can select an image for the "menu" and another image for the "content" of that region.
They can then upload those images with a submit button "Upload files for this region".
There is also a 'save' / submit at the top of the page.
The page uses one big form (it was lots of multiple smaller forms for each region, which worked but I wanted to set it as 1 form since I needed to submit everything at once).
My HTML page is basically:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="container">
<div class="well well-large">
<h1>Configuration page</h1>
</div>
<form action="index.php" method="post" enctype="multipart/form-data">
<div>
<div class="row">
<div class="span4">
<button class="btn btn-primary" type="submit">Save</button>
</div>
</div>
</div>
<div class="rowspace row">
<div class="column span3">
<h4>Content: 1</h4>
<input type="file" name="fileData[1][home]" id="fileData[1][home]" title="Select MENU image"><br>
<input type="file" name="fileData[1][content]" id="fileData[1][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
<div class="column offset1 span3">
<h4>Content: 2</h4>
<input type="file" name="fileData[2][home]" id="fileData[2][home]" title="Select MENU image"><br>
<input type="file" name="fileData[2][content]" id="fileData[2][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
<div class="column offset1 span3">
<h4>Content: 3</h4>
<input type="file" name="fileData[3][home]" id="fileData[3][home]" title="Select MENU image"><br>
<input type="file" name="fileData[3][content]" id="fileData[3][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
</div>
<div class="rowspace row">
<div class="column span3">
<h4>Content: 4</h4>
<input type="file" name="fileData[4][home]" id="fileData[4][home]" title="Select MENU image"><br>
<input type="file" name="fileData[4][content]" id="fileData[4][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
<div class="column offset1 span3">
<h4>Content: 5</h4>
<input type="file" name="fileData[5][home]" id="fileData[5][home]" title="Select MENU image"><br>
<input type="file" name="fileData[5][content]" id="fileData[5][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
<div class="column offset1 span3">
<h4>Content: 6</h4>
<input type="file" name="fileData[6][home]" id="fileData[6][home]" title="Select MENU image"><br>
<input type="file" name="fileData[6][content]" id="fileData[6][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
</div>
<div class="rowspace row">
<div class="column span3">
<h4>Content: 7</h4>
<input type="file" name="fileData[7][home]" id="fileData[7][home]" title="Select MENU image"><br>
<input type="file" name="fileData[7][content]" id="fileData[7][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
<div class="column offset1 span3">
<h4>Content: 8</h4>
<input type="file" name="fileData[8][home]" id="fileData[8][home]" title="Select MENU image"><br>
<input type="file" name="fileData[8][content]" id="fileData[8][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
<div class="column offset1 span3">
<h4>Content: 9</h4>
<input type="file" name="fileData[9][home]" id="fileData[9][home]" title="Select MENU image"><br>
<input type="file" name="fileData[9][content]" id="fileData[9][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
</div>
<div class="rowspace row">
<div class="column span3">
<h4>Map Content</h4>
<input type="file" name="fileData[10][content]" id="fileData[10][content]" title="Select CONTENT image"><br>
<input type="submit" class="btn btn-info" name="submit" value="Upload">
</div>
</div>
</form>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script src="js/bootstrap.file-input.js"></script>
<script type="text/javascript" src="js/zoombox.js"></script>
<script>
$(document).ready(function(){
$('input[type=file]').bootstrapFileInput();
$('.zoombox').zoombox();
});
</script>
</body>
</html>
My var_dump($_FILES) output is:
<?php
array(1) {
["fileData"]=> array(5) {
["name"]=> array(10) {
[1]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[2]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[3]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[4]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[5]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[6]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[7]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[8]=> array(2) {
["home"]=> string(5) "8.png" ["content"]=> string(0) ""
}
[9]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[10]=> array(1) {
["content"]=> string(0) ""
}
}
["type"]=> array(10) {
[1]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[2]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[3]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[4]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[5]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[6]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[7]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[8]=> array(2) {
["home"]=> string(9) "image/png" ["content"]=> string(0) ""
}
[9]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[10]=> array(1) {
["content"]=> string(0) ""
}
}
["tmp_name"]=> array(10) {
[1]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[2]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[3]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[4]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[5]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[6]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[7]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[8]=> array(2) {
["home"]=> string(14) "/tmp/php2DdwXG" ["content"]=> string(0) ""
}
[9]=> array(2) {
["home"]=> string(0) "" ["content"]=> string(0) ""
}
[10]=> array(1) {
["content"]=> string(0) ""
}
}
["error"]=> array(10) {
[1]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[2]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[3]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[4]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[5]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[6]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[7]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[8]=> array(2) {
["home"]=> int(0) ["content"]=> int(4)
}
[9]=> array(2) {
["home"]=> int(4) ["content"]=> int(4)
}
[10]=> array(1) {
["content"]=> int(4)
}
}
["size"]=> array(10) {
[1]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[2]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[3]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[4]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[5]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[6]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[7]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[8]=> array(2) {
["home"]=> int(210379) ["content"]=> int(0)
}
[9]=> array(2) {
["home"]=> int(0) ["content"]=> int(0)
}
[10]=> array(1) {
["content"]=> int(0)
}
}
}
}
I'm guessing it's something from with my HTML page? It was working fine before I tried to 'refactor' it into one form instead of ~20 forms...
So the problem was because I had the same name value for all the submit buttons... changed each submit button to be a different name and it's working fine now.