AngularJs, DropZone.Js, MVC4 - Drag, Drop and Preview pre-Uploaded Image(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();
}

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.

Answer 1

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