react / react/react-native

Host environment: Blob and File objects don't have the right string tag

Open
#31,824 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Needs: Triage :mag: Never gets stale
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

If I apply toString to a Blob or File object, the result is not [object Blob] or [object File] as one would expect, but [object Object].

This leads to issues for example using Axios, that uses this method to check if what gets passed to it as data is a particular type: https://github.com/axios/axios/blob/e9965bfafc82d8b42765705061b9ebe2d5532493/lib/utils.js#L148

As a workaround I put those two lines in index.js before everything else:

Blob.prototype[Symbol.toStringTag] = 'Blob'
File.prototype[Symbol.toStringTag] = 'File'

React Native version:

info Fetching system and libraries information...
System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 19.95 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - ~/.npm/packages/bin/yarn
    npm: 6.14.12 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK: Not Found
    Android SDK:
      API Levels: 28, 29, 30
      Build Tools: 28.0.3, 29.0.2, 30.0.3
      System Images: android-22 | Google APIs Intel x86 Atom, android-29 | Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.7042882
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_282 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.2 => 0.64.2 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

  1. Render this in a component: toString.apply(new Blob())
  2. It shows as [object Object]

Expected Results

The result should be [object Blob]

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

https://snack.expo.io/VdqTTyUBn

Works fine in Web, the error shows in Android.

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

Start with the Android reproduction in the linked Snack and compare Blob and File behavior with the workaround shown in index.js. Done means applying toString to a Blob produces [object Blob] and the corresponding File check produces [object File] on Android.

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
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.