Unable to send a photo from React Native to Cloudinary

Question

I'm trying to upload images to Cloudinary from my React Native app, but I'm getting the "400 Bad Request" saying the image I'm sending is ""x-cld-error": "Unsupported source URL".

ImageUpload.js


    const pickImage = async () => {
        let result = await ImagePicker.launchImageLibraryAsync({
            mediaTypes: ImagePicker.MediaTypeOptions.All,
            allowsEditing: true,
            aspect: [4, 3],
            quality: 1
        })

        if (!result.cancelled) {
            setImageSource(result.uri);
        }
    }

I'm currently using the ImagePicker from expo-image-picker. I'm taking the imageSource I've obtained from above and appending it to data before sending it to Cloudinary. The result.uri shows the URL of the picture from the iOS simulator.

CreatePost.js

    const uploadFile = async () => {
        const data = new FormData();
        data.append('file', imageSource);
        data.append('upload_preset', 'test_folder')

        const res = await fetch('https://api.cloudinary.com/v1_1/{my_cloudinary}/image/upload', {
          method: 'POST',
          body: data,
          headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data',
          },
        })

        const file = await res.json()
        setImage(file.secure_url)
        setLargeImage(file.eager[0].secure_url)
    }

When I console.log res, it shows that the status is 400.

Could you please log and include the value of imageSource in the same function you're performing the Upload request to Cloudinary? I ask that because when this error is returned it includes the start of the source that was used, but in your question, that's not included. For example, Unsupported source URL: data:;base64, or Unsupported source URL: Object(.... — Aleksandar

Shirly Manor Shirly Manor · Accepted Answer · 2019-11-21T17:04:09

You can try using ajax. For example here:

<h1>Upload to Cloudinary with FormData</h1>
<div>
<p>

Set your cloud name in the API URL in the code:  "https://api.cloudinary.com/v1_1/<strong>&lt;cloud&nbsp;name&gt;</strong>/image/upload" before running the example.
</p>
</div>
<form action="" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;">
  <fieldset>
    <legend>Upload example</legend>
    <p>
      <label for="upload_preset">Unsigned upload Preset: <input type="text" name="upload_preset">(set it <a href="https://cloudinary.com/console/settings/upload#upload_presets">here</a>)</label>
    </p>
    <p>
      <label >Select your photo:
      <input type="file" name="file"></label>
    </p>
    
    <p>
      <input type="submit" value="Submit" />
    </p>
    <img id="uploaded">
    <div id="results"></div>
  </fieldset>
</form>

enter code here https://jsfiddle.net/shirlymanor/s1hou7zr/

Unable to send a photo from React Native to Cloudinary

1 Answers