expo: ImagePicker returns base64 on the web

🐛 Bug Report

Summary of Issue ImagePicker returns base64 on the web, even if you change the option -->

Environment - output of `expo diagnostics` & the platform(s) you’re targeting

  Expo CLI 3.25.1 environment info:
    System:
      OS: macOS 10.15.4
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.9.0 - /usr/local/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.8 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 4.0 AI-193.6911.18.40.6514223
      Xcode: 11.4/11E146 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~38.0.8 => 38.0.9 
      react: ~16.11.0 => 16.11.0 
      react-dom: ~16.11.0 => 16.11.0 
      react-native: https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz => 0.62.2 
      react-native-web: ~0.11.7 => 0.11.7 
    npmGlobalPackages:
      expo-cli: 3.25.1

Reproducible Demo

Just the sample code, but run it on the web

Steps to Reproduce

Expected Behavior vs Actual Behavior

Expected: blob, but get base64 output.

This does not change if we use base64: false flag.

Workaround:

fetch(uri)
    .then(res => res.blob())
    .then(blob => {
        const fd = new FormData();
        const file = new File([blob], "filename.jpeg");
        fd.append('image', file)
  
        // Let's upload the file
        // Don't set contentType manually → https://github.com/github/fetch/issues/505#issuecomment-293064470
        const API_URL = 'https://example.com/add_image'
        fetch(API_URL, {method: 'POST', body: fd)
             .then(res => res.json()) 
             .then(res => console.log(res))

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 16
Comments: 16 (4 by maintainers)

Most upvoted comments

@hyochan I made something similar

const res = await fetch(base64);
const blob = await res.blob();

ElForastero on May 23, 2021

Not strictly related to the issue, but here’s a fix so the base64 is correctly returned on web when base64: true is passed to launchCameraAsync() and launchImageLibraryAsync().

simonezuccala on Apr 14, 2021

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

github-actions[bot] on Feb 10, 2022

For those of you facing this problem, I’ve managed to solve this by converting blob to file. Here is the sample code in my gist. Hope this helps.

@ElForastero You don’t need extra changes in backend as long as you apply my solution in react-native.

However, this is just a workaround.

hyochan on May 23, 2021

I’m having the opposite problem where setting base64: true does not return an object with a base64 key as the documentation describes.

OKNoah on Apr 10, 2021

@DannyChambers Any luck resolving this? We have the same issue with Expo SDK 39 and Web.

We get a nice file:// uri on iOS but Web is giving us base64 data.

metasection on Feb 27, 2021