Bunny
Bunny

Reputation: 646

How can I upload mp4 video from React to Express to cloud storage?

I found a website to store videos in cloud storage.

Here's the URL of it: Abyss

They have a very short document and it is written in "cURL" form, it's like this.

curl -F "[email protected]" up.hydrax.net/MY_API_KEY

So I tried using it with React + ExpressJS.

In my ReactJS, I have a button to submit my video like this:

const handleSubmit = async () => {
    let formData = new FormData()
    formData.append("file", selectVideo)
    await axios.post(
        `/film/add-episode/${_id}`,
        {
            formData,
        },
        {
            headers: {
                "content-type": "multipart/form-data",
            },
        }
    )
}

I send that video/mp4 file to my Express POST route that uploads the video.

Here's my POST ExpressJS upload video route controller:

const filmController = {
    addEpisode: async (req, res) => {
        const { formData } = req.body
        try {
            console.log(formData) // What I get when passing mp4 from React to Express is an object FormData

            //API URL to upload video
            const response = await axios.post(
                "http://up.hydrax.net/MY_API_KEY_HERE",
                {
                    formData,
                },
                {
                    headers: {
                        "content-type": "multipart/form-data",
                    },
                }
            )
            console.log(response)
            res.json({ msg: "Success add episode" })
        } catch (err) {
            return res.status(500).json({ msg: err.message })
        }
    },
}

The reason I tried using axios at the back-end, too, was to get the slug that Abyss generated every time I success uploaded my video from Express to Abyss, I'm planning to save it to my MongoDB with more information, and I get rid of most of the other code like getting id, name, description, etc. for a cleaner look.

Here's how Abyss generates the slug, I need to get it with the post response at Express

Abyss slug

But my problem right now is it is just pending my request forever, with no sight of returning the last message or anything, and even in the cloud storage, there was no file uploaded.

Does object FormData can't be read as an mp4 file? Because it seems to be stuck at the POST request I made at Express.

Upvotes: 2

Views: 552

Answers (0)

Related Questions