64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
// @flow
|
|
import uuid from 'uuid';
|
|
import DropOrPasteImages from 'slate-drop-or-paste-images';
|
|
import uploadFile from 'utils/uploadFile';
|
|
|
|
type Options = {
|
|
onImageUploadStart: Function,
|
|
onImageUploadStop: Function,
|
|
};
|
|
|
|
export default function ImageUploads({
|
|
onImageUploadStart,
|
|
onImageUploadStop,
|
|
}: Options) {
|
|
return DropOrPasteImages({
|
|
extensions: ['png', 'jpg', 'gif'],
|
|
applyTransform: async (transform, editor, file) => {
|
|
onImageUploadStart();
|
|
|
|
// load the file as a data URL
|
|
const id = uuid.v4();
|
|
const alt = file.name;
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => {
|
|
const src = reader.result;
|
|
|
|
// insert into document as uploading placeholder
|
|
const state = transform
|
|
.insertBlock({
|
|
type: 'image',
|
|
isVoid: true,
|
|
data: { src, alt, id, loading: true },
|
|
})
|
|
.apply();
|
|
editor.onChange(state);
|
|
});
|
|
reader.readAsDataURL(file);
|
|
|
|
// now we have a placeholder, start the upload
|
|
try {
|
|
const asset = await uploadFile(file);
|
|
const src = asset.url;
|
|
|
|
// we dont use the original transform provided to the callback here
|
|
// as the state may have changed significantly in the time it took to
|
|
// upload the file.
|
|
const state = editor.getState();
|
|
const transform = state.transform();
|
|
const placeholder = state.document.findDescendant(
|
|
node => node.data && node.data.get('id') === id
|
|
);
|
|
return transform.setNodeByKey(placeholder.key, {
|
|
data: { src, alt, loading: false },
|
|
});
|
|
} catch (err) {
|
|
// TODO: Show a failure alert
|
|
console.error(err);
|
|
} finally {
|
|
onImageUploadStop();
|
|
}
|
|
},
|
|
});
|
|
}
|