ウェブでファイルをアップロードする

Cloud Storage を使用すると、デベロッパーは Firebase によって提供、管理される Google Cloud Storage バケットにファイルを迅速かつ容易にアップロードできます。

デフォルトの Google App Engine アプリと Firebase がこのバケットを共有するため、公開アクセスを設定すると新たにアップロードされた App Engine のファイルも公開される場合があります。認証を設定する際に、Storage バケットへのアクセスを再度制限するようにしてください。

ファイルをアップロードする

ファイルを Cloud Storage にアップロードするには、まずファイル名を含むファイルの完全パスへの参照を作成します。

// Create a root reference
var storageRef = firebase.storage().ref();

// Create a reference to 'mountains.jpg'
var mountainsRef = storageRef.child('mountains.jpg');

// Create a reference to 'images/mountains.jpg'
var mountainImagesRef = storageRef.child('images/mountains.jpg');

// While the file names are the same, the references point to different files
mountainsRef.name === mountainImagesRef.name            // true
mountainsRef.fullPath === mountainImagesRef.fullPath    // false

Blob または File からアップロードする

適切な参照を作成したら、put() メソッドを呼び出すことができます。 put() は、JavaScript の FileBlob API 経由でファイルを取得し、Cloud Storage にアップロードします。

var file = ... // use the Blob or File API
ref.put(file).then(function(snapshot) {
  console.log('Uploaded a blob or file!');
});

バイト配列からアップロードする

put()FileBlob 型に加えて、Uint8Array も Cloud Storage にアップロードできます。

// Uint8Array
var bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);
ref.put(bytes).then(function(snapshot) {
  console.log('Uploaded an array!');
});

文字列からアップロードする

BlobFile または Uint8Array を使用できない場合には、putString() メソッドを使用して、raw、base64base64urldata_url でエンコードされた文字列を Cloud Storage にアップロードできます。

// Raw string is the default if no format is provided
var message = 'This is my message.';
ref.putString(message).then(function(snapshot) {
  console.log('Uploaded a raw string!');
});

// Base64 formatted string
var message = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64').then(function(snapshot) {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then(function(snapshot) {
  console.log('Uploaded a base64url string!');
});

// Data URL string
var message = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'data_url').then(function(snapshot) {
  console.log('Uploaded a data_url string!');
});

put()putString() はどちらも、UploadTask を返します。これを promise として使用したり、アップロード ステータスの管理と監視に使用したりできます。

参照はファイルへの完全パスを定義するため、必ず空でないパスにアップロードしてください。

ファイル メタデータを追加する

ファイルをアップロードするときに、ファイルのメタデータを指定することもできます。このメタデータには、namesizecontentType(一般的に MIME タイプと呼ばれます)などの標準的なファイル メタデータのプロパティが含まれます。ファイルがディスクに格納されている場合、Cloud Storage はファイル拡張子からコンテンツ タイプを自動的に推測します。ただし、メタデータに contentType を指定すると、自動検出されたタイプがオーバーライドされます。contentType メタデータの指定がなく、ファイルに拡張子がない場合、Cloud Storage はデフォルトで application/octet-stream タイプを設定します。ファイル メタデータについて詳しくは、ファイル メタデータの使用のセクションをご覧ください。

// Create file metadata including the content type
var metadata = {
  contentType: 'image/jpeg',
};

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);

アップロードを管理する

アップロードを開始するだけでなく、pause()resume()cancel() メソッドを使ってアップロードを一時停止、再開、キャンセルすることもできます。pause() を呼び出すと状態が pause に変わり、resume() を呼び出すと状態が running に変わります。cancel() メソッドを呼び出すとアップロードが失敗し、アップロードがキャンセルされたことを示すエラーが返されます。

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file);

// Pause the upload
uploadTask.pause();

// Resume the upload
uploadTask.resume();

// Cancel the upload
uploadTask.cancel();

アップロードの進捗状況を監視する

アップロード中は、アップロード タスクによって state_changed オブザーバーで次のような進捗イベントが発生します。

イベントタイプ 一般的な使用方法
running タスクの開始時やアップロードの再開時に発生し、多くの場合 pause イベントと併せて使用されます。
progress データが Cloud Storage にアップロードされると発生し、アップロードの進捗インジケータを埋め込むために使用できます。
pause アップロードが一時停止されると発生し、多くの場合 running イベントと併せて使用されます。

イベントが発生すると、TaskSnapshot オブジェクトが戻されます。このスナップショットは、イベントが発生したときのタスクの不変のビューです。このオブジェクトには次のプロパティが含まれています。

プロパティ 説明
bytesTransferred Number このスナップショットが作成された時点で転送済みのバイト数の合計です。
totalBytes Number アップロードされる予定のバイト数の合計です。
state firebase.storage.TaskState アップロードの現在の状態です。
metadata firebaseStorage.Metadata アップロードが完了する前に、サーバーに送信されたメタデータです。アップロードが完了した後で、サーバーから戻されたメタデータです。
task firebaseStorage.UploadTask スナップショットのタスクです。タスクを「一時停止」、「再開」、または「キャンセル」するために使用できます。
ref firebaseStorage.Reference このタスクの参照元です。

これらの状態の変更と TaskSnapshot のプロパティを組み合わせて、シンプルかつ効果的にアップロード イベントを監視することができます。

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', function(snapshot){
  // Observe state change events such as progress, pause, and resume
  // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
  var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
  console.log('Upload is ' + progress + '% done');
  switch (snapshot.state) {
    case firebase.storage.TaskState.PAUSED: // or 'paused'
      console.log('Upload is paused');
      break;
    case firebase.storage.TaskState.RUNNING: // or 'running'
      console.log('Upload is running');
      break;
  }
}, function(error) {
  // Handle unsuccessful uploads
}, function() {
  // Handle successful uploads on complete
  // For instance, get the download URL: https://firebasestorage.googleapis.com/...
  var downloadURL = uploadTask.snapshot.downloadURL;
});

エラー処理

アップロード時にエラーが発生する理由として、ローカル ファイルが存在しない、目的のファイルをアップロードする権限がユーザーにないなど、たくさんの理由が考えられます。エラーについて詳しくは、このドキュメントのエラーの処理のセクションをご覧ください。

アップロード、進捗状況の監視、エラー処理の完全な例を以下に示します。

// File or Blob named mountains.jpg
var file = ...

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  function(snapshot) {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, function(error) {

  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/unauthorized':
      // User doesn't have permission to access the object
      break;

    case 'storage/canceled':
      // User canceled the upload
      break;

    ...

    case 'storage/unknown':
      // Unknown error occurred, inspect error.serverResponse
      break;
  }
}, function() {
  // Upload completed successfully, now we can get the download URL
  var downloadURL = uploadTask.snapshot.downloadURL;
});

これでファイルのアップロードが完了しました。次は、Cloud Storage からファイルをダウンロードする方法を学習しましょう。

フィードバックを送信...

ご不明な点がありましたら、Google のサポートページをご覧ください。