Przesyłanie pliku z AngularJS i bluimp na oddzwonienie o powodzeniu innego formularza

Question

Podążałem za samouczkiem following w celu zintegrowania notorycznego programu do przesyłania plików jQuery bluimp w moim projekcie AngularJS.

Po kilku badaniach odkryłem, że w tablicy opcji, w pliku jquery.fileuploader.js, znajduje się opcja o nazwie autoUpload, która po ustawieniu na true powoduje automatyczne przesłanie pliku. Próbowałem go wyłączyć (false, undefined), ale szybko dowiedziałem się, że to powoduje, że przesyłanie nie działa w ogóle, nawet na formularzu przesłanym.

Muszę wyzwolić ładowanie ręcznie, powiedzieć w ramach innego wywołania zwrotnego lub zdarzenia kliknięcia. można to zrobić ?.

Kod:

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

}); 

widok:

<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> 

skrypty kolejność załadunku:

... 
    <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 ma wersję angularjs jQuery Załaduj plik dostępny.

Zawiera dyrektywę fileUpload i FileUploadController z metodą submit(), którą można wywołać ręcznie.

Możesz zobaczyć działającą wersję pod numerem http://blueimp.github.io/jQuery-File-Upload/angularjs.html.

Jedną z rzeczy, na które powinieneś zwrócić uwagę: upewnij się, że załadowałeś wszystkie pliki .js z przykładu we właściwej kolejności, aby uniknąć problemów (por. Źródło przykładowej strony).

Nadzieję, że pomaga!

---

aktualizacja po swój komentarz:

Podczas korzystania z wersji angularjs jQuery Upload pliku, należy utworzyć tag formularza z atrybutem file-upload jak ten:

<!-- 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> 

Następnie w kontrolerze ty można przypisać opcje przesyłania plików jQuery w ten sposób:

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

Możesz przypisać procedurę obsługi submit() do dowolnego atrybutu ng-click, o ile znajduje się on wewnątrz formularza (iw ten sposób uzyskać dostęp do metody).

Daj mi znać, jeśli potrzebujesz pomocy ...

---

EXTRA Przykładowy kod na sukces callback:

Jeśli trzeba uruchomić funkcję zwrotną po wszystkie przesłane zostały zakończone, można słuchać przypadku fileuploadstop który jest nadawany przez Blueimp:

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

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

nadzieję, że pomoże!