Unsupported source URL

[sagomezza]

Hi,

I'm developing an React Native app with Expo, I'm trying to upload an image by diverse methods suggested in this issue:
https://github.com/cloudinary/cloudinary_js/issues/93
None of them gave me feedback about the problem (I was getting response 400), but actually the fetch method did. I'm getting Unsupported source URL when I'm passing the FileDirectory path of the image.

I don't know if maybe this has to do with this:
https://github.com/cloudinary/cloudinary_js/issues/130

Code:

uploadToCloudinary(id) {
const uri = FileSystem.documentDirectory + 'photos/Photo_' + id + '.jpg';
const url = "https://api.cloudinary.com/v1_1/aaaaaaaaa/image/upload/";
const formData = new FormData();
formData.append("file", uri);
formData.append("tags", vehicle);
formData.append("upload_preset", "aaaaaa");
formData.append("api_key", "1234567890");
fetch(url, {
method: 'POST',
body: formData
})
.then(response => {
console.log(response)
var reader = response.body.getReader();
var decoder = new TextDecoder();
var decodedValue;
function update() {
return reader.read().then(function(result) {
if (result.done) {
console.log(JSON.parse(decodedValue))
return (JSON.parse(decodedValue));
}
decodedValue = decoder.decode(result.value || new Uint8Array, {
stream: true
});
console.log(decodedValue)
return update();
});
}
return update();
});
}

Update: Now I tried a live example in pure JS. So it seems the file object us more complex than I thought. So, do I have to wait for a RN support or there is any workaround to this?.
Also I forgot to mention that I can't use an ImagePicker, because the image is a photo taken by the user.

[d-mendoza]

Hi @sagomezza
The uri needs to include the actual file contents and not just the path. We have an example of how to do that (https://jsfiddle.net/gq7e205a/), however, it is not in react native. Let us know if that helps.

[paddy57]

@sagomezza did you find any solution to this ?

[num-js]

i also getting the same error...
did you fix it?

[shirlymanor]

Can you try the following code sample and let us know if that works?
https://codesandbox.io/embed/jq4wl1xjv

[arghac14]

const data = new FormData()
data.append("file",image)
data.append("upload_preset","blogfeed")
data.append("cloud_name","<cloud_name>")
console.log(data)
fetch("https://api.cloudinary.com/v1_1/<cloud_name>/image/upload",{
method:"post",
body:data
})
.then(res=>res.json())
.then(data=>{
console.log(data)
})
.catch(err=>{
console.log(err)
})

Can anyone solve the issue , I'm getting-

AddPost.js:16 POST https://api.cloudinary.com/v1_1/arghac14/image/upload 400 (Bad Request)
AddPost.js:22
{error: {…}}
error: {message: "Unsupported source URL: [object FileList]"}
proto: Object

@shirlymanor @sagomezza @mdnmnahmed @paddy57

[shirlymanor]

@arghac14 I've shared with you the code sample (to your email). please let us know if that works.

[arghac14]

@shirlymanor I have used your code snippet but still getting the same error, please look-

Full code:

import React, {useState} from 'react'

function AddPost() {
    const [title, setTitle] = useState("")
    const [tag, setTag] = useState("")
    const [body, setBody] = useState("")
    const [image, setImage] = useState("")
function AddPost() {
    const [title, setTitle] = useState("")
    const [tag, setTag] = useState("")
    const [body, setBody] = useState("")
    const [image, setImage] = useState("")

const addPost = async ()=>{
    //console.log(image)
    var formdata = new FormData();

    formdata.append("file", image);
    formdata.append("cloud_name", "arghac14");
    formdata.append("upload_preset", "blogfeed");

    let res = await fetch(
    "https://api.cloudinary.com/v1_1/arghac14/auto/upload",
    {
        method: "post",
        mode: "cors",
        body: formdata
    }
    )
    .then(res=>res.json())
    .then(data=>{
        console.log(data)
    })
    .catch(err=>{
        console.log(err)
    })
}


return (
    <div>
         <div className="card post-card" >
                <h2 style={{color: "rgb(34, 167, 240)"}}>Create a post</h2>
                <input required type="text" onChange={(e)=>setTitle(e.target.value)} placeholder="Title" maxlength = "30"/>
                <input required type="text" onChange={(e)=>setTag(e.target.value)} placeholder="Tagline" maxlength = "50"/><br></br>
                <input type="file" onChange={(e)=>setImage(e.target.files)} placeholder="Add cover image: "></input><br></br>
                <textarea contenteditable="true" onChange={(e)=>setBody(e.target.value)} placeholder="Share your story here.." style={{height: "500px", fontSize:"20px"}} required maxlength = "5000" rows="100" cols="100"></textarea>
                <br/><br/><button onClick={()=>addPost()} style={{backgroundColor: "rgb(34, 167, 240)"}} className="btn waves-effect waves-light">Submit</button>
                <br/><br/>
        </div>
    </div>
)
}

export default AddPost

[shirlymanor]

Can you please share the file that you are trying to upload?
Might be easier if you can open a ticket at support@cloudinary.com

[arghac14]

@shirlymanor the issue is solved now. My bad, I didn't use e.target.files[0] before. Thanks for your help!

[shirlymanor]

@arghac14 thanks for the update!

[FeezyHendrix]

Any solution for react native?

[leptians]

Hi @FeezyHendrix, since this is a long old thread, to make sure I got the right context of what you are looking for, can you share more details of what you are trying to achieve? I recommend to open a support ticket from our portal with the details.