score:0

#api 
import axios;

const avatarupload = (data, uuid) => {
  return axios.post(`endpoint/`, data).then(
    (res) => res,
    (error) => error.response
  );
};

#store 
getavatar = async (data, cb) => {
    const uuid = localstorageservice.getuuid();
    const resp = await avatarupload(data, uuid);
    if (resp.status === 200) {
      this.setmessage('successfully updated');
      this.setuser(resp.data);
      cb();
    } else {
      cb(resp.data.error);
    }
    this.setpicloading(false);
  };

#web page
const handlefilechange = async (event) => {
    const data = new formdata();
    data.append('avatar', event.target.files[0]);
    getavatar(data, (error) => {
      seterror(error);
    });
    setfader(1);
  };


 <form.group controlid='formbasictext'>
                <button
                  classname='primary'
                  type='button'
                  onclick={handlechangeavatarclick}
                >
                  change avatar
                </button>
                <form.control
                  style={{ display: 'none' }}
                  type='file'
                  ref={hiddenfileinput}
                  onchange={handlefilechange}
                  accept='image/*'
                />
              </form.group>

Related Query

More Query from same tag