title: AngularJs, DropZone.Js, MVC4 - Drag, Drop and Preview pre-Uploaded Image(s)
body: <p><strong>Html:</strong></p>
  
  <pre><code>&lt;script src="~/Scripts/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/DropZone-2.0.1.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/angular.js"&gt;&lt;/script&gt;
  &lt;script src="~/App_Angular/app.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app ="myApp" ng-controller ="ProductsCtrl"&gt;
  &lt;input ng-model="product.Name"/&gt;
  &lt;input ng-model="product.PhotoName" id="result" /&gt;
  &lt;form id="dropzone"  class="fade well"&gt;Drop files here&lt;/form&gt;
  &lt;input type="button" value="Upload Files" ng-click="save(product)" /&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#dropzone").dropzone({
      url: 'Home/UploadFiles',
      paramName: "files", // The name that will be used to transfer the file
      maxFilesize: 102, // MB
      enqueueForUpload: false,
      accept: function (file, done) {
          angular.element(document.getElementById('result')).scope()
              .$apply(function (scope) {
                  scope.product.PhotoName = $('#result').val();
              });
  
          return done();
      }
  });
  
  function uploadClicked() {
      var dz = Dropzone.forElement("#dropzone");
      for (var i = 0; i &lt; dz.files.length; i++) {
          dz.filesQueue.push(dz.files[i]);
      }
      dz.processQueue(dz);
      $('#innerQue').empty();
  }
  </code></pre>
  
  <p>I have been able to successly pass the photo name to $scope.product.PhotoName when the save method is called in ng-click.</p>
  
  <p>I <strong>HAVE NOT</strong> been able to upload the image. I do not know how to call 'uploadClicked' from angular.</p>
  
  <p>Any assistance would be appreciated.</p>