innostudio / fileuploader

Beautiful and powerful HTML file uploading tool. A jQuery, PHP and Node.js plugin that transforms the standard input into a revolutionary and fancy field on your page.
141 stars 25 forks source link

Webpack #19

Closed s0By closed 6 years ago

s0By commented 6 years ago

Seems that the plugin is not module compatible at the moment. Isn't really friendly with Webpack, for example.

I managed to make it work a little bit. $.fileuploader and inner stuff ($.fileuploader.getInstance for example) are not reachable.

innostudio commented 6 years ago

@s0By is $ jQuery?

s0By commented 6 years ago

Yes.

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: {
        vendor: "./vendor.js"
    },
    output: {
        path: __dirname + "/public/assets/vendor",
        filename: "[name].min.js"
    },
    resolve: {
        alias: {
            'fileuploader': './public/assets/plugins/fileuploader/src/jquery.fileuploader.js'  // relative to node_modules
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jquery: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            moment: 'moment',
            Popper: ['popper.js', 'default']
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new ExtractTextPlugin("[name].min.css")
    ],
    module: {
        loaders: [
            {
                test: require.resolve('jquery'),
                use: [{
                    loader: 'expose-loader',
                    options: 'jQuery'
                },{
                    loader: 'expose-loader',
                    options: '$'
                }]
            }
        ]
    }
};

and entry is

require('bootstrap');
require('fileuploader');
innostudio commented 6 years ago

@s0By what is the error in the console? $.fileuploader.getInstance only this?

s0By commented 6 years ago

Initialization with my config works fine, I see the files. But I have a separate buttons that worked through API before, and those give me Uncaught TypeError: $.fileuploader.getInstance is not a function

innostudio commented 6 years ago

Fixed