Загрузка файла с помощью AngularJS и bluimp при успешном обратном вызове другой формы

Question

Я выполнил учебное пособие following, чтобы интегрировать пресловутый загрузчик файлов bluimp jQuery в моем проекте AngularJS.

После некоторого исследования я обнаружил, что в массиве параметров, в файле jquery.fileuploader.js, есть опция autoUpload, которая при установке в true автоматически загружает файл. Я попытался отключить его (false, undefined), но быстро я узнал, что это приводит к тому, что загрузка не работает вообще, даже не на форме submit.

Мне нужно активировать загрузку вручную, скажем, в рамках другого обратного вызова или события щелчка. это можно сделать ?.

код:

app.directive("fileupload", function() { 
    return { 
     restrict: "A", 
     scope: { 
     done: "&", 
     progress: "&", 
     fail: "&", 
     uploadurl: "=", 
     customdata: "&" 
     }, 
     link: function(scope, elem, attrs) { 
     var uploadOptions; 
     uploadOptions = { 
      url: scope.uploadurl, 
      dataType: "json" 
     }; 
     if (scope.done) { 
      uploadOptions.done = function(e, data) { 
      return scope.$apply(function() { 
       return scope.done({ 
       e: e, 
       data: data 
       }); 
      }); 
      }; 
     } 
     if (scope.fail) { 
      uploadOptions.fail = function(e, data) { 
      return scope.$apply(function() { 
       return scope.fail({ 
       e: e, 
       data: data 
       }); 
      }); 
      }; 
     } 
     if (scope.progress) { 
      uploadOptions.progress = function(e, data) { 
      return scope.$apply(function() { 
       return scope.progress({ 
       e: e, 
       data: data 
       }); 
      }); 
      }; 
     } 
     return elem.fileupload(uploadOptions).bind("fileuploadsubmit", function(e, data) { 
      return data.formData = { 
       JSON.stringify(scope.customdata()) 
      }; 
     }); 
     } 
    }; 
    }); 
app.service('uploadService', function(authService) { 
    var initializeFn, processFn; 
    initializeFn = function(e, data, process) { 
     var upload; 
     return upload = { 
     message: '', 
     uploadurl: authService.getBaseUrl() + '/applications/', 
     status: false 
     }; 
    }; 
    processFn = function(e, data, process) { 
     var file, upload; 
     upload = {}; 
     upload.successData = []; 
     upload.status = true; 
     upload.error = false; 
     if (process === 'done') { 
     upload.message = data.result.result; 
     console.log(data); 
     file = data.result.resume; 
     upload.successData = { 
      // name: file.name, 
      // fullUrl: file.url, 
      // thumbUrl: file.thumbnail_url 
     }; 
     } else if (process === 'progress') { 
     upload.message = 'Uploading....!!!'; 
     } else { 
     upload.error = true; 
     upload.message = 'Please try again'; 
     console.log(e, data); 
     } 
     return upload; 
    }; 
    return { 
     process: processFn, 
     initialize: initializeFn 
    }; 

    }); 

app.controller('applyCtrl', function($scope, $routeParams, uploadService){ 
     $scope.model.formData = {}; 
     $scope.model.formData.job = $routeParams.jobId; 
     $scope.uploadLayer = function(e, data, process) { 
      return $scope.uploadReturn = uploadService.process(e, data, process); 
     }; 
     $scope.customData = function() { 
      return $scope.model.formData; 
     }; 
     return $scope.uploadReturn = uploadService.initialize(); 

}); 

вид:

<form class="applyForm" ng-submit="uploadLayer(e, data, 'progress')"> 
     <fieldset> 
      <div class="formLine"> 
       <div class="wideFieldContainer"> 
        <input id="testUpload" type="file" fileupload customdata="customData()" name="resume" uploadurl="uploadReturn.uploadurl" done="uploadLayer(e, data, 'done')" fail="uploadLayer(e, data, 'fail')" progress="uploadLayer(e, data, 'progress')" /> 
       </div> 
      </div> 
        </fieldset> 
      </form> 

скрипты загрузки заказа:

... 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="lib/angular/angular.js"></script> 
    <script src="lib/angular/angular-resource.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/services.js"></script> 
    <script src="js/controllers.js"></script> 
    <script src="js/filters.js"></script> 
    <script src="js/directives.js"></script> 
    <script src="lib/bluimp/js/vendor/jquery.ui.widget.js"></script> 
    <script src="lib/bluimp/js/jquery.piframe-transport.js"></script> 
    <script src="lib/bluimp/js/jquery.fileupload.js"></script> 
</body> 
</html> 

Answer 1

Blueimp имеет версию AngularJS из JQuery загруженного файла доступны.

В него включена директива fileUpload и FileUploadController с методом submit(), которую вы можете позвонить вручную.

Рабочую версию вы можете найти на странице http://blueimp.github.io/jQuery-File-Upload/angularjs.html.

На что вы должны обратить внимание: обязательно загрузите все .js-файлы из примера в правильном порядке, чтобы избежать проблем (см. Источник страницы примера).

Надеюсь, что это поможет!

---

UPDATE ПОСЛЕ ВАШЕЙ COMMENT:

При использовании версии AngularJS из JQuery File Upload, вы создаете форму тег с атрибутом file-upload, как это:

<!-- Create a file upload form with options passed in from your scope --> 
<form data-file-upload="options" data-ng-controller="YourController"> 

    <!-- This button will trigger a file selection dialog --> 
    <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}"> 
     <span>Add files...</span> 
     <input type="file" name="files[]" multiple="" ng-disabled="disabled"> 
    </span> 

    <!-- This button will start the upload --> 
    <button type="button" class="btn btn-primary start" data-ng-click="submit()"> 
     <span>Start upload</span> 
    </button> 

<form> 

Тогда в контроллере вы может назначить параметры для загрузки файла jQuery следующим образом:

angular.module('yourModule') 
    .controller('YourController', [$scope, function($scope){ 

     // Options you want to pass to jQuery File Upload e.g.: 
     $scope.options = { 
      maxFileSize: 5000000, 
      acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i 
     }; 
    }]); 

Вы можете назначить обработчик submit() любому атрибуту ng-click, если он находится внутри формы (и, следовательно, может получить доступ к методу).

Позвольте мне знать, если вам нужна дополнительная помощь ...

---

EXTRA КОД ОБРАЗЦА ДЛЯ УСПЕХА CALLBACK:

Если вам необходимо запустить функцию обратного вызова после были завершены все загрузки, вы можете слушать fileuploadstop событие, которое транслируется по Blueimp:

// Listen to fileuploadstop event 
$scope.$on('fileuploadstop', function(){ 

    // Your code here 
    console.log('All uploads have finished'); 
}); 

Надежда, что помогает!