Skip to content

Conversation

@nicholasrwx
Copy link
Collaborator

What this PR does (required):

  • This PR integrates uploading a profile picture on the profile-photo page, to cloudinary via the uploadImage API Call.
  • It auto submits the photo after a user selects one.

Any information needed to test this feature (required):

  • To test this feature, update the env file with the cloudinary config parameters, run the dev server and the app locally, navigate to localhost:3000, and try to upload a photo using the upload button on the profile photo page. Please DM me if you would like the credentials to do so.

Screenshots / Videos (front-end only)

Screenshot from 2021-11-22 19-33-56
Screenshot from 2021-11-22 19-34-03
Screenshot from 2021-11-22 19-34-21

@nicholasrwx nicholasrwx requested a review from bonnieli November 23, 2021 03:17
Copy link

@sundayezeilo sundayezeilo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good. There are a few minor comments to fix, though. Please also remember to link your ticket in all your future PRs. See this guide

return await fetch(`/imageUpload`, fetchOptions)
.then((res) => res.json())
.catch((err) => {
console.log('UPLOADIMAGE-ERROR: ', err);

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use console.error for this log

onSubmit={handleSubmit}
encType="multipart/form-data"
>
<input

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use MUI TextField for this one

type="file"
onChange={handleChange}
/>
<label htmlFor="fileInput" className={classes.label}>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use MUI InputLabel for this

Upload a file from your device
</Button>
</label>
<button type="submit" className={classes.submitButton}></button>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use MUI Button component for this one

</form>
</Grid>
<Grid item container className={classes.deleteButtonContainer}>
{/*this is going to remove from the cloud*/}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove comment please

alignItems: 'center',
justifyContent: 'center',
zIndex: -1,
// zIndex: -1,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove unused code line

@nicholasrwx
Copy link
Collaborator Author

I've made the suggested changes above, in this commit 13f946a

Copy link

@sundayezeilo sundayezeilo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job making the requested changes 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants