How to create File or Blob from ImageUri using ImagePicker?

ionic-v1
1

Hi, I am using a Cordova Plugin ImagePicker to open up the gallery menu for the user to select an Image to upload to a back-end. I am successfully able to select images and get the URI but is having problems converting it into a Blob or File that is required by most back-ends today. Can anyone help me get in the right direction? Thanks.

1 Like
2

you can use the polyfill fetch to get it…

  return fetch("IMAGE_URI).then(function (_data) {
    return _data.blob()
  }).then(function (_blob) {
   // got a blob
  })

or you can use this approach…

3

Thanks for your reply, I was able to create my own blob file an hour after asking this question. Regardless, thanks for your suggestion!

4

How’d you do it, If you don’t mind me asking.

5

@Ionize, @trevaun23

how did you solved it?

I’ve spent some hours trying to do it, and I feel I’m running in circles with blob, File, plugins, etc.

Your answer would be very helpful

Thanks

6

Hey, Sorry for the late reply. Do you need it using Image picker? Because I used Camera

7

This thread should help.

8

a dumb question, does this allow multiple images upload at once in an array [] ?

9

@trevaun23

I was using Image Picker, so I changed to Camera plugin, and instead of a file URI I have a base64, which I convert to blob and upload to firebase storage.

@FrancoisIonic

I think you can do that using a for/map.

10

@michael_amaral Though I’m trying from a local base64 images array, then putString method, I made progress thanks to your suggestion with a simple “for” loop. I’ll keep you posted of my progress because this can interest a bunch of people.

for(let photo of this.photos) {
  // use storageRef then putString 
}
11

@michael_amaral Alright, finally succeeded with an old-school Javascript loop :slight_smile:

for (var i=0; i<this.images.length; i++) {

        let storageRef = firebase.storage().ref(this.images[i].image_urlStructure);
        storageRef.putString(this.images[i].image_dataUrlString,'data_url',{contentType: 'image/jpg'})
...
}
1 Like
13

can you provide me to full code example it means lot