{"id":21244063,"url":"https://github.com/aaronksaunders/rn-firebase-fileupload2","last_synced_at":"2026-04-11T06:41:22.623Z","repository":{"id":139353071,"uuid":"124676242","full_name":"aaronksaunders/rn-firebase-fileupload2","owner":"aaronksaunders","description":"React Native Firebase Blob File Upload - doing a firebase file upload with latest release of react-native... and it works","archived":false,"fork":false,"pushed_at":"2018-03-16T13:30:33.000Z","size":1452,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-21T20:11:25.445Z","etag":null,"topics":["blob-storage","file-upload","firebase","firebase-storage","image-upload","react-native","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-10T16:50:44.000Z","updated_at":"2018-11-30T22:29:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"aa3a93ca-8b02-47e8-addf-f9911301458e","html_url":"https://github.com/aaronksaunders/rn-firebase-fileupload2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Frn-firebase-fileupload2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Frn-firebase-fileupload2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Frn-firebase-fileupload2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Frn-firebase-fileupload2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/rn-firebase-fileupload2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243683046,"owners_count":20330545,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blob-storage","file-upload","firebase","firebase-storage","image-upload","react-native","reactjs"],"created_at":"2024-11-21T01:15:39.204Z","updated_at":"2025-12-31T00:22:33.218Z","avatar_url":"https://github.com/aaronksaunders.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Firebase Blob File Upload\nFinally doing a firebase file upload with latest release of react-native... and it works\n\nLatest release of react-native supports blobs which FINALLY we can do file uploads out of the box to firebase, no plugins, modules or cloud code required\n\n[Release Notes Feb 2018 - React Native](https://github.com/facebook/react-native/releases/tag/v0.54.0)\n\n## Three Steps\n\n### Get Image\nI used the `react-native-image-picker` plugin to get a local file'uri\n```javascript\n  getimage() {\n    return new Promise(resolve =\u003e {\n      ImagePicker.launchImageLibrary({}, response =\u003e {\n        return resolve(response);\n      });\n    });\n  }\n```\n[https://github.com/react-community/react-native-image-picker](https://github.com/react-community/react-native-image-picker)\n\n\n### Convert Image To Blob\nI used the `fetch` API to retrieve the image and convert it to a blob\n```javascript\n    const response = await fetch(image.uri);\n    const blob = await response.blob();\n```\n[Using Fetch In React Native](https://facebook.github.io/react-native/docs/network.html)\n\n\n### Basic Firebase File Upload\nOnce you have a blob, firebase will happily upload it to firebase storage\n```javascript\n    const ref = firebase\n      .storage()\n      .ref(\"aaron\")\n      .child(new Date().getTime() + \"\");\n\n    const task = ref.put(blob);\n\n    task.on(\n      firebase.storage.TaskEvent.STATE_CHANGED,\n      snapshot =\u003e\n        console.log(snapshot.bytesTransferred / snapshot.totalBytes * 100),\n      error =\u003e {\n        console.log(\"error\", error);\n        return error;\n      },\n      result =\u003e {\n        console.log(\"result\", task.snapshot.metadata);\n        return result;\n      }\n    );\n ```\n [File Upload in Firebase](https://firebase.google.com/docs/storage/web/upload-files)\n\n## Source Code\n\n```javascript\n  _uploadFile = async () =\u003e {\n    \n    try {\n      // simple function to get image uri from device\n      const response = await this.getimage();\n      \n      // use fetch API to convert the local image to a blob\n      // for uploading to firebase\n      const response2 = await fetch(response.uri);\n      const blob = await response2.blob();\n      \n      // now that we have the blob, it is uploading to \n      // firebase as described in the documentation\n      const ref = firebase\n        .storage()\n        .ref(\"aaron\")\n        .child(new Date().getTime() + \"\");\n\n      const task = ref.put(blob);\n\n      task.on(\n        firebase.storage.TaskEvent.STATE_CHANGED,\n        snapshot =\u003e\n          console.log(snapshot.bytesTransferred / snapshot.totalBytes * 100),\n        error =\u003e {\n          console.log(\"error\", error);\n          return error;\n        },\n        result =\u003e {\n          console.log(\"result\", task.snapshot.metadata);\n          return result;\n        }\n      );\n    } catch (e) {\n      console.log(e);\n    }\n  };\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Frn-firebase-fileupload2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Frn-firebase-fileupload2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Frn-firebase-fileupload2/lists"}