AngularJS, DropZone.Js, MVC4 - Drag, Drop und Vorschau vor dem hochgeladenes Bild (s)

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:

$("#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(); 
} 

ich in der Lage gewesen, den Ball successly der Foto-Name zu $ ​​scope.product.PhotoName, wenn die Speichermethode in ng-click aufgerufen wird.

I HABEN NICHT konnte das Bild hochladen. Ich weiß nicht, wie man "uploadClicked" von angular aufrufen kann.

Jede Hilfe wäre willkommen.

Answer 1

Gelöst (mit etwas Hilfe von Mark Rajcok).

Voll Lösung:

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(); 
} 

Ändern dropzone.js hier:

   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:

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); 
     }); 
}; 

zusätzliche Bonus für MVC-Entwickler:

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(); 
     } 
    }