Tag Archives: filepicker

如何使用FilePicker在網站上做傳圖服務

Posted by mrtonychen on

部落格的圖要放在哪，一直是個頭大的問題。因為有些部落格所提供的空間並不大，可能放了幾張圖後空間就爆了，那不就要付錢買空間，但這一定不是大家想要的。
那要怎麼做呢？圖檔一定要在網路放圖檔的地方，目前有幾種免費的雲端可以放：
1.放在dropbox並將連結貼到HTML。但安全性堪慮。
2.放在Google Driver，並將連結貼到HTML。但安全性堪慮。
3.有一個中繼的網站，我們可以將dropbox/google_driver的圖形upload到該網站，然後會產生一個連結，但從link看不出來這張圖的原始檔案是放在哪𥚃。這不就是我們想要的嗎？

所以我們就來實際使用Filepicker的服務，看看到底有沒有這麼好用。

註冊並取得API key

到Ink filepicker的官網 去註冊一個免費帳號。不用花錢不但表功能不好喔！它提供每個月5000張的上傳圖檔用量。如果不是大型網站，這個用量應該很足夠了吧！

註冊完成後，到自已的帳戶頁面去取得API Key，才可以繼續以下的程序。

上傳圖片並取得轉換後的網址

參考線上文件的Filepicker Getting Start，先來實作一下上傳一張圖片並從filepicker.io取得一個新的圖片網址。

載入filepicker.io的js

  • 在HTML中先引入filepicker的js函式庫
 <script src="chrome://api.filepicker.io/v1/filepicker.js" type="text/javascript"></script>
  • 使用pick()來上傳圖片並取得圖片網址
filepicker.setKey('Super_Awesome_Key'); //將Super_Awesome_Key置換成實際的API Key

filepicker.pick(function(InkBlob){
console.log(InkBlob.url);
});

  • 實際操作

    我在jsbin.com的網頁已經將上述的程式都作好了，可以試一下。

    DMEO

    選擇pick file後，畫面會跑出一個由filepicker提供的UI window，可以將任何圖片拖曳進去或是去選擇在dropbox, Google driver或是電腦中的任何單一圖檔。選擇一個圖檔並完成上傳後，網頁會顯示轉換後的網址。將這個網址貼在browser上就可以看到圖片被顯示出來了！

    也就是說，透過filepicker.pick()在完成圖片的上傳後，會呼叫一個callback function並傳回InkBlob這個物件。InkBlob.url就是該圖片的網址（也可以說是pointer?）。

更多的應用

應用1﹣上傳一個檔案並限定上傳圖片的來源及格式

如果要使用filepicker.pick()限定使用者上傳圖片的來源及格式。
官方所提供的API格式為：

filepicker.pick([options], onSuccess(InkBlob){}, onError(FPError){})

可以參考官方網站詳細的文件 ﹣ pick

第一個參數是一個物件。物件中的個別元素分別為：

  • mimetypes: [‘image/*’, ‘text/plain’] //表示只接受image及文件型態。
  • container: ‘window’ //上傳圖檔時開一個視窗。
  • services:[‘COMPUTER’, ‘FACEBOOK’, ‘GMAIL’] //限定只接受從本機電腦，Facebook及Gmail上傳檔案。

第二個參數是圖片上傳成功時會呼叫的callback function，圖片成功上傳後，會執行這個函數。

第三個參數是圖片上傳失敗時會呼叫的callback function。

範例：限定檔案來源為本地端，Facebook,Gmail。成功上傳檔案時，將InkBlob物件以JSON字串格式印在console，若上傳失敗則將錯誤訊息印在console。

filepicker.pick({
    mimetypes: ['image/*', 'text/plain'],
    container: 'window',
    services:['COMPUTER', 'FACEBOOK', 'GMAIL'],
},
function(InkBlob){
    console.log(JSON.stringify(InkBlob));
},
function(FPError){
    console.log(FPError.toString());
}
);

成功上傳圖檔會得到以下的log

{"url":"https://www.filepicker.io/api/file/pBPleeX2RLidWDH2D7pq","filename":"螢幕快照 2013-08-15 下午12.01.30.png","mimetype":"image/png","size":76961,"key":"2OGXLIPQTMGjmmiyOwpc_螢幕快照 2013-08-15 下午12.01.30.png","isWriteable":true}

如果在上傳檔案的window沒有傳任何檔案就直接關閉，會得到錯誤訊息

FPError 101. Include filepicker_debug.js for more info

應用2﹣上傳多個檔案並限定上傳圖片的來源及格式

與上傳一個檔案的差異僅在呼叫不同的API。
使用filepicker.pickMultiple()可以上傳多個檔案。使用的參數與filepicker.pick()都相同。
詳細使用方式可以參考官方文件﹣filepicker.pickMultiple

應用3﹣將上傳的圖片存入Amazon S3雲端

待續…

By tony chen