CODEWITHSUNDEEP
javascriptnode.jsreactjsexpress
COders Lime
COders Lime

Reputation: 49

Update profile picture in react

I'm new to react so pardon any mistake. I want to update user profile picture but i dont know how can i make a clickable image(variable name ->"avatar" in code) which previews and then update(in database also), if we click save.

Can someone help me adding a clickable image that previews and updates the from and database as well. If we cannot make clickable image, a separate button for upload and save will also be fine. Let me know if you want more info about code. the code i have:

import React from 'react';
import ProfileBanner from '../ProfileBanner';
import coverSrc from 'assets/img/generic/4.jpg';
//import avatar from 'assets/img/team/2.jpg';
import { Col, Row } from 'react-bootstrap';
import ProfileSettings from './ProfileSettings';
//import ExperiencesSettings from './ExperiencesSettings';
//import EducationSettings from './EducationSettings';
//import AccountSettings from './AccountSettings';
import BillingSettings from './BillingSettings';
import ChangePassword from './ChangePassword';
import DangerZone from './DangerZone';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useEffect ,useState,useRef} from 'react';
import { toast } from 'react-toastify';


 const Settings = () => {
  
  const [formData, setFormData] = useState({
    avatar: '',
    });

  //const { avatar} = formData;
  
  const cookies = new Cookies();
  const user_id = cookies.get('xyz');

  useEffect(async () => {
   
    //e.preventDefault();
    const config = {
      
      headers: {
          "Content-Type": "application/json",

      },
  };

  try {
    
    const { data } = await axios.post(

        `/api/auth/ImageRetrieve`,
        {
          user_id
        },
        config

    );
    
    setFormData({
      avatar:data.link
    });
  } 
  catch (error) {
    toast.success('Something went wrong', {
    theme: 'colored'
  });

  }
  
}, []);
  
  

  return (
    <>
   
      <ProfileBanner>
        
        <div> 
        
           <ProfileBanner.Header
          coverSrc={coverSrc}
          avatar={formData.avatar}
          className="mb-8"
          /> 
          
           
         </div>
        
        
        
      </ProfileBanner>
      
      <Row className="g-3">
        <Col lg={8}>
          <ProfileSettings />
          {/*<ExperiencesSettings />
          <EducationSettings />}*/}
          <br></br>
          <ChangePassword />
        </Col>
        <Col lg={4}>
          <div className="sticky-sidebar">
           {/* <AccountSettings />*/}
            <BillingSettings />
            
            <DangerZone />
          </div>
            </Col>
          </Row>
        </>
      );
    };
    
    export default Settings;

Upvotes: 0

Views: 9378

Answers (3)

Marcos Fuenmayor
Marcos Fuenmayor

Reputation: 1

import ReactProfile from "react-profile";
import "react-profile/themes/default.min.css";

function App() {
  return <ReactProfile src="./your-image.png" />;
}

export default App;

Upvotes: 0

codinn.dev
codinn.dev

Reputation: 260

According to my understanding of the problem, I think you are looking something like this -

 const [selectedAvatar, setSelectedAvatar] = useState();
 const [formData, setFormData] = useState({
    avatar: '',
  });

  useEffect(() => {
      if (!selectedAvatar) {
        setFormData({...formData, avatar: ''});
        return;
      }

      const objectUrl = URL.createObjectURL(selectedAvatar);
     
      //DB call to save objectUrl into the DB

      setFormData({...formData, avatar: objectUrl});
      
      return () => URL.revokeObjectURL(objectUrl);
  }, [selectedAvatar]);

  const onSelectFile = e => {
      if (!e.target.files || !e.target.files.length) {
          setSelectedAvatar('');
          return;
      }

      setSelectedAvatar(e.target.files[0]);
  }

  return (
      <div>
          <input type='file' onChange={onSelectFile} />
          {!!selectedAvatar &&  <div> 
                                  <ProfileBanner.Header
                                     coverSrc={coverSrc}
                                     avatar={formData.avatar}
                                     className="mb-8"
                                   /> 
                                 </div> 
          }
      </div>
  )

Upvotes: 0

Yosi Leibman
Yosi Leibman

Reputation: 388

you can basically add onClick property to any native element, so

  <span onClick={()=>{ /*put here some code that change the coverSrc state*/}}>
      <ProfileBanner.Header
         coverSrc={coverSrc}
         avatar={formData.avatar}
         className="mb-8"
       />
 </span>

you can create a popup to enter new pic URL and than on-close update that state.

Upvotes: 2

Related Questions