Reputation: 646
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
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