AngularJS로 파일 업로드 및 다른 양식의 성공 콜백에서 bluimp

Question

필자는 AngularJS 프로젝트에 악명 높은 bluimp jQuery 파일 업 로더를 통합하기 위해 following 자습서를 따랐습니다.

몇 가지 연구를 한 후 옵션 배열에서 jquery.fileuploader.js 파일과 함께, autoUpload라는 옵션이 있는데, true로 설정하면 자동으로 파일을 업로드합니다. 나는 그것 (false, undefined)을 사용하지 않으려 고 시도했지만, 빨리 폼이 제출되지 않아서 업로드가 전혀 작동하지 않는다는 것을 알았다.

업로드를 수동으로 실행하거나 다른 콜백 내에서 또는 클릭 이벤트를 통해 트리거해야합니다. 할 수 있습니까?.

코드 :

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 사용할 수 jQuery를 파일 업로드의 AngularJS와의 버전이 있습니다.

fileUpload 지시문과 수동으로 호출 할 수있는 submit() 메서드가있는 FileUploadController이 포함되어 있습니다.

http://blueimp.github.io/jQuery-File-Upload/angularjs.html에서 작동중인 버전을 볼 수 있습니다.

주의해야 할 사항 : 예제의 모든 .js 파일을 올바른 순서로로드하여 문제가 발생하지 않도록하십시오 (예제 페이지의 소스 참조).

희망 하시겠습니까? 귀하의 코멘트 AFTER

---

UPDATE : jQuery를 파일 업로드의 AngularJS와 버전을 사용하는 경우

이

, 당신은이 같은 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 샘플 코드 :

모든 업로드 완료 한 후 콜백 함수를 실행해야하는 경우, 당신은 Blueimp에서 방송 된 fileuploadstop 이벤트를 수신 할 수 있습니다

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

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

희망이 도움이!