title: jQuery-File-Upload doesn't work : PHP jQuery - correct dependancies missing
body: <p>Hi I like the look of the <a href="https://github.com/blueimp/jQuery-File-Upload" rel="nofollow">jQuery-File-Upload plugin</a> 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.</p>
  
  <p>simply put it works when not part of my code but breaks when I implement it outside of itself</p>
  
  <p>EG:</p>
  
  <ul>
  <li>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.</li>
  <li>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.</li>
  <li>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.</li>
  <li>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!</li>
  </ul>
  
  <p><strong>WHERE ARE THE REAL BITS OF CODE!</strong></p>
  
  <p>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.</p>
  
  <pre><code>        &lt;!-- Force latest IE rendering engine or ChromeFrame if installed --&gt;
          &lt;!--[if IE]&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
          &lt;![endif]--&gt;
  
          &lt;!-- Generic page styles --&gt;
          &lt;link rel="stylesheet" href="../common/jQuery-File-Upload_8.7.1/css/style.css"&gt;
          &lt;!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --&gt;
          &lt;link rel="stylesheet" href="../common/jQuery-File-Upload_8.7.1/css/jquery.fileupload-ui.css"&gt;
  
          &lt;div class="container"&gt;
  
              &lt;!-- The file upload form used as target for the file upload widget --&gt;
              &lt;form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data"&gt;
  
                  &lt;!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --&gt;
                  &lt;div class="row fileupload-buttonbar"&gt;
                      &lt;div class="span7"&gt;
                          &lt;!-- The fileinput-button span is used to style the file input field as button --&gt;
                          &lt;span class="btn btn-success fileinput-button"&gt;
                              &lt;i class="icon-plus icon-white"&gt;&lt;/i&gt;
                              &lt;span&gt;Add files...&lt;/span&gt;
                              &lt;input type="file" name="files[]" multiple&gt;
                          &lt;/span&gt;
                          &lt;button type="submit" class="btn btn-primary start"&gt;
                              &lt;i class="icon-upload icon-white"&gt;&lt;/i&gt;
                              &lt;span&gt;Start upload&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;button type="reset" class="btn btn-warning cancel"&gt;
                              &lt;i class="icon-ban-circle icon-white"&gt;&lt;/i&gt;
                              &lt;span&gt;Cancel upload&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;button type="button" class="btn btn-danger delete"&gt;
                              &lt;i class="icon-trash icon-white"&gt;&lt;/i&gt;
                              &lt;span&gt;Delete&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;input type="checkbox" class="toggle"&gt;
                          &lt;!-- The loading indicator is shown during file processing --&gt;
                          &lt;span class="fileupload-loading"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;!-- The global progress information --&gt;
                      &lt;div class="span5 fileupload-progress fade"&gt;
                          &lt;!-- The global progress bar --&gt;
                          &lt;div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"&gt;
                              &lt;div class="bar" style="width:0%;"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!-- The extended global progress information --&gt;
                          &lt;div class="progress-extended"&gt;&amp;nbsp;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- The table listing the files available for upload/download --&gt;
                  &lt;table role="presentation" class="table table-striped"&gt;&lt;tbody class="files"&gt;&lt;/tbody&gt;&lt;/table&gt;
              &lt;/form&gt;
              &lt;br&gt;            
          &lt;/div&gt;
          &lt;!-- The blueimp Gallery widget --&gt;
          &lt;div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even"&gt;
              &lt;div class="slides"&gt;&lt;/div&gt;
              &lt;h3 class="title"&gt;&lt;/h3&gt;
              &lt;a class="prev"&gt;‹&lt;/a&gt;
              &lt;a class="next"&gt;›&lt;/a&gt;
              &lt;a class="close"&gt;×&lt;/a&gt;
              &lt;a class="play-pause"&gt;&lt;/a&gt;
              &lt;ol class="indicator"&gt;&lt;/ol&gt;
          &lt;/div&gt;
          &lt;!-- The template to display files available for upload --&gt;
          &lt;script id="template-upload" type="text/x-tmpl"&gt;
          {% for (var i=0, file; file=o.files[i]; i++) { %}
              &lt;tr class="template-upload fade"&gt;
                  &lt;td&gt;
                      &lt;span class="preview"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;p class="name"&gt;{%=file.name%}&lt;/p&gt;
                      {% if (file.error) { %}
                          &lt;div&gt;&lt;span class="label label-important"&gt;Error&lt;/span&gt; {%=file.error%}&lt;/div&gt;
                      {% } %}
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;p class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/p&gt;
                      {% if (!o.files.error) { %}
                          &lt;div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&gt;&lt;div class="bar" style="width:0%;"&gt;&lt;/div&gt;&lt;/div&gt;
                      {% } %}
                  &lt;/td&gt;
                  &lt;td&gt;
                      {% if (!o.files.error &amp;&amp; !i &amp;&amp; !o.options.autoUpload) { %}
                          &lt;button class="btn btn-primary start"&gt;
                              &lt;i class="icon-upload icon-white"&gt;&lt;/i&gt;
                              &lt;span&gt;Start&lt;/span&gt;
                          &lt;/button&gt;
                      {% } %}
                      {% if (!i) { %}
                          &lt;button class="btn btn-warning cancel"&gt;
                              &lt;i class="icon-ban-circle icon-white"&gt;&lt;/i&gt;
                              &lt;span&gt;Cancel&lt;/span&gt;
                          &lt;/button&gt;
                      {% } %}
                  &lt;/td&gt;
              &lt;/tr&gt;
          {% } %}
          &lt;/script&gt;
          &lt;!-- The template to display files available for download --&gt;
          &lt;script id="template-download" type="text/x-tmpl"&gt;
          {% for (var i=0, file; file=o.files[i]; i++) { %}
              &lt;tr class="template-download fade"&gt;
                  &lt;td&gt;
                      &lt;span class="preview"&gt;
                          {% if (file.thumbnailUrl) { %}
                              &lt;a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery&gt;&lt;img src="{%=file.thumbnailUrl%}"&gt;&lt;/a&gt;
                          {% } %}
                      &lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;p class="name"&gt;
                          &lt;a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}&gt;{%=file.name%}&lt;/a&gt;
                      &lt;/p&gt;
                      {% if (file.error) { %}
                          &lt;div&gt;&lt;span class="label label-important"&gt;Error&lt;/span&gt; {%=file.error%}&lt;/div&gt;
                      {% } %}
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;span class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}&gt;
                          &lt;i class="icon-trash icon-white"&gt;&lt;/i&gt;
                          &lt;span&gt;Delete&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;input type="checkbox" name="delete" value="1" class="toggle"&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          {% } %}
          &lt;/script&gt;
  
          &lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.iframe-transport.js"&gt;&lt;/script&gt;
          &lt;!-- The basic File Upload plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.ui.widget.js"&gt;&lt;/script&gt;
          &lt;!-- The basic File Upload plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload.js"&gt;&lt;/script&gt;
          &lt;!-- The File Upload processing plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-process.js"&gt;&lt;/script&gt;
          &lt;!-- The File Upload image preview &amp; resize plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-image.js"&gt;&lt;/script&gt;
          &lt;!-- The File Upload audio preview plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-audio.js"&gt;&lt;/script&gt;
          &lt;!-- The File Upload video preview plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-video.js"&gt;&lt;/script&gt;
          &lt;!-- The File Upload validation plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-validate.js"&gt;&lt;/script&gt;
          &lt;!-- The File Upload user interface plugin --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/jquery.fileupload-ui.js"&gt;&lt;/script&gt;
          &lt;!-- The main application script --&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/main.js"&gt;&lt;/script&gt;
          &lt;!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 --&gt;
          &lt;!--[if (gte IE 8)&amp;(lt IE 10)]&gt;
          &lt;script src="../common/jQuery-File-Upload_8.7.1/js/cors/jquery.xdr-transport.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  </code></pre>