Cloudinary Upload Widget And Video Player Inquiry

zonefortyeight

I made a custom video player using Cloudinary & imported the upload widget into my react app. How would I go about having users upload/post with the mp4 file playing on my custom video player, inside the app? Like, when they upload the video then hits "done", it posts inside my react app.

aleksandar

Hi @zonefortyeight ,

If I understand correctly, you would like to use the Cloudinary Upload Widget to allow uploads of videos in your app. You then want to take the URL to the video once it has been uploaded into Cloudinary and supply this URL to your custom Video Player to play the video, is that correct?

If so, that is definitely possible. The Upload Widget response will return you the URL to the original video. You can then take this and play it in your app or better, apply Cloudinary Transformations to the video (such as to optimize it) before playing it in your player. Please also see the following section of the Documentation that details how you can access the response from the Upload Widget once a file has been uploaded:

https://cloudinary.com/documentation/upload_widget#quick_example

Could you please share what you have tried so far and what is currently not working and/or if you're encountering any errors when attempting to implement this?

zonefortyeight

I've tried an online script then altered it a few times. I had deleted what I actually put together. But yes, I'm trying to give the logged in user the capability to click on the "clip" icon, an uploader appears, they upload a mp4/video file to Cloudinary, as soon as they press upload, it posts in the timeline with my custom video player playing the video. Errors? Nope. I was attempting to separate the buttons for the "choose file" & the "Upload" to 2 separate widgets but connected. I'm still learning/messing around. I'm going to give it another shot in a minute.

import React, {useState} from 'react';

import Axios from "axios";

function VideoPoster() {

  const [uploadFile, setUploadFile] = useState("");

  const [cloudinaryVideo, setCloudinaryVideo] = useState("") 

onst handleUpload = (e) => {

    e.preventDefault();

    const formData = new FormData ();

    formData.append("file", uploadFile);

    formData.append("upload_preset", "your upload preset name");

    Axios.post(

     "https://api.cloudinary.com/v1_1/your Cloudinary cloud name/video/upload",

     formData

   )

    .then((response) => {

      console.log(response);

      setCloudinaryVideo(response.data.secure_url);

    })

    .catch((error) => {

      console.log(error);

    });

  };

  return (

    <div className="App">

         <section className="left-side">

          <form>

              <h3> Upload Images to Cloudinary Cloud Storage</h3>

              <div>

                <input type="file"

                onChange ={(event) => {setUploadFile(event.target.files[0]);}}

              />

              </div>

             <button onClick = {handleUpload}> Upload File</button>

            </form>

         </section>

         <section className="right-side">

          <h3>The resulting video will be displayed here</h3>

          {cloudinaryVideo && ( <img src={cloudinaryVideo} /> )}

        </section>

    </div>

  );

}

export default VideoPoster;

aleksandar

Thanks for sharing - that sounds good, let us know how it goes.

In general, the first step is to test/ensure the upload to Cloudinary works since you are relying on the returned URL to the video. If that is OK, then you should be able to pass the returned URL to your custom Video Player.