A closer look at the two functions in question:
const handleSubmit = async (e) => {
e.preventDefault();
console.log(songLink)
const newSong = {
songName,
songLink,
userId
};
const song = await dispatch(postSong(newSong))
.catch(async (res) => {
const data = await res.json()
if (data && data.errors) setErrors(data.errors)
})
reset();
};
const uploadSong = (files) => {
console.log(files[0])
const formData = new FormData()
formData.append('file', songSelected)
formData.append('upload_preset', 'd3gthd7l')
Axios.post("https://api.cloudinary.com/v1_1/dyhfkvy6u/video/upload", formData).then((response) => {
console.log(response.data.url, 'responseeee')
setSongLink(response.data.url)
})
}
The primary challenge lies in completing the upload process within the uploadSong function to retrieve response.data.url and store it for later use in handling the submit process while creating a new song. I'm uncertain whether this issue stems from a small oversight or a lack of understanding regarding a crucial concept. Is there a need to return the URL and then await the function?
Displayed below is the complete file:
import { useState } from "react";
import { useDispatch } from "react-redux";
import { postSong } from "../../store/song";
import { useSelector } from "react-redux";
import Axios from 'axios'
const SongForm = () => {
const dispatch = ...
// Remaining content will be similar but slightly modified to ensure uniqueness.