Skip to content

Instantly share code, notes, and snippets.

@zerolethanh
Last active February 9, 2021 09:44
Show Gist options
  • Save zerolethanh/4c4249cf62fb10ce28b9e70c3ebd3eb4 to your computer and use it in GitHub Desktop.
Save zerolethanh/4c4249cf62fb10ce28b9e70c3ebd3eb4 to your computer and use it in GitHub Desktop.
Update avatar using react-avatar-edit
import React, {useState} from 'react';
import dynamic from 'next/dynamic';
import {message, Modal} from 'antd';
import {auth, db, storage} from '../../../firebase/clientApp';
import isEmpty from 'lodash/isEmpty';
const Avatar = dynamic(() => import('react-avatar-edit'), {ssr: false});
function AvatarEditor({show, setShow, user}) {
const [data, setData] = useState(null);
const [meta, setMeta] = useState({});
const [uploading, setUploading] = useState(false);
let onFileLoad = (file) => {
setMeta(file);
};
function onCrop(preview) {
setData(preview);
}
function onUpload() {
if (isEmpty(data) || isEmpty(meta)) {
message.warn(`Chưa có ảnh.`);
return;
}
try {
setUploading(true);
const {name, size, type} = meta;
const metadata = {
contentType: type,
cacheControl: 'public,max-age=31536000',//1 year
};
const uploadTask = storage.ref().
child(`users/${user.uid}/avatar/${name}`).
putString(data, 'data_url', metadata);
// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed',
(snapshot) => {
// Observe state change events such as progress, pause, and resume
// Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
// var progress = (snapshot.bytesTransferred / snapshot.totalBytes) *
// 100;
// console.log('Upload is ' + progress + '% done');
// switch (snapshot.state) {
// case firebase.storage.TaskState.PAUSED: // or 'paused'
// console.log('Upload is paused');
// break;
// case firebase.storage.TaskState.RUNNING: // or 'running'
// console.log('Upload is running');
// break;
// }
},
(error) => {
// Handle unsuccessful uploads
message.error(error.message);
},
() => {
// Handle successful uploads on complete
// For instance, get the download URL: https://firebasestorage.googleapis.com/...
uploadTask.snapshot.ref.getDownloadURL().
then(async (downloadURL) => {
// console.log(`users/${user.uid}`);
try {
// console.log('File available at', downloadURL);
await auth.currentUser.updateProfile(
{photoURL: downloadURL},
);
await db.doc(`users/${user.uid}`).
set({photoURL: downloadURL}, {merge: true});
setShow(false);
} catch (e) {
// console.log(e);
message.error(e.message);
} finally {
setUploading(false);
}
});
},
);
} catch (e) {
message.error(e.message);
} finally {
setUploading(false);
}
}
return (
<Modal
title={`Change Avatar`}
visible={show}
onCancel={() => setShow(false)}
okText={'Update'}
onOk={onUpload}
confirmLoading={uploading}
>
<div className={['avatarUploader']}>
<Avatar
width={400}
height={200}
onCrop={onCrop}
onFileLoad={onFileLoad}
/>
</div>
<style jsx>{
`
.avatarUploader {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
`
}
</style>
</Modal>
);
}
export default AvatarEditor;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment