onImageUploadBefore does not work fine #310
Description
@mkhstar
Hi @mkhstar, I am using the function onImageUploadBefore to upload the image to the server. But it did not work as excepted.
I got the error below:
uploadHandler is not a function
Version
Next version: 13.3.0, react: 18.2.0, suneditor: 2.44.12, suneditor-react: 3.5.0
Here is my code:
const RichEditor = memo<Props>(function RichEditor({
height = '300',
value,
setValue,
}) {
const handleImageUploadBefore = useCallback(
(files: Array<File>, info: object, uploadHandler: UploadBeforeHandler) => {
// Do not use async function
try {
const file = files[0];
const formData = new FormData();
formData.append('files', file);
axiosClient
.post('/uploads', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
})
.then((res) => res.data)
.then((images) => {
const handleData = {
result: [
{
url: getURLImage(images[0].path),
name: images[0].originalName,
size: images[0].size,
},
],
};
return uploadHandler(handleData);
});
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
return false;
}
},
[],
);
return (
<SunEditor
height={height}
setOptions={{
buttonList: [
['undo', 'redo'],
[
'fontSize',
'formatBlock',
'paragraphStyle',
'blockquote',
'bold',
'underline',
'italic',
'fontColor',
'textStyle',
'removeFormat',
'outdent',
'indent',
'align',
'horizontalRule',
'list',
'lineHeight',
'table',
],
['link', 'image', 'video', 'audio'],
['fullScreen'],
],
}}
onImageUploadBefore={handleImageUploadBefore}
setContents={value}
onChange={setValue}
/>
);
});