Upload plugin doesn't work

[optimatex]

Hi. My current implementation is next:

'use strict';
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import Trumbowyg from 'react-trumbowyg';
import '../../../node_modules/trumbowyg/dist/plugins/upload/trumbowyg.upload.js';

const buttons = [
   ['insertImage', 'upload', 'base64', 'noembed'],
]

const upload_plugin = {
   // Add imagur parameters to upload plugin
   upload: {
      serverPath: `${window.ROOT_URL}/api/upload`,
      fileFieldName: 'image',
      headers: {
         'Authorization': 'Client-ID 9e57cb1c4791cea'
      },
      urlPropertyName: 'data.link'
   }
}

@observer
class Trumbowyg_Editor extends Component {
   render() {
      return (
         <div>
            <Trumbowyg
               id='react-trumbowyg'
               data=''
               semantic
               autogrow
               buttons={buttons}
               plugins={upload_plugin} />
         </div>
      );
   }
}

export default Trumbowyg_Editor;

but it tries to upload images on http://localhost:3198/plugins/upload/trumbowyg.upload.php
How can i change uploader url or set more options like callbacks on load ? maybe i can pass custom onLoad handler for this plugin ?

[Alex-D]

IDK how you should pass this argument. But in the original plugin, it's here: https://github.com/Alex-D/Trumbowyg/blob/develop/plugins/upload/trumbowyg.upload.js#L18

[gtrias]

I ended up copying the upload plugin in another file and hard-writting my new parameters in that file and requiring that one instead of the bundled with trumbowyg.

To avoid reactjs's eslint errors I added to my plugin copy those lines before and after the code:

/* eslint-disable */
plugin code
/* eslint-enable */

I'm not sure if this way will work in production build but the upload plugin is simply useless if it cannot be configured...

Would be great to able to configure plugins from Reactjs component itself to avoid ugly things like this :/
Maybe a component prop as @optimatex was trying to do.

[fedenelli]

Okay, this was a while ago but yesterday I came up with the same issue. To solve it, I rebuilt react-trumbowyg with the latest version of babel, and now it works!

In order to be able to use it until someone updates the original project, I published it on NPM https://www.npmjs.com/package/react-trumbowyg_friendly

Hope this helps someone.