The image file url is not updating on the database [Chapter 4: Uploading File Api]

[rohidas-gowda]

In "https://github.com/async-labs/saas/blob/master/book/4-end/app/pages/your-settings.tsx", the following code
`this.setState({
newAvatarUrl: responseFromApiServerForUpload.url,
});

await updateProfileApiMethod({
name: this.state.newName,
avatarUrl: this.state.newAvatarUrl,
});`

In the above code segment this.setState set newAvatarUrl from responseFromApiServerForUpload.url But In the method updateProfileApiMethod avatarUrl is set to old url, may be because of setState() delay.

But when I modified the code as following it worked fine:
`this.setState({
newAvatarUrl: responseFromApiServerForUpload.url,
});

await updateProfileApiMethod({
name: this.state.newName,
avatarUrl: responseFromApiServerForUpload.url,
});`

In the above code I directly pass the url from the responseFromApiServerForUpload.url to avatarUrl

So can I setState() and use that state newAvatarurl to the updatePropfileApiMethod 's avatarUrl?

[rohidas-gowda]

In the browser It upload the new image file but when I refresh it than it load old image files

[klyburke]

@rohidas-gowda Thanks for reporting.

I was able to reproduce your issue in 4-end when the file api/server/api/public.ts has the wrong value for userId. See this snippet:

try {
  const { name, avatarUrl } = req.body;

  const userId = '62167b54873bce9ec3240910';

  const updatedUser = await User.updateProfile({
    userId: userId,
    name,
    avatarUrl,
    });

62167b54873bce9ec3240910 is the value of _id for our team-builder-book user in our own database. You need to put the value of _id of your user from your own database.

Let me know if this solves the problem for you. I will add an extra note in that file to remind readers to add their own value.

Note that we hard code this value only in Chapter 4. In Chapter 5, we show you how to get userId from req.user on the api server.

[rohidas-gowda]

I had given the _id from my mongoDB database. If Id is not proper I am not able to upload the data to database. The Issue is when I modify the code url got updated to database.

`this.setState({
newAvatarUrl: responseFromApiServerForUpload.url,
});

await updateProfileApiMethod({
name: this.state.newName,
avatarUrl: this.state.newAvatarUrl,,
});`

In the above code I will modify method updateProfileApiMethod 's avatarUrl from avatarUrl: this.state.newAvatarUrl to avatarUrl: responseFromApiServerForUpload.url. Than It's working fine, the url in the database also get updated. I think the problem is in setting the state and sending the same state url as avatarUrl.

[klyburke]

@rohidas-gowda thanks for following up.

I am running 4-end, but I am not able to reproduce the issue you report: that the new avatar image uploads on the browser, but it reverts back to the old image when you refresh the page. When I click the Update avatar button and select a new image, the avatar indeed becomes the new image.

Are you seeing this problem when you run our exact 4-end code base (but add the proper userId value for your user)?

When you upload a new image, check the database. Do you see that avatarUrl updates to the new image? Or do you see that avatarUrl stays as the old image?

[tima101]

@rohidas-gowda After you upload file, print value like this:

console.log(this.state.newAvatarUrl);

It should print new value because of:

this.setState({
  newAvatarUrl: responseFromApiServerForUpload.url,
});

If it does not print new value, you are welcome to share code with us (public repo). Thanks.

[rohidas-gowda]

@rohidas-gowda After you upload file, print value like this:

console.log(this.state.newAvatarUrl);

It should print new value because of:

this.setState({
  newAvatarUrl: responseFromApiServerForUpload.url,
});

If it does not print new value, you are welcome to share code with us (public repo). Thanks.

The console.log(this.state.newAvatarUrl); prints the new value but inside updateProfileApiMethod method the avatarUrl is a old value.

Here is my repo link (4-end): https://github.com/rohidas-gowda/saas/blob/master/book/4-end/app/pages/your-settings.tsx

[klyburke]

@rohidas-gowda Thanks for sharing your codebase.

I compared your 4-end code to our 4-end code in this repo. I think the problem is your package.json files for the /app and /api folders.

For instance, compare your app/package.json file: https://github.com/rohidas-gowda/saas/blob/master/book/4-end/app/package.json

To our app/package.json file: https://github.com/async-labs/saas/blob/master/book/4-end/app/package.json

You are missing some packages that we use, and you have packages that we don't use. You also have different versions of packages that we use.

When I ran your 4-end codebase with the proper package.json files from our 4-end codebase, the avatar file upload worked.

---

Please try using the package.json files from our repo, in both app and api folders. To properly install the right packages, I recommend that you (1) delete yarn.lock file and node_modules folder in your app and api folders (2) update your package.json files to be the same as ours (3) re-run yarn in your app and api folders.

[rohidas-gowda]

@rohidas-gowda Thanks for sharing your codebase.

I compared your 4-end code to our 4-end code in this repo. I think the problem is your package.json files for the /app and /api folders.

For instance, compare your app/package.json file: https://github.com/rohidas-gowda/saas/blob/master/book/4-end/app/package.json

To our app/package.json file: https://github.com/async-labs/saas/blob/master/book/4-end/app/package.json

You are missing some packages that we use, and you have packages that we don't use. You also have different versions of packages that we use.

When I ran your 4-end codebase with the proper package.json files from our 4-end codebase, the avatar file upload worked.

Please try using the package.json files from our repo, in both app and api folders. To properly install the right packages, I recommend that you (1) delete yarn.lock file and node_modules folder in your app and api folders (2) update your package.json files to be the same as ours (3) re-run yarn in your app and api folders.

Thanks @klyburke this solved my issue. And also I hope you will update the packages to latest version. Thanks