Upload File option in react-draft-wysiwyg

[saravanannnallasamy]

Hi, In the image option only URL is available, how to add Upload file option.

[sylvainbx]

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 }}}} />

[saravanannnallasamy]

It doesn't make any change.

[chiedo]

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.

[jpuri]

@saravanannnallasamy : I hope it worked for you, plz share if you are still facing the issue or else close it.

[xinw0803]

@jpuri If the file type is not img, it's docx, after uploading success but still in the form of a picture

[CharlesIrvineKC]

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!!

[lefnire]

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.

[jpuri]

@wx1989 : wysiwyg does not supports uploading files only images are supported.

[dzpt]

@chiedo i don't see any preview img after upload. only the img url ??!

[truonghuuthanh95]

@chiedo i don't see any preview img after upload. only the img url ??!

same problem. Did you done?

[berzavlu]

@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 :)

[cuongdevjs]

how I hide alt input & set default value (width, height) for image uploaded in popup upload image?

[vtrikoupis]

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.

[palakaveeti]

Thak you @sylvainbx and @berzavlu

[palakaveeti]

Is there a way to add Image and text side by side ?? plss help me

[ps-shoaib]

Image file data is'nt showing in "convertedContent" only

tag is showing. Any solution?

[MahdiMurshed]

after converting to html ,image is not showing .only empty

tag is showing .any solution?

[Amo0ory94]

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); } ) }) `

[MisterCommit]

image upload will not show until you pass the uploadCallback pass.

image: { icon: image, className: undefined, component: undefined, popupClassName: undefined, urlEnabled: true, uploadEnabled: true, alignmentEnabled: true, uploadCallback: undefined, previewImage: false, inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg', alt: { present: false, mandatory: false }, defaultSize: { height: 'auto', width: 'auto', },

these are all types

image: urlEnabled: The property can be used to configure if the option to specify image source URL should be enalbled. Default value is true.

image: uploadEnabled: The property can be used to configure if the option to upload image computer should be enabled. Default value is true. image: uploadCallback: This is image upload callBack. It should return a promise that resolves to give image src. Default value is true. Both above options of uploadEnabled and uploadCallback should be present for upload to be enabled. Promise should resolve to return an object { data: { link: }}. image: previewImage: The property can be used to configure image preview after upload in image popup, false by default. image: alignmentEnabled: The property can be used to configure if image alignment should be enabled. Alignment options are LEFT, RIGHT and CENTER. Default value is true. image: inputAccept: The property can be used to configure which file types should be allowed to upload by file input for image upload. image: alt: The property can be used to enable alt field for images and optionally make it mandatory. image: defaultSize: This property can be used to pass default size (height and width) of image in the editor. The default values are 'auto'.