How to use Fine Uploader in React js

Question

Hi i am newbie to Reactjs. i am using fineuploader to upload files to the server.i want to create a FineUploader Component ,so that i can use it where ever i want.

package.json

{
  "name": "Sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "fine-uploader": "^5.7.1",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  }
}

webpack.config.js

var path = require("path");

module.exports = {
    entry: [
       './Components/Main.js'
    ],
    output:{
        path:__dirname,
        filename:'bundle.js'
    },
    resolve: {
        alias: {
          'fine-uploader': path.resolve('node_modules/fine-uploader/fine-uploader')
        }
    },
    module:{
        loaders: [
            {
                test: /fine-uploader\.js/,
                loader: 'exports?qq'
            }
        ],
        loaders:[{
            test: /\.jsx?$/,
            exclude:/node_modules/,
            loader:'babel',
            query:{
              presets: ['react']
            }
        }]
    }
};

FineUploader.js

import React from 'react';

import qq from 'fine-uploader/fine-uploader';

class FineUploader extends React.Component {
  constructor (props) {
    super(props)
  }

  componentDidMount () {
    const fu = new qq.FineUploaderBasic({
      button: this.refs.fu
    })
  }

  render () {
    return <div ref='fu'>Upload!</div>
  }
}

export default FineUploader;

Main.js

import React from 'react';
import ReactDOM from 'react-dom';

import FineUploader from './FineUploader.js';

var MainContent = React.createClass({
    render:function(){
        return (
           <div>
             <FineUploader />
           </div>
        );
    }
});

ReactDOM.render(<MainContent />,document.getElementById('container'));

When i run the Application i am getting the below error uncaught TypeError: _fineUploader2.default.FineUploaderBasic is not a constructor

i dint no what i am doing wrong ,Plz somebody guide me

Answer 1

To use Fine Uploader with React you will need to create a new uploader instance within the componentDidMount lifecycle method.

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation).

Fine Uploader needs an actual rendered DOM element for it to attach event handlers, render other DOM elements as children, etc.

Inside of componentDidMount we not only know our component has been created, but we also have a DOM element and we can reference it as such using a ref.

Here's a tiny example component:

class FineUploader extends React.Component {

  componentDidMount () {
    const fu = new qq.s3.FineUploaderBasic({
      button: this.refs.fu
    })
  }

  render () {
    return <div ref='fu'>Upload!</div>
  }
}