ng-file-upload trong AngularJs

Lightweight Angular directive để upload các file. Bạn có thể xem Demo để hiểu rõ hơn. Các phiên bản đã có: version 3.0.x, version 3.1.x, version 3.2.x, version 4.x.x, version 5.x.x, version 6.x.x, version 6.2.x, version 7.0.x, version 7.2.x, version 8.0.x, version 9.0.x, version 10.0.x, version 11.0.x, version 12.0.x, version 12.1.x, version 12.2.x

Nội dung sẽ trình bày bao gồm:

• Các tính năng
• Cài đặt (bằng tay, Bower, NuGet, NPM)
• Các sử dụng
• Trên các trình duyệt cũ

Tính năng

• Upload file, xóa file
• Kéo thả file (chỉ với html5)
• Paste ảnh từ clipboard và kéo thả từ các trình duyệt khác (chỉ html5)
• Thay đổi kích thước ảnh, center crop và người dùng có thể điều khiển crop thông qua ngImgCrop. Nhìn ví dụ ở crop sample (chỉ html5)
• Sửa orientation cho các file ảnh jpeg cùng với dữ liệu exif orientation
• Tải lên gián đoạn: Dừng lại/tiếp tục tải lên (chỉ trên html5)
• Hỗ trợ validate kiểu, kích thước, chiều dài, chiều cao và góc cạnh của ảnh, thời gian video, âm thanh. Sử dụng ng-required cùng với pluggable custom sync hoặc async validations.
• Trình diễn hình ảnh thu nhỏ hoặc là xem trước các lựa chọn hình ảnh/âm thanh/video.
• Hỗ trợ CORS và tải lên trực tiếp tập tin dữ liệu nhị phân sử dụng Upload.$$ttp()
• Có sẵn trên npm, bower, meteor, nuget.
• Phụ thuộc vào Flash FileAPI shim để tải lên nhưng không hỗ trợ trên trình duyệt html5

Cài đặt

• Cài đặt bằng tay: Tải về tại đây
• Cài đặt bằng brower
  • bower install ng-file-upload-shim --save(không hỗ trợ html5)
  • bower install ng-file-upload --save
• Cài đặt bằng nuget: PM> Install-Package angular-file-upload
• Cài đặt bằng npm: npm install ng-file-upload

<script src="angular(.min).js"></script>
<script src="ng-file-upload-shim(.min).js"></script> <!-- Không hỗ trợ trình duyệt html5 -->
<script src="ng-file-upload(.min).js"></script>

Cách sử dụng

• Tải lên cùng với form submit và validations: http://jsfiddle.net/danialfarid/maqbzv15/1118/
• Tải lên nhiều file(từng file một) bởi một lần lựa chọn: http://jsfiddle.net/danialfarid/2vq88rfs/136/
• Tải lên nhiều file(tất cả các file) bởi một lần lựa chọn(chỉ trên html5): http://jsfiddle.net/danialfarid/huhjo9jm/5/
• Tải lên một file duy nhất bởi một lần lựa chọn: http://jsfiddle.net/danialfarid/0mz6ff9o/135/
• Thả và tải lên cùng với $$atch: http://jsfiddle.net/danialfarid/s8kc7wg0/400/
• Crop ảnh và tải lên: http://jsfiddle.net/danialfarid/xxo3sk41/590/

<script src="angular.min.js"></script>
 
<script src="ng-file-upload-shim.min.js"></script>
<script src="ng-file-upload.min.js"></script>

Tải lên từ form submit hoặc button click
<form ng-app="fileUpload" ng-controller="MyCtrl" name="form">
  validation mỗi ảnh tải lên
  <div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
    ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
    ngf-resize="{awidth: 100, height: 100}">Select</div>
  Tải nhiều files
  <div class="button" ngf-select ng-model="files" ngf-multiple="true">Select</div>
  Drop files: <div ngf-drop ng-model="files" class="drop-box">Drop</div>
  <button type="submit" ng-click="submit()">submit</button>
</form>

Upload right away after file selection:
<div class="button" ngf-select="upload($file)">Upload on file select</div>
<div class="button" ngf-select="uploadFiles($files)" multiple="multiple">Upload on file select</div>
  Drop File:
<div ngf-drop="uploadFiles($files)" class="drop-box"
  ngf-drag-over-class="'dragover'" ngf-multiple="true"
  ngf-pattern="'image/*,application/pdf'">Kéo thả ảnh hoặc file PDF ở đây</div>
<div ngf-no-file-drop>Kéo thả file không được hỗ trợ trên trình duyệt</div>

Thu nhỏ ảnh: <img ngf-thumbnail="file || '/thumb.jpg'">
Xem trước Âm thanh: <audio controls ngf-src="file"></audio>
Xem trước Video: <video controls ngf-src="file"></video>

Javascript code:

//inject trong directives và services.
var app = angular.module('fileUpload', ['ngFileUpload']);

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // Tải file lên sau khi ấn nút submit
    $scope.submit = function() {
      if ($scope.form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
      }
    };

    // Tải file lên hoặc kéo thả
    $scope.upload = function (file) {
        Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
    // Đối việc upload nhiều file:
    $scope.uploadFiles = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // Hoặc là gửi tất cả cùng với trình duyệt HTML5:
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }
}]);