Skip to content

Instantly share code, notes, and snippets.

@jmndao
Last active April 28, 2024 10:56
Show Gist options
  • Save jmndao/68c96b816d27b92a962f349d99b1551b to your computer and use it in GitHub Desktop.
Save jmndao/68c96b816d27b92a962f349d99b1551b to your computer and use it in GitHub Desktop.
Create custom image request from firebase using Antd library.
// Note: this is a combo between react-antd and firebase (storage)
// - How you can add your task progress bar to the antd-progress
/* Action */
const firebaseUpload = ({ onSuccess, onProgress, onError, file }) => (dispatch) => {
const storageRef = storage.ref(`portfolio/${file.name}`);
const task = storageRef.put(file);
task.on(
"state_changed",
function progress(snapshot) {
dispatch({ type: FIREBASE_UPLOAD_PROGRESS });
onProgress({
percent: Math.floor(snapshot.bytesTransferred / snapshot.totalBytes).toFixed(2) * 100
}, file);
},
function error(err) {
dispatch({ type: FIREBASE_UPLOAD_ERROR, payload: err });
onError(err, file);
},
function complete() {
task.snapshot.ref.getDownloadURL().then(fileUrl => {
dispatch({ type: FIREBASE_UPLOAD_END, payload: fileUrl })
onSuccess(fileUrl, file);
});
}
)
};
export { firebaseUpload }
/* Reducer */
export const firebaseUploderReducer = (state = {}, action) => {
switch (action.type) {
case FIREBASE_UPLOAD_PROGRESS:
return { onProgress: true, onComplete: false }
case FIREBASE_UPLOAD_ERROR:
return { onProgress: false, onComplete: false, uploadError: action.payload }
case FIREBASE_UPLOAD_END:
return { onProgress: false, onComplete: true, fileUrl: action.payload }
default:
return state;
}
};
/* screens: In your form component */
// First create a handler for the custom request that you should setup
const firebaseUploadHandler = e => {
dispatch(firebaseUpload(e))
}
// ... antd Form
<Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
// ... Some field up
<fieldset>
<legend>Programming Skills</legend>
{profileInfo && (<Form.List name="programmingSkill" initialValue={profileInfo.programmingSkill}>
{(fields, { add, remove }) => {
return (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8, justifyContent: 'space-between' }} align='start'>
<Form.Item name={[name, "language"]} fieldKey={[fieldKey, "language"]}>
<Input placeholder='Language' />
</Form.Item>
<Form.Item
name={[name, "image"]}
fieldKey={[fieldKey, "image"]}
>
<Upload
customRequest={(e) => firebaseUploadHandler(e)}
>
<Button icon={<UploadOutlined />}>Click to Upload</Button>
</Upload>
</Form.Item>
<Form.Item name={[name, "description"]} fieldKey={[fieldKey, "description"]}>
<Input.TextArea placeholder='Description' />
</Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Space>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
Add field
</Button>
</Form.Item>
</>
)
}}
</Form.List>)}
</fieldset>
// ... Some fields down
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment