Using ionic2 to upload image to firebase storage

Question

I am using ionic2 beta 11 and firebase 3. I would like to try to upload some image to firebase storage. I have setup a home.ts but I encounter following error :

Error TS2345: Argument of type 'string' is not assignable to parameter of type 'Blob'.

// follow the instruction of https://firebase.google.com/docs/storage/web/upload-files

import * as firebase from 'firebase';

public storageRef : any;

constructor () {}

uploadfile(){

var file = "http://imgs.sundaykiss.com/wp-content/uploads/2016/08/278k_kissfocus09.jpg";

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

var storageRef = firebase.storage().ref('images/' + file); 

var uploadTask = storageRef.put(file, metadata);

// the editor wanted me the file above, argument of type 'string' is not assignable to parameter of type 'Blob'.

May I know why ? Many thanks.

score 0 · Answer 1 · answered Aug 20 '16 at 10:03

0

put() takes files via the JavaScript File and Blob APIs Not a string like you are giving it. If you don't have the file in byte stream form you'll have to read it from the url into a blob/file.

answered Aug 20 '16 at 10:03

misha130

5,457
2
29
51

Many thanks ! I have tried to read those docs, but I can't make the URL image into blob/file, may you please kindly give an example? Many thanks again ! – Galaxy Lam Aug 20 '16 at 15:21
A link to an example http://stackoverflow.com/questions/25046301/convert-url-to-file-or-blob-for-filereader-readasdataurl – misha130 Aug 20 '16 at 16:39

score 0 · Answer 2 · answered Aug 20 '16 at 20:20

since you are using a remote url you should be able to use the fetch polyfill to get the blob from the image.

npm module whatwg-fetch

  makeFileIntoBlob(_imagePath) {
    return fetch(_imagePath).then((_response) => {
      return _response.blob();
    }).then((_blob) => {
      return _blob;
    });
  }

full example is here https://github.com/aaronksaunders/firebaseStorage2

There is also a youtube video showing the whole process Ionic2 Firebase Image Upload

Using ionic2 to upload image to firebase storage

2 Answers2