upload image from react to django api

Question

i'm using "react-images-upload" to upload images from react to django api but when i submit the form i does not get posted to the django api knowing that it used to work before adding the image uplopad and it works when post it in the api just not in react

export default class CreatePost extends Component {
  constructor(props) {
     super(props);
       this.state = {
         title: this.props.title,
         main_post: this.props.main_post,
         thumbnail: this.props.thumbnail,
         pictures: []
        };
        this.handlethumbnail = this.handlethumbnail.bind(this);
      }

 handlethumbnail(picture) {
    this.setState({
      pictures: this.state.pictures.concat(picture),   
     });
   }
  handleSubmitButton() {
      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          title: this.state.title,
          main_post: this.state.main_post,
          thumbnail: this.state.pictures[0],
        }),
      };
      fetch("/api/Create-Post", requestOptions)
      .then((response) => response.json())
      .then(this.props.history.push("/"));
  }

render() {
return (       
  <>
    <ImageUploader
        singleImage={true}
        buttonText='Choose images'
        onChange={this.handlethumbnail}
        imgExtension={['.jpg', '.gif', '.png', '.gif']}
        maxFileSize={5242880}
    />
}
</>

i also configured the media folder in setting.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

and in urls.py

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL,
                        document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL,
                        document_root=settings.STATIC_ROOT)

Hey, take a look at [this](https://stackoverflow.com/questions/4526273/what-does-enctype-multipart-form-data-mean). You need to Post your data as `'Content-Type': 'multipart/form-data'` because you are sending a file to server. — Dad, Mar 15 '21 at 12:31
unfortunately that did not work, i think there's something worng with my usage of state for the image upload but i don't know how to fix it. — adel bouakaz, Mar 15 '21 at 16:36
I misunderstood my problem, this solution didn't work for me. I wanted to POST react webcam image to django backend... anyways thanks for replying — Haider Abbas, Feb 28 '22 at 16:19

score 0 · Accepted Answer · answered Feb 28 '22 at 06:17

constructor(props) {
  super(props);
  this.state = {
    pictures: []
  };
  this.handleimage = this.handleimage.bind(this);
}

    handleimage(picture) {
        this.setState({
            pictures: picture[0],
        });
    }

   handleSubmit (values) {
    console.log('image', this.state.pictures, this.state.pictures.name)
    let form_data = new FormData();
    form_data.append('title',values.title);
    form_data.append('image', this.state.pictures, this.state.pictures.name);


    instance({
        method: "post",
        url: "http://127.0.0.1:8000/API/Create_item",
        data: form_data,
        headers: { "Content-Type": "multipart/form-data" },
    }).then(this.props.history.push("/"));
    }

.

<Form.Item>
    <ImageUploader
        withIcon={true}
        buttonText='Choose images'
        onChange={this.handleimage}
        imgExtension={['.jpg', '.gif', '.png', '.gif']}
        maxFileSize={5242880}
    />
</Form.Item>

upload image from react to django api

1 Answers1