Uploading photos to Firebase storage using React Native

Could you please assist me in identifying my mistake here? I saw it being done in a video.

The error message I am encountering is:

TypeError: undefined is not an object (evaluating 'media.cancelled')

const [isUploading, setIsUploading] = useState(false);
  const [isPaused, setIsPaused] = useState(false);
  const [downloadUrl, setDownloadUrl] = useState();
  const [uploadTask, setUploadTask] = useState();
  const [uploadTaskSnapshot, setUploadTaskSnapshot] = useState({});


    
const onTakePhoto = () => {
        launchCamera({ mediaType: 'photo', saveToPhotos:true }, onMediaSelect())
      };

  const onSelectImagePress = () => {
    launchImageLibrary({ mediaType: 'photo', saveToPhotos:true }, onMediaSelect())
  };

  const onMediaSelect = async media => {
    if (!media.didCancel) {
      setIsUploading(true);
      const ref = storage().ref(media.assets[0].fileName);

      const task = ref.putFile(media.assets[0].uri);

      setUploadTask(task);
      task.on('state_changed', taskSnapshot => {
        setUploadTaskSnapshot(taskSnapshot);
      });

      task.then(async () => {
        const downloadURL = await ref.getDownloadURL();
        setDownloadUrl(downloadURL);
        alert(downloadUrl)
        setIsUploading(false);
        setUploadTaskSnapshot({});
      })
    }
  };

Answer №1

It appears that the onMediaSelect function requires a media parameter, which is not being supplied in the onTakePhoto and onSelectImagePress callbacks.

Are you aware of the specific parameters needed for the launchCamera function?

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

Dealing with numerous https requests within a node.js application

I've been searching around on SO for assistance with this issue, but I seem to be going in circles without making any progress. My current project involves making multiple ReST POST requests using node.js https. I need to keep track of the responses ...

Determine in JavaScript whether a character is 32-bit or not

Is there a way to determine if a specific character is 32 bits using JavaScript? I attempted to use charCodeAt() but it was unsuccessful for identifying 32-bit characters. Any guidance or assistance on this matter would be greatly valued. ...

Adding color to characters, digits in an HTML file

Is it possible to individually style each letter, number, and symbol in an HTML document with a unique color? I am interested in creating a text editor that applies specific colors to each glyph for those who have grapheme-color synesthesia. While there ar ...

The integration of redux-thunk is causing a conflict with the functionality of remote-redux-devtools

After integrating redux-thunk into my React Native project, I noticed that my Redux remote devtools are not displaying the state properly. The state appears as undefined in the remote devtools window. Previously (when devtools were working): const store = ...

Could someone assist me in figuring out the reason behind my fetch method sending undefined values?

Looking for some assistance with my fetch implementation issue. I am currently working on integrating stripe into my online grocery store website utilizing a node.js server with express, and ejs for frontend integration. The client-side JavaScript uses a f ...

I attempted to log the elements of my submit button form, but unfortunately nothing is appearing in the browser console

I am attempting to capture the data from my submit button form, but for some reason, nothing is showing up in the console of my browser. $("#signupform").submit(function(event){ // Stopped default PHP processing event.preve ...

Despite mutating the state, the Redux reducer does not trigger a rerender on my React Component

Lately, I've been facing challenges with redux as it sometimes doesn't trigger the rerendering of my React components. I understand that I need to update the state in order for Redux to detect changes. However, even after doing so, my React Compo ...

Angular utilizes ZoneAwarePromise rather than a plain String output

I expected the giver code to return a string, but it is returning ZoneAwarePromise. Within the service: getCoveredPeriod() { let loanDetails = this.getLoanDetails().toPromise(); loanDetails.then((res: any) => { const coveredPeriodStart ...

Is it possible to export a constant from within a default function to a different file?

As a newcomer to React and React Native, I am looking to pass a const variable from within a function to another file. I attempted defining it outside of the function and allowing it to be modified inside the function, but encountered an invalid Hook Call ...

Obtaining a unique diamond pattern overlay on my Google Map

Currently, I am integrating Vue.js with vue-google-maps, and I have noticed a diamond-shaped watermark appearing on the map. After reaching out to Google support, they mentioned that this issue is specific to my tool, indicating it might be related to eith ...

Challenges arise when attempting to pass array data from Ajax to Google Maps

I'm facing an issue with my Google map. I have a data array that is dynamically returned, and I want to use it to add markers to the map. However, the markers don't work when I pass the data variable to the add_markers() function. It only works i ...

Retrieve file server domain using JavaScript or jQuery

I'm trying to extract the domain name without the "http(s)://www." from a file link. For example, if the script returns "example.com", I want it to parse through links like "http://www.example.com/file.exe" or "https://example.com/folder/file.txt#some ...

What is the best way to transfer data from my browser to the backend of my application?

I am currently working on developing a basic weather application using Express and Node.js. To accomplish this, I need to automatically retrieve the latitude and longitude of the user. While I understand how to achieve this through HTML5 Geolocation in t ...

Leveraging Json data in Angular components through parsing

I am currently developing an angular application where I need to retrieve and process data from JSON in two different steps. To start, I have a JSON structure that is alphabetically sorted as follows: { "1": "Andy", "2": &qu ...

Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons. The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. ...

What causes the failure of making an ajax call tied to a class upon loading when dealing with multiple elements?

I can see the attachment in the console, but for some reason, the ajax call never gets triggered. This snippet of HTML code is what I'm using to implement the ajax call: <tr> <td>Sitename1</td> <td class="ajax-delsit ...

What is the best way to display an image along with a description using Firebase and next.js?

I am currently utilizing Firebase 9 and Next.js 13 to develop a CRUD application. I am facing an issue where the images associated with a post are not correctly linked to the post ID. Furthermore, I need guidance on how to display these images in other com ...

Can you rely on a specific order when gathering reactions in a discord.js bot?

Imagine a scenario where a bot is collecting reactions to represent event registrations. To prevent any potential race conditions, I have secured the underlying data structure with a mutex. However, the issue of priority still remains unresolved as user # ...

The Bootstrap toast fails to appear on the screen

I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...

Disable the outer div scrolling in VueJS, but re-enable it once the inner div has reached the bottom of

I am currently working on a webpage that contains multiple divs stacked vertically. Here is the concept I am working with: Once the scrollbar reaches the bottom of the first div, the outer scrollbar will be disabled and the inner scrollbar will be enabled ...