0

I have a react app that has a basic registration page, and a part of that is allowing users to upload a profile photo. I've read many answers here in relation to sending images server-side but none have worked for me. To get over the C:\\fakepath\\img-name. Is there a way for me to convert the image into a buffered Array to send along with the rest of my input fields?

Here's how I'm sending my data to my api:

handleSubmit(){
    let fname     = this.state.fname;
    let lname     = this.state.lname;
    let email     = this.state.email;
    let password  = this.state.password;
    let mentor    = this.state.mentor;
    let mentee    = this.state.mentee;
    let photo     = this.state.photo
    let interest1 = this.state.interest1;
    let interest2 = this.state.interest2;
    let interest3 = this.state.interest3;
    let course    = this.state.course;

    const requestBody = {
      fname: fname,
      lname: lname,
      email: email,
      password: password,
      photo: photo,
      mentor: mentor,
      mentee: mentee,
      interest1: interest1,
      interest2: interest2,
      interest3: interest3,
      course: course
    }
    const config = {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }}
    if(this.checkValidation()) {

      request.post("/register",qs.stringify(requestBody),config)
             .then(result => this.setState({submitStatus: result.status}))
             .catch(err   => console.log(err))
    }
  }

When I submit this to my api server I get this:

{ fname: 'Naruto',
  lname: 'Uzumaki',
  email: 'Naruto@konoha.com',
  password: 'Hokage',
  mentor: 'on',
  mentee: '',
  interest1: 'Anime',
  interest2: 'Football',
  interest3: 'Gaming',
  course: 'CPSS' }

Any help in regards to this would be greatly appreciated!

Jambo
  • 65
  • 7
  • It's not clear where your issue is, but I'm guessing it's the call to `qs.stringify`. You need to post the file in a `FormData` structure, as in the answers to [this question](https://stackoverflow.com/q/43013858/215552). – Heretic Monkey Feb 21 '19 at 17:27
  • Well when I submit the `requestbody` and log it in my terminal it as every attribute but `photo`. Removing `qs.stringify` turns the response into one giant `key` string – Jambo Feb 21 '19 at 17:30
  • Did you read the answers on the linked page? – Heretic Monkey Feb 21 '19 at 17:31
  • I did, I've tried using formData() before and it didn't help – Jambo Feb 21 '19 at 17:36

0 Answers0