react / react/react-native

When using FileReader readAsDataURL it does not load blob file, no error

Open
#38,230 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Issue: Author Provided Repro Needs: Triage :mag: Newer Patch Available
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

When I run this code below the load event does not print the log and therefore the blob file is not being converted into a uri.

`if (messageModel.item.image) {
console.log(messageModel.item.id, "has image");
const imgBlob = messageModel.item.image;

  let reader = new FileReader();
  reader.addEventListener(
    "load",
    () => {
      console.log("loaded");
    },
    false
  );
  reader.readAsDataURL(imgBlob);
}`
React Native Version

0.71.0

Output of npx react-native info

info Fetching system and libraries information...
System:
OS: macOS 13.4.1
CPU: (10) arm64 Apple M1 Max
Memory: 325.55 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.15.0 - /usr/local/bin/node
Yarn: 3.4.1 - /usr/local/bin/yarn
npm: 9.5.0 - /usr/local/bin/npm
Watchman: 2023.06.12.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.12.0 - /Users/davidchoi/.rvm/rubies/ruby-2.7.6/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.1 AI-221.6008.13.2211.9619390
Xcode: 14.3.1/14E300c - /usr/bin/xcodebuild
Languages:
Java: 11.0.15 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.2.0 => 18.2.0
react-native: 0.71.6 => 0.71.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found
info React Native v0.72.1 is now available (your project is running on v0.71.6).
info Changelog: https://github.com/facebook/react-native/releases/tag/v0.72.1
info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.71.6
info For more info, check out "https://reactnative.dev/docs/upgrading".

Steps to reproduce

Simply running the code I showed in a expo 48 app will do it. But you can also look at my repo if you want.

Snack, code example, screenshot, or link to a repository

This is the repo, https://github.com/jsoneaday/learn-react-native-fast. Code is in section_3/chatter

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the section_3/chatter example from the linked repository, starting with the FileReader readAsDataURL call and its load listener. Compare the behavior in the reported React Native 0.71.6 and Expo 48 setup, then identify a focused reproduction or test that demonstrates the expected blob conversion and load event.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react-native
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.