jQuery-File-Upload doesn't work : PHP jQuery - correct dependancies missing

jQuery-File-Upload doesn't work : PHP jQuery - correct dependancies missing

Hi I like the look of the jQuery-File-Upload plugin but it's insane how
hard it is to remove the fluff code from the good bits.. it seems intent
on forcing stuff down my throat to work.
simply put it works when not part of my code but breaks when I implement
it outside of itself
EG:
the index.html example is RIDDLED with external url references I don' want
/ can't use in my actual code. When I cut it out and attempt to lean it
out it breaks and there is too much to pour through.
the documentation starts far too "deep" into the process for an actual
develop who knows what he wants - there are no "simple" examples there are
"assumptive" examples based on assuming your context.
can someone help me with an index.php of my own that tells me how in as
simple and light way as possible how to target an actual php file where I
put it, what params are sent (for any subsequent db updating I might do)
where to nominate the upload dir in the settings, how to do anything
"normal" is hidden.. First principles are always best, but they are
absent.
simply put: I want to replace the normal "file_upload" htmlform scenario
with the nice gui version from jQuery-File-Upload but it's too hard by
half!
WHERE ARE THE REAL BITS OF CODE!
and before I get lectured this is the 3rd or 4th attempt to implement this
over about 9 months and I have stopped after ~ 4 hours on each
installation. each other time I have backed off and gone with something
less pretty but that I can control properly.
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<!-- Generic page styles -->
<link rel="stylesheet"
href="../common/jQuery-File-Upload_8.7.1/css/style.css">
<!-- CSS to style the file input field as button and adjust the
Bootstrap progress bars -->
<link rel="stylesheet"
href="../common/jQuery-File-Upload_8.7.1/css/jquery.fileupload-ui.css">
<div class="container">
<!-- The file upload form used as target for the file upload
widget -->
<form id="fileupload"
action="//jquery-file-upload.appspot.com/" method="POST"
enctype="multipart/form-data">
<!-- The fileupload-buttonbar contains buttons to
add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span7">
<!-- The fileinput-button span is used to style
the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The loading indicator is shown during file
processing -->
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success
progress-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<!-- The table listing the files available for
upload/download -->
<table role="presentation" class="table
table-striped"><tbody class="files"></tbody></table>
</form>
<br>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery
blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">&lsqauo;</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
{% if (file.error) { %}
<div><span class="label
label-important">Error</span>
{%=file.error%}</div>
{% } %}
</td>
<td>
<p class="size">{%=o.formatFileSize(file.size)%}</p>
{% if (!o.files.error) { %}
<div class="progress progress-success
progress-striped active" role="progressbar"
aria-valuemin="0" aria-valuemax="100"
aria-valuenow="0"><div class="bar"
style="width:0%;"></div></div>
{% } %}
</td>
<td>
{% if (!o.files.error && !i && !o.options.autoUpload)
{ %}
<button class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
<a href="{%=file.url%}" title="{%=file.name%}"
download="{%=file.name%}" data-gallery><img
src="{%=file.thumbnailUrl%}"></a>
{% } %}
</span>
</td>
<td>
<p class="name">
<a href="{%=file.url%}" title="{%=file.name%}"
download="{%=file.name%}"
{%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
</p>
{% if (file.error) { %}
<div><span class="label
label-important">Error</span>
{%=file.error%}</div>
{% } %}
</td>
<td>
<span
class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
<button class="btn btn-danger delete"
data-type="{%=file.deleteType%}"
data-url="{%=file.deleteUrl%}"{% if
(file.deleteWithCredentials) { %}
data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1"
class="toggle">
</td>
</tr>
{% } %}
</script>
<!-- The Iframe Transport is required for browsers without support
for XHR file uploads -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.ui.widget.js"></script>
<!-- The basic File Upload plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script
src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="../common/jQuery-File-Upload_8.7.1/js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain
file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script
src="../common/jQuery-File-Upload_8.7.1/js/cors/jquery.xdr-transport.js"></script>
<![endif]-->