react-draft-wysiwyg
react-draft-wysiwyg copied to clipboard
jpuri
Upload File option in react-draft-wysiwyg
Hi, In the image option only URL is available, how to add Upload file option.
From the docs:
If callback function uploadCallback is passed in toolbar configuration property, image control shows the option to upload image. The callback should return a promise.
export default function uploadCallback(file) { return new Promise( (resolve, reject) => { resolve({ data: { link: "http://dummy_image_src.com" } }); } ); } <Editor toolbar={{ image: { uploadCallback: this.uploadCallback }}}} />
That wouldn't make a change. If you wanted to do it all locally, you could use this.
_uploadImageCallBack(file){
// long story short, every time we upload an image, we
// need to save it to the state so we can get it's data
// later when we decide what to do with it.
// Make sure you have a uploadImages: [] as your default state
let uploadedImages = this.state.uploadedImages;
const imageObject = {
file: file,
localSrc: URL.createObjectURL(file),
}
uploadedImages.push(imageObject);
this.setState(uploadedImages: uploadedImages)
// We need to return a promise with the image src
// the img src we will use here will be what's needed
// to preview it in the browser. This will be different than what
// we will see in the index.md file we generate.
return new Promise(
(resolve, reject) => {
resolve({ data: { link: imageObject.localSrc } });
}
);
}
If you wanted to actually upload to a server, you would do some AJAX first to get the URL.
@saravanannnallasamy : I hope it worked for you, plz share if you are still facing the issue or else close it.
@jpuri If the file type is not img, it's docx, after uploading success but still in the form of a picture
I used the code suggested by @chiedo and it seems like a good start.
After the user finishes his edit session, I want to persist his content, including the image content, as HTML to my database. Can someone suggest how I go about doing this?
Thanks!!
Here's the code I'm using for general file upload: lefnire/wysiwyg-upload-file. Sloppy copy/paste from my project, so you'll need to massage for your purposes. I cloned and modified the Image control so that I can have both: a dedicated image uploader and a general file uploader.
Note, to do this I needed access to source components like Spinner, Dropdown, images/*, etc. See my issue https://github.com/jpuri/react-draft-wysiwyg/issues/565 on that discussion.
@wx1989 : wysiwyg does not supports uploading files only images are supported.
@chiedo i don't see any preview img after upload. only the img url ??!
same problem. Did you done?
@dzpt @truonghuuthanh95 just add previewImage: true to image object
example:
image: {
uploadCallback: uploadImageCallBack,
previewImage: true,
alt: { present: true, mandatory: false },
inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg',
}
you welcome :)
how I hide alt input & set default value (width, height) for image uploaded in popup upload image?
Is there a way to pass parameters to the uploadImageCallBack function? a variable I need to access, defined with useState("some value") is undefined and I'm sure it's defined as it's used throughout other functions.
Image file data is'nt showing in "convertedContent" only
after converting to html ,image is not showing .only empty
I managed to get the preview image showing by converting the src into base64 data url, but i am having trouble as the preview images get queued and does change immediately. tried to use useState and add it as a dependency in the useEffect but still same issues occures, it works better when i use useRef, but still the images get queued. here is my code for the uploadImageCallback : ( it works well when not doing the compression though, but since i am uplaoding the input from the editor into a database i need to compress the image so it does not take up lots of space)
` function urltoFile(url, filename, mimeType){ return (fetch(url) .then(function(res){return res.arrayBuffer();}) .then(function(buf){return new File([buf], filename,{type:mimeType});}) ); }
async function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = async () => {
resolve(reader.result)
};
var convertTofile = new File([file], "image");
reader.readAsDataURL(convertTofile);
});
}
const uploadImageCallBack = (async (file) => {
return new Promise(
(resolve, reject) => {
var reader = new FileReader();
reader.onloadend = async () => {
const mimeType = reader.result.split(':')[1].split(';')[0]
const fileConverted = await urltoFile(reader.result,'image', mimeType );
new Compressor(fileConverted, {
quality: 1,
convertSize:10000000,
width:1264,
height:1264,
success: (compressedResult) => {
console.log('compress the image')
uploadedImage.current = compressedResult;
},
})
let convertTofile = new File([uploadedImage.current ], "image");
const compressedFile = await getBase64(convertTofile);
resolve({ data: {link: compressedFile , src: compressedFile } });
};
return reader.readAsDataURL(file);
}
)
})
`
