Post video to cloudinary from mobile as well as web - React-Native-EXPO

Question

I am trying to post images and videos to cloudinary from mobile and web and get the url in return which I can use thereafter. However, the functionality for image is working fine but for video, cloudinary returns undefined on mobile and it shows bad request error on web.

If anyone has solution to this problem, please let me know. I want solution in expo.

I am using the expo version 49.

const pickVideo = async () => {
        try {
            let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Videos,
                allowsEditing: true,
                quality: 1,
            });

            if (!result.canceled) {
                let imageUri = result.assets[0].uri.split(',')[1];
                // let extension = await getImageType(imageUri)
                // console.log(result)
                let data = {
                    uri: imageUri,
                    name: 'video',
                    type: 'video/mp4'
                }

                const uri = await postToCloundinaryVideo(imageUri)
                console.log('hello')
                console.log(uri)
            }
        } catch (err) {
            console.log(err)
        }
    }

const postToCloundinaryVideo = (file: string | Blob) => {
    return new Promise((resolve, reject)=>{

      let videoUri 
      console.log(file)

      const data = new FormData()
      data.append("file",file)
      data.append("upload_preset","my_value")
      data.append("cloud_name","my_cloud_name")

      fetch("https://api.cloudinary.com/v1_1/my_cloud_name/video/upload",{
         method:"post",
         body:data
      })
      .then(res=>res.json())
      .then(data=>{
        videoUri = data.url
         console.log(videoUri)
         return resolve(videoUri)
      })
      .catch(err=>{
         return reject(err)
      })    
    // return 'hello'
    })
 }

This is my function to pick video from device and upload to cloudinary.

Answer 1

I think the issue is that you try to upload images instead of videos in some parts of your code. Try this:

const pickVideo = async () => {
  try {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Videos,
      allowsEditing: true,
      quality: 1,
    });

    if (!result.canceled) {
      const videoUri = await postToCloudinaryVideo(result);
      console.log(videoUri);
    }
  } catch (err) {
    console.log(err);
  }
}

const postToCloudinaryVideo = async (result) => {
  try {
    const data = new FormData();
    data.append("file", {
      uri: result.uri,
      type: 'video/mp4',
      name: 'video.mp4',
    });
    data.append("upload_preset", "your_upload_preset"); // replace with your actual upload preset
    data.append("cloud_name", "your_cloud_name"); // replace with your actual cloud name

    const response = await fetch("https://api.cloudinary.com/v1_1/your_cloud_name/video/upload", {
      method: "post",
      body: data,
    });

    const responseData = await response.json();

    return responseData.secure_url; // or responseData.url depending on your requirements
  } catch (error) {
    console.error("Error uploading video to Cloudinary:", error);
    throw error;
  }
}