Firebase StorageとPhoneGap - Img要素のファイルを送信する

Question

Firebaseには新しく、私は簡単な作業のように思っています.FireGap HTML/JSアプリケーションからFirebaseにファイルをアップロードしてください。イメージはページのImg要素にあり、ユーザーがアップロードボタンをタップすると、要素にあるファイルから必要なデータをキャプチャしようとしていますが、私は大したことはありません。

私はこのFirecastからの私の試行をベースにしています：https://www.youtube.com/watch?v=SpxHVrpfGgU私はファイルピッカーを使用していません。私が見つけたすべての例ではファイルピッカーを使用しているので、既にページにあるファイルをどう扱うかわかりません。それはstorageRef.putになったとき、私は）（このエラーが出る：

{t: "storage/invalid-argument", e: "Firebase Storage: Invalid argument in `put` at index 0: Expected Blob or File.", n: null, r: "FirebaseError"} 

だから私は、私はFirebaseが必要なものを渡していないんだけど、それは限り私が持っているようです。

これが私のHTMLです：

<img class='center' id="myImage" src="https://firebasestorage.googleapis.com/v0/b/********e.appspot.com/o/images%2F2014%20(39).JPG?alt=media&token=9c3d1613-c880-4437-abf9-f59bbcdc885bG"> 

<label class="center">Choose a category for the photo: 
     <select class="center" id="categories"></select> 
</label> 

<label class=""> 
     <button class="button button-block button-balanced padding" id="uploadpicture">Upload Photo</button> 
</label> 

そして、これは私のスクリプトです：

<script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script> 
    <script> 
     $(document).ready(function(){ 

    // Initialize Firebase 
      var config = { 
      apiKey: "AIzaSyCN***********POk", 
      authDomain: "***-storage.firebaseapp.com", 
      databaseURL: "https://****oto-storage.firebaseio.com", 
      projectId: "***w-photo-storage", 
      storageBucket: "*****hoto-storage.appspot.com", 
      messagingSenderId: "2*****4314287" 
      }; 
      firebase.initializeApp(config); 

      function uploadImage(){ 

      var img_file = document.getElementById("myImage"); 
      var d = new Date(); 
      var dateString = d.toISOString(); 

      img_file.name = dateString; 

      var storageRef = firebase.storage().ref('photowPhotos/' + img_file.name); 

      var task = storageRef.put(img_file); 

      task.on('state_changed', 
       function error(err){ 
        alert(err); 
       }, 

       function complete(){ 
        alert("Upload successful!") 
       } 
       ); 
      } 

      $('#uploadpicture').on('click', uploadImage); 
      }); 
</script> 

Answer 1

私は同様の問題があったが、ここにコードがあります。

navigator.camera.getPicture(onSuccess, onFail, { 
quality: quality, 
sourceType: Camera.PictureSourceType.PHOTOLIBRARY, 
destinationType: Camera.DestinationType.FILE_URI, 
targetWidth: imageSize, 
targetHeight: imageSize 
}); 

function onSuccess(imageData) { 

var storageRef = firebase.storage().ref(); 

var getFileBlob = function(url, cb) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url); 
    xhr.responseType = "blob"; 
    xhr.addEventListener('load', function() { 
     cb(xhr.response); 
    }); 
    xhr.send(); 
}; 

var blobToFile = function(blob, name) { 
    blob.lastModifiedDate = new Date(); 
    blob.name = name; 
    return blob; 
}; 

var getFileObject = function(filePathOrUrl, cb) { 
    getFileBlob(filePathOrUrl, function(blob) { 
     cb(blobToFile(blob, 'test.jpg')); 
    }); 
}; 

getFileObject(imageData, function(fileObject) { 
    var uploadTask = storageRef.child('images/test.jpg').put(fileObject); 

    uploadTask.on('state_changed', function(snapshot) { 
     console.log(snapshot); 
    }, function(error) { 
     console.log(error); 
    }, function() { 
     var downloadURL = uploadTask.snapshot.downloadURL; 
     console.log(downloadURL); 
     // handle image here 
    }); 
}); 

}