title: Implementing Jquery's file upload
body: <p>Something is wrong with my <a href="https://blueimp.github.io/jQuery-File-Upload/" rel="nofollow">Jquery's file upload</a> implementation.
  It doesn't work as the way as supposed to be. When I click the <code>image upload</code>, file is not uploaded to the page.
  My implementation is based on AngularJS sample.
  I made <code>fileupload.php</code> and included into <code>test page</code> and <code>advertise page</code>.
  Test page is working as expected.
  But advertisement page is not.
  I included <code>fileupload.php</code> into advertisement's html as</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="background"&gt;
  &lt;form name="landedForm"  id="landedForm" method="post" &gt;
  &lt;?php include 'fileupload.php'; ?&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Please check <code>Advertise page and test page</code> <a href="http://myanmarpropertiesforum.com/" rel="nofollow">here</a></p>
  
  <p><code>fileupload.php</code> is</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;!-- Bootstrap styles --&gt;
  &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  &lt;!-- Generic page styles --&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;!-- blueimp Gallery styles --&gt;
  &lt;link rel="stylesheet" href="//blueimp.github.io/Gallery/css/blueimp-gallery.min.css"&gt;
  &lt;!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --&gt;
  &lt;link rel="stylesheet" href="jquery.fileupload.css"&gt;
  &lt;link rel="stylesheet" href="jquery.fileupload-ui.css"&gt;
  &lt;!-- CSS adjustments for browsers with JavaScript disabled --&gt;
  &lt;noscript&gt;&lt;link rel="stylesheet" href="jquery.fileupload-noscript.css"&gt;&lt;/noscript&gt;
  &lt;noscript&gt;&lt;link rel="stylesheet" href="jquery.fileupload-ui-noscript.css"&gt;&lt;/noscript&gt;
  &lt;style&gt;
  /* Hide Angular JS elements before initializing */
  .ng-cloak {
      display: none;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}"&gt;
          &lt;!-- Redirect browsers with JavaScript disabled to the origin page --&gt;
          &lt;noscript&gt;&lt;input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"&gt;&lt;/noscript&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="col-lg-7"&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" ng-class="{disabled: disabled}"&gt;
                      &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt;
                      &lt;span&gt;Add files...&lt;/span&gt;
                      &lt;input type="file" name="files[]" multiple ng-disabled="disabled"&gt;
                  &lt;/span&gt;
                  &lt;button type="button" class="btn btn-primary start" data-ng-click="submit()"&gt;
                      &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                      &lt;span&gt;Start upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button type="button" class="btn btn-warning cancel" data-ng-click="cancel()"&gt;
                      &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                      &lt;span&gt;Cancel upload&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;!-- The global file processing state --&gt;
                  &lt;span class="fileupload-process"&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;!-- The global progress state --&gt;
              &lt;div class="col-lg-5 fade" data-ng-class="{in: active()}"&gt;
                  &lt;!-- The global progress bar --&gt;
                  &lt;div class="progress progress-striped active" data-file-upload-progress="progress()"&gt;&lt;div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;!-- The extended global progress state --&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 class="table table-striped files ng-cloak"&gt;
              &lt;tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}"&gt;
                  &lt;td data-ng-switch data-on="!!file.thumbnailUrl"&gt;
                      &lt;div class="preview" data-ng-switch-when="true"&gt;
                          &lt;a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery&gt;&lt;img data-ng-src="{{file.thumbnailUrl}}" alt=""&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="preview" data-ng-switch-default data-file-upload-preview="file"&gt;&lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;p class="name" data-ng-switch data-on="!!file.url"&gt;
                          &lt;span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl"&gt;
                              &lt;a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery&gt;{{file.name}}&lt;/a&gt;
                              &lt;a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}"&gt;{{file.name}}&lt;/a&gt;
                          &lt;/span&gt;
                          &lt;span data-ng-switch-default&gt;{{file.name}}&lt;/span&gt;
                      &lt;/p&gt;
                      &lt;strong data-ng-show="file.error" class="error text-danger"&gt;{{file.error}}&lt;/strong&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;p class="size"&gt;{{file.size | formatFileSize}}&lt;/p&gt;
                      &lt;div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"&gt;&lt;div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      &lt;button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'"&gt;
                          &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                          &lt;span&gt;Start&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel"&gt;
                          &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                          &lt;span&gt;Cancel&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy"&gt;
                          &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                          &lt;span&gt;Delete&lt;/span&gt;
                      &lt;/button&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
      &lt;br&gt;
  
  &lt;/div&gt;
  &lt;!-- The blueimp Gallery widget --&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"&gt;&lt;/script&gt;
  &lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
  &lt;script src="jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;!-- The Load Image plugin is included for the preview images and image resizing functionality --&gt;
  &lt;script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Canvas to Blob plugin is included for image resizing functionality --&gt;
  &lt;script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"&gt;&lt;/script&gt;
  &lt;!-- Bootstrap JS is not required, but included for the responsive demo navigation --&gt;
  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;!-- blueimp Gallery script --&gt;
  &lt;script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
  &lt;script src="jquery.iframe-transport.js"&gt;&lt;/script&gt;
  &lt;!-- The basic File Upload plugin --&gt;
  &lt;script src="jquery.fileupload.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload processing plugin --&gt;
  &lt;script src="jquery.fileupload-process.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload image preview &amp; resize plugin --&gt;
  &lt;script src="jquery.fileupload-image.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload audio preview plugin --&gt;
  &lt;script src="jquery.fileupload-audio.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload video preview plugin --&gt;
  &lt;script src="jquery.fileupload-video.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload validation plugin --&gt;
  &lt;script src="jquery.fileupload-validate.js"&gt;&lt;/script&gt;
  &lt;!-- The File Upload Angular JS module --&gt;
  &lt;script src="jquery.fileupload-angular.js"&gt;&lt;/script&gt;
  &lt;!-- The main application script --&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>