CODEWITHSUNDEEP
reactjsexpressaxioscloudinary
Angelzzz
Angelzzz

Reputation: 1446

MERN+ Cloudinary: Unsupported source URL

I'm trying to upload file to cloudinary. Here is part of my react component

...
addItem() {
    ...
    let file = this.fileInput.value;
    keywords !== "" && this.props.onAddItem(keywords, place, image);
    ...
  }
  render() {
    return (
      ....
      <Input
      type="file"
      innerRef={(input) => {this.fileInput = input}}
      name="image"
      id="image"
      placeholder=""/>
    )
  }

Here is action file:

export function onAddItem(keywords, place, file, id, isChangebale = false) {
  return (dispatch) => {
    axios.all([
      axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
        {upload_preset: "mypresetname", file: file}),
      axios.post('http://localhost:3001/api/items/', { keywords, place, id, isChangebale })
    ])
    .then(axios.spread((cloudinaryRes, localRes) => {
      console.log(cloudinaryRes, localRes);
    }))

I receive error xhr.js:178 POST https://api.cloudinary.com/v1_1/testovich/image/upload 400 (Bad Request) and in response headers "X-Cld-Error: Unsupported source URL: C:\fakepath\2017-12-07_19-06-445.png"

When I test using postman I have correct response.

enter image description here

So it looks like I do something wrong when pass file from rect component to action file. How to pass correct path/file to cloudinary?

Upvotes: 0

Views: 2779

Answers (3)

Otienosteve
Otienosteve

Reputation: 1

I was using formik and React and had the same Issue. I was trying to upload a single image After doing my research I realized there may be 2 possible causes of this error

  1. The value you are passing to the formData must be a single File Object.

    const upload= (file)=>{ const data = new FormData(); data. Append('file',file) data.append'cloud_name',<cloud_name>) data.append('upload_preset',<cloud_preset>) fetch('https://api.cloudinary.com/v1_1//image/upload', {method:'post',body: data, mode:'cors'}).then(res=> res.json()).then(data=>{ console.log(data) })

file here should be gotten from e.target.files[0] providing the correct index

<input type="file" name="file"  onChange={(e)=>{setFieldValue('image',e.target.files[0])}}/>

  1. If the error still persists destructure the file value you are receiving from the form.

        onSubmit:(file)=>{ 
    const {image}= file

    upload(image)
}

Upvotes: 0

Ikechi
Ikechi

Reputation: 33

Convert the image to a base64 like const base64Img = data:image/jpg;base64,${file.data}; The file.data represents the data property from response from image picker. Then I passed the base64Img to data like return RNFetchBlob.fetch('POST', apiUrl, headerProps, [ { name: 'file', fileName: file.fileName, type: file.type, data: base64Img } ]); Hope it helps.

Upvotes: 0

Angelzzz
Angelzzz

Reputation: 1446

There were two mistakes: 1. in react component there should be 

let file = this.fileInput.files[0];//I upload only one file

instead of

let file = this.fileInput.value;

  1. in action file

    export function onAddItem(keywords, place, image, id, isChangebale = false) { const formData = new FormData(); formData.append("file", image); formData.append("upload_preset", "mypresetname");

    return (dispatch) => { axios.all([ // AJAX upload request using Axios ) axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload', formData,

instead of:

export function onAddItem(keywords, place, file, id, isChangebale = false) {
  return (dispatch) => {
    axios.all([
      axios.post('https://api.cloudinary.com/v1_1/myservername/image/upload',
        {upload_preset: "mypresetname", file: file}),

Upvotes: 2

Related Questions