fine uploader changing the input name to match what my script is expecting - fine-uploader

Question

I am incorporating Fine Uploader into a form that already exists.
I've added three Fine Uploader file upload fields. I have one script that controls all three of the boxes. I looked at the inputName attribute and attempted to change that, but it changed the name of all of the fine upload fields to what i set as the inputName (in this case it was photo1). That's not exactly what i want. I want to set the inputName for each field to something different.
In my case, it is important that I have 3 individual boxes because I have a message box that goes with each photo.
I mainly just want to use Fine Uploader for its ability to allow iphone users to select a photo if they are on the phone and also for the thumbnail preview after the photo is selected. All that stuff is great.
The rest of the form I have is already functioning and I can submit it using standard input file fields.
Questions:
Is there a way to use multiple fields on a single page? Do I need to
write a seperate $('#photo1').fineUploader(){...}); per input box?
Is there a way to change the input name for each file upload field?
I assume i can achieve this with seperate script blocks, but is
there a better/cleaner than repeating all that code?
I downloaded the PHP Server Handler files and when i submit my test form with interceptSubmit: true, I see the images upload to my server. That works. (i kinda made a simple form just to test it out). When i change to interceptSubmit: false, add a page called thankyou_post.php as my post action page and in that page I'm just seeing what the form is sending by print_r($_POST); and all i get is Array ( [submit] => submit ) as the response.
I suppose my next step will be to try to write custom blocks per file field and see if the form can process that better.
$(document).ready(function () {
$('#photo1, #photo2, #photo3').fineUploader({
debug: true,
template: "qq-dav-photo-with-thumb",
thumbnails: {
placeholders: {
waitingPath: "placeholders/waiting-generic.png",
notAvailablePath: "placeholders/not_available-generic.png"
}
},
form: {
interceptSubmit: false
},
camera: {
ios: true
},
request: {
endpoint: 'thankyou.php',
paramsInBody: true,
inputName: 'photo1'
},
messages: {
emptyError: 'File is empty',
noFilesError: 'No files attached.',
onLeave: 'We are still uploading your files...Please wait.'
},
validation: {
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
itemLimit: 3,
stopOnFirstInvalidFile: true
}
}).on('progress', function (id, fileName, uploadedBytes, totalBytes) {
console.log('progress...');
}).on('complete', function(event, id, fileName, responseJSON) {
if (responseJSON.success){
file_name = responseJSON.name;
console.log('hoorah! File name: '+file_name);
};
}).on('allComplete', function(event, id, fileName, responseJSON) {
console.log('hoorah! All complete!');
});
});
Any thoughts on what i can do to make this work?
UPDATE #1
LINK: http://ijwebsites.com/fineuploader/
This is the HTML on my form page.
<form action="thankyou_post.php" method="post"
id="qq-form" name="webform" enctype="multipart/form-data" >
<!-- Fine Uploader DOM Element
====================================================================== -->
<div id="photo1"></div>
<br>
<br>
<div id="photo2"></div>
<br>
<br>
<div id="photo3"></div>
<input type="submit" name="submit" value="submit">
</form>
And my thankyou_post.php page for my test page is very basic, i just want it to tell what values were submitted to the page so i am doing on that page:
<?php
if ($_FILES["photo1"]["error"] > 0) {
echo "Error: " . $_FILES["photo1"]["error"] . "<br>";
} else {
echo "Upload: " . $_FILES["photo1"]["name"] . "<br>";
echo "Type: " . $_FILES["photo1"]["type"] . "<br>";
echo "Size: " . ($_FILES["photo1"]["size"] / 1024) . " kB<br>";
echo "Stored in: " . $_FILES["photo1"]["tmp_name"];
}
?>
When I submit the form, i get a message "Error: 4". What do you think the problem is?

Answer 1

If you'd like to have multiple uploaders on the same page, and have varying options for each uploader (in this case, a differing request.inputName option), you'll need to initialize each instance separately. You can combine initialization into a common function that takes the input name as a parameter, if you'd like.
If you want Fine Uploader to send the entire contents of your form, including the selected files, ensure the form.interceptSubmit option is set to true (this is the default anyway). If you do not want this to happen, and you want to upload selected files in a separate request, then you should not enable form support at all in Fine Uploader. Form support was created for those who want Fine Uploader to completely manage a form.
It's not clear from your question what your form or forms look like, as you have left out your markup. If you are expecting Fine Uploader to control multiple file input elements in a single form, then you will need to make use of the extraButtons option.