Leon's Blogging

Coding blogging for hackers.

Angular File Upload

| Comments

網站上有時候會用到上傳檔案功能。
透過 angular,可以使用angular-file-upload 很方便的就建立出來

這個 module 也有提供很多 API 可以使用 Module-API

controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
app
.controller('VideoShowCtrl',
  [        '$scope', '$http', 'FileUploader', '$stateParams',
  function( $scope ,  $http ,  FileUploader ,  $stateParams){
  
  //透過 $stateParams (ui-router) 可以得到 router 上的 id
  var postID = $stateParams.id
  var uploader = new FileUploader({
        url: '/posts/show' + postID',
        formData: [],
        headers: {
            'X-CSRF-TOKEN' : document.querySelector("meta[name=csrf-token]").content
        }
    });
 
 //內建提供上傳檔案前可以做哪些事
    uploader.onBeforeUploadItem = function(item){
     //若是傳的是 array,接到的會變成 string,可能是放在 formData 的原因@@
        item.formData.push({ title: 'hello' })
    };
  
  //內建提供上傳檔案後做哪些事
    uploader.onAfterAddingFile = function(item){
        if(item.uploader.queue.length > 1){ item.uploader.queue.shift() }
    };

    $scope.uploader = uploader

}]);

view

1
<input type="file" nv-file-select="" uploader="uploader" />

參考文件:
URL Routing

gem:
angularjs-file-upload-rails
angular-file-upload

Comments