Firebase9 cloud storage encountered an issue: [Unhandled promise rejection: ReferenceError: Property 'storage' doesn't exist]

I'm encountering the following issue:

[Unhandled promise rejection: Invariant Violation: Failed to construct File: Must pass both parts and name arguments.]

I am attempting to upload an image to Firebase cloud storage by selecting it on my phone. The URI I am trying to pass looks like this: 

file:///Users/miamiamia/Library/Developer/CoreSimulator/Devices/CEC7A0BD-01C0-4929-8CF7-74A7FE34293D/data/Containers/Data/Application/C49F3C42-E858-4612-8088-E578FCABA4D6/Library/Caches/ExponentExperienceData/%2540miamiamia%252Fagain/ImagePicker/164BF9DA-8A20-4C97-A892-CB5A1BB4643D.jpg

What could be the mistake in my approach? I am working with reactnative.

const handleButtonPress = async() => {
    const result =  await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
    });
    setImageUri(result.assets[0].uri)
    console.log(imageUri)
    const { uri } = result.assets[0].uri;
    // const storageRef = storage.ref();
    // const imageRef = storageRef.child('images/image.jpg');
    const storageRef = ref(storage, "path/to/image.jpg")
    const file = new File([""], uri);
    const uploadTask = putFile(storageRef, file)
    uploadTask.then((snapshot) => {
      console.log("Uploaded a blob or file!");
      const downloadURL = getDownloadURL(storageRef);
    });
}
javascriptfirebasereact-nativegoogle-cloud-firestorereact-native-firebase

Answer №1

If you want to achieve this, one method is to retrieve the base64 string using ImagePicker. In the options parameter, along with specifying the mediaTypes, you can set base64: true to receive the result in base64 format. Subsequently, you can utilize Firebase's upload from string function to upload the file.

const result = await ImagePicker.launchImageLibraryAsync({
   mediaTypes: ImagePicker.MediaTypeOptions.Images,
   base64: true, //<-- boolean base64
});

You can access the base64 data from result.assests[0]:

{
  "uri": "file:///Users/miamiamia/Library/Developer/CoreSimulator/Devices/.....jpg",
  "base64": "data:image/jpeg;base64..."
}

This snippet from the Firebase documentation should do the job:

const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
// This should be changed to message4 = result.assests[0].base64
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible for PHP to dynamically load a file based on a condition set in JavaScript?

I am attempting to dynamically insert a PHP include onto the page once the user scrolls to a specific part of the page. Is this feasible? For example: var hasReachedPoint = false; $(window).scroll(function() { var $this = $(this); if ($this.scrollTo ...

javascriptphpjqueryinclude

Leveraging two AJAX requests within a single function

I am working on creating an ajax function to post data that I've retrieved using another ajax function. While I have figured out how to use a callback function, I am struggling with passing the data from one function to the other. Here is what I have ...

javascriptjqueryajaxcallback

Generating hills with PlaneGeometry in Three.js

Currently, I am searching for a straightforward technique to generate non-uniform hills in Three.js. By utilizing particles and positioning them with a sine wave algorithm like the following snippet: x = Math.random() * 1000 y = Math.sin( x / freq ) * ...

javascriptthree.js

Incorporate the function's output into an <img> tag within an

I am trying to utilize the output of a JavaScript function to populate the 'src' attribute of IMG tags. I plan to implement this in multiple locations on the same page, otherwise I could have used an ID in the IMG tag and update src with getEleme ...

javascripthtmlfunction

Autocomplete failing to provide a valid response, returning a null value instead

Utilizing an Autocomplete feature for employee search, users can input a name and select from the list of results. However, the current onChange function logs the index value instead of the selected employee's name. Is there a way to pass the employee ...

javascriptreactjsmaterial-uiauto

Tips for concealing a particular button that shares the same class designation

Is there a way to create a function in vanilla JavaScript that can hide a specific button? <button class"btn">button 1 </button> <button class"btn">button 2 </button> <button class"btn">button 3 </button> Specifically, ...

javascriptfunction

Remove Vue Component from the styling of current application

We integrated a Vue component (using Vuetify) into our existing .NET MVC application. The issue we are facing is that the Vue component is inheriting all the CSS styles from the rest of the application. Here's a simplified version of the HTML structur ...

javascripthtmlcssvue.jsless

What is the correct way to declare and use the useState hook in React?

I am currently working with TypeScript interfaces and the useState hook, attempting to properly type them. However, I encountered an error when comparing a prop variable with a useState variable. The error message states that This comparison appears to be ...

javascriptreactjstypescriptreact-hooksinterface

JavaScript's prime sleep function

I am in need of a sleep function for my JavaScript code. I could use a promise-based function, but it requires the await keyword to function correctly. The issue is that I need to use the sleep function at the top level of my code. function sleep(milliseco ...

javascriptsleep

My function is named, however, the output is recorded prior to the function completing its execution

I've implemented a function named createUser, designed to save user data in the database. If successful, it should return true; otherwise, false. The code for this function is as follows: exports.createUser = (user) => { const salt = crypto.rando ...

javascriptexpressmongoose

Form submission in Firefox experiences a delay due to the 'Storage' function

Below is a simple submit button that submits a form: <!DOCTYPE html> <html> <head> </head> <body> <form action="action" method="POST> <button type="submit">Submit</button> </form> ...

javascriptperformancefirefoxform-submit

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can the parent document interact with Shadow DOM elements?

When it comes to user-created shadow DOM elements, this question focuses more on accessibility using the date input type: For instance, let's say there is a date input on a webpage. After some editing, the shadow DOM markup for this element (in Chrom ...

javascripthtmlweb-componentshadow-dom

Using jQuery to smoothly scroll horizontally to a specific div element

In my project, I aspire to create a layout similar to the BBC website: with a side scroll from section to section. Here is my code and the issue I am encountering: jsFiddle: http://jsfiddle.net/neal_fletcher/kzQFQ/2/ HTML: <div class="wrapper"> ...

javascriptjquerycsshtml

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...

javascripthtmlvue.jsgridvuetify.js

Troubleshooting JavaScript issues within pop-up windows using Chrome Debugger

Is there a more efficient method for debugging a popup window in Chrome? I want to debug the code when the window is opened and I'm looking for a process similar to using Visual Studio where I can set a breakpoint on JS and have the debugger stop at t ...

javascriptgoogle-chromepopupgoogle-chrome-devtools

Retrieve the ID of the clicked list item

Below is a list that I have: <ol class="sortable ui-sortable"> <li id="list_1608"><div>One</div></li> <li id="list_1609"><div>Two</div></li> <li id="list_1610"><div>Three</di ...

javascriptjqueryhtmlnested-sortable

Eliminate unnecessary components during the JSON to CSV conversion process

I have a JSON data set that looks like this: {"id":1,"name":"Sam","birthday":"12December","age":"15"}, {"id":2,"name":"Ash","birthday":"12January","age":"23"} After passing the data through the function: ConvertToCSV(data) I can extract id, name, birth ...

javascriptjsonangularcsvtypescript

In a set of strings, locate the two shortest ones, remove them, and then add them back to the end repeatedly until there is only one string

I've been struggling with a coding challenge for a couple of hours now and could really use some help. Here are the detailed instructions: Take an array of strings and create a single string by following these steps: Repeat the following steps as lo ...

javascriptarraysstring

Top method for displaying and concealing GUI elements upon a click event

I would like a dat.GUI() instance to appear when a mesh is clicked, and disappear when it is clicked again. Furthermore, if it is clicked once more, I want it to reappear. Despite trying various approaches, I have been unable to achieve the desired behavio ...

javascriptthree.jsdat.gui