0

I have a react project and I am trying to get photo upload and storing to work. I currently have a form where the users uploads a profile picture. When the profile picture is uploaded, the entire file object is sent with the axios request from the react frontend to sequelize backend. I am running into the issue where the entire file object is being sent in the request body, but when I console.log in the controller... it is showing an empty object rather than the file object I know I am sending from the frontend to the backend.

I have no idea why all the data is being lost.

Here is the react function that is sending the axios request:

  function createProfile(userId){
    console.log('about to create profile with picture')
    console.log(profilePicture)
    axios.post('/api/profile/', {
      'profile_pic':profilePicture,
      'f_name':firstName,
      'l_name':lastName,
      'bio':bio,
      'location':location,
      'sm_facebook':facebook,
      'sm_instagram':instagram,
      'sm_twitter':twitter,
      'sm_website':website,
      'followers':0,
      'following':0,
      'photos':0,
      'edits':0,
      'downloads':0,
      'userId':userId
    })
    .then((data) => {
      return(<Navigate to='/' />)
    })
    .catch((err) => {
      console.error(err)
    })
  }

the console.log(profilePicture) is displaying the following:

File {name: 'pexels-any-lane-5946095.jpg', lastModified: 1638937909688, lastModifiedDate: Tue Dec 07 2021 20:31:49 GMT-0800 (Pacific Standard Time), webkitRelativePath: '', size: 504333, …}
lastModified: 1638937909688
lastModifiedDate: Tue Dec 07 2021 20:31:49 GMT-0800 (Pacific Standard Time) {}
name: "pexels-any-lane-5946095.jpg"
size: 504333
type: "image/jpeg"
webkitRelativePath: ""
[[Prototype]]: File

Here is the backend controller:

  post:(req, res) => {
    const dirPath = '/Users/omarjandali/dev/fotos-web/backend/client/static/images/ProfilePictures'
    console.log(__dirname)
    console.log(req.body)
    let body = req.body
    Profile.create({
      profile_pic: "diller",
      f_name: body.f_name,
      l_name: body.l_name,
      bio: body.bio,
      location: body.location,
      sm_facebook: body.sm_facebook,
      sm_instagram: body.sm_instagram,
      sm_twitter: body.sm_twitter,
      sm_website: body.sm_website,
      followers: body.followers,
      following: body.following,
      photos: body.photos,
      downloads: body.downloads,
      edits: body.edits,
      userId: body.userId
    })
    .then((data) => {
      res.send(data).status(200)
    })
    .catch((err) => {
      console.error(err)
      res.send(err).status(400)
    })
  },

the console.log(req.body) is showing the following object:

{
  profile_pic: {},
  f_name: 'assad',
  l_name: 'jandali',
  bio: 'bio',
  location: 'location',
  sm_facebook: 'https://facebook.com',
  sm_instagram: 'https://instagram.com',
  sm_twitter: 'https://twitter.com',
  sm_website: 'http://omarjandali.com',
  followers: 0,
  following: 0,
  photos: 0,
  edits: 0,
  downloads: 0,
  userId: 4
}

as you can see the profile picture is not being sent all the way through the request.

omar jandali
  • 87
  • 1
  • 12
  • I advice you to add a header with the type of the data as suggested here: https://stackoverflow.com/questions/39663961/how-do-you-send-images-to-node-js-with-axios – programandoconro Jan 20 '22 at 06:40
  • hello @Cmontalvo80 I saw that you answered a question similar to this one but for some reason that solution did not work. Can you help me fix this issue. react-file-base64 did not seem to do the trick – omar jandali Jan 20 '22 at 07:29

1 Answers1

0

Convert image file to base64 before sending to the backend

you can use react-file-base64 component, its pretty awsome

Jineesh 619
  • 86
  • 4