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(); }
I have been able to successly pass the photo name to $scope.product.PhotoName when the save method is called in ng-click.
I HAVE NOT been able to upload the image. I do not know how to call 'uploadClicked' from angular.
Any assistance would be appreciated.
Solved (with some help from Mark Rajcok).
Full Solution:
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(); }
Modify dropzone.js here:
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); }); };
ADDED BONUS TO MVC DEVELOPERS:
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(); } }
