React-draft-wysiwyg: 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.

[wx1989]

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

[ChuckIrvine]

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