AngularJs、DropZone.Js、MVC4 - ドラッグ、ドロップとプレビューは、事前にアップロードされた画像（複数可）

Question

HTML：

<script src="~/Scripts/jquery-1.9.1.js"></script> 
<script src="~/Scripts/DropZone-2.0.1.js"></script> 
<script src="~/Scripts/angular.js"></script> 
<script src="~/App_Angular/app.js"></script> 

<div ng-app ="myApp" ng-controller ="ProductsCtrl"> 
<input ng-model="product.Name"/> 
<input ng-model="product.PhotoName" id="result" /> 
<form id="dropzone" class="fade well">Drop files here</form> 
<input type="button" value="Upload Files" ng-click="save(product)" /> 

Javascriptを：私はパスをsuccesslyすることができました

$("#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 < dz.files.length; i++) { 
     dz.filesQueue.push(dz.files[i]); 
    } 
    dz.processQueue(dz); 
    $('#innerQue').empty(); 
} 

ng-clickでsaveメソッドが呼び出されると、写真名は$ scope.product.PhotoNameになります。

I さんは画像をアップロードできませんでした。私は角度から 'uploadClicked'を呼び出す方法を知らない。

ご協力いただければ幸いです。

Answer 1

解決済み（Mark Rajcokの助けを借りて）。

完全なソリューション：

HTML：

<script src="~/Scripts/jquery-1.9.1.js"></script> 
<script src="~/Scripts/DropZone-2.0.1.js"></script> 
<script src="~/Scripts/angular.js"></script> 
<script src="~/App_Angular/app.js"></script> 

<div ng-app ="myApp" ng-controller ="ProductsCtrl"> 
    <input ng-model="product.Name"/> 
    <input ng-model="product.PhotoName" id="result" /> 
    <form id="dropzone" class="fade well">Drop files here</form> 
    <input type="button" value="Upload Files" ng-click="save(product)" /> 
</div> 

Javascriptを：

$("#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 < dz.files.length; i++) { 
     dz.filesQueue.push(dz.files[i]); 
    } 
    dz.processQueue(dz); 
    $('#innerQue').empty(); 
} 

変更は、ここにdropzone.js：

   addedfile: function (file) { 
       file.previewTemplate = createElement(this.options.previewTemplate); 
       this.previewsContainer.appendChild(file.previewTemplate); 
rem out --> //file.previewTemplate.querySelector(".filename span").textContent = file.name; 
add this --> return ($('input[id=result]').val(file.name)); 

AngularController：MVCの開発者に

function ProductsCtrl($scope, $routeParams, $http, $location) { 
$scope.products = []; 
$scope.product = {}; 
$scope.save = function (data) { 
    $scope.product = angular.copy(data); 
    $http.post('/api/Products', $scope.product) 
     .success(function() { 
      window.uploadClicked(); <---------------------- Solution 
     }) 
     .error(function (data) { 
      // alert(data); 
     }); 
}; 

を追加しましたBONUS：

public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files) 
    { 
     //Works in Everything and IE10+** 

     if (!string.IsNullOrEmpty(Request.Headers["X-File-Name"])) 
     { 
      string path = Server.MapPath(string.Format("~/Uploads/{0}", Request.Headers["X-File-Name"])); 
      Stream inputStream = Request.InputStream; 

      FileStream fileStream = new FileStream(path, FileMode.OpenOrCreate); 

      inputStream.CopyTo(fileStream); 
      fileStream.Close(); 
     } 
    }