How to use blueimp-file-upload with webpack?

Question

I'm using blueimp-file-upload in my website, and I'm using webpack to organize my js code.

I installed blueimp-file-upload and jquery.ui.widget from NPM

npm install --save blueimp-file-upload
npm install --save jquery.ui.widget

and I require blueimp-file-upload in my entry file

require('blueimp-file-upload')

but when I run webpack, I get thie error:

ERROR in ./~/blueimp-file-upload/js/jquery.fileupload.js
Module not found: Error: Cannot resolve module 'jquery.ui.widget' in E:\app-parent\cooka-common-web\src\main\resources\static\node_modules\blueimp-file-upload\js
@ ./~/blueimp-file-upload/js/jquery.fileupload.js 19:8-22:19

score 22 · Answer 1 · answered Nov 26 '16 at 16:59

22

If you're working with images:

Webpack was complaining about some modules that weren't in the blueimp-file-upload package. Here is the way I got this working:

Install missing dependencies:

npm i -S blueimp-load-image
npm i -S blueimp-canvas-to-blob

Configure Webpack:

config.resolve = {
   extensions: ['', '.js'],
   alias: {
      'load-image': 'blueimp-load-image/js/load-image.js',
      'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
      'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
      'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
      'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
   }
};

Include scripts in your app:

import "blueimp-file-upload/js/vendor/jquery.ui.widget.js";
import "blueimp-file-upload/js/jquery.iframe-transport.js";
import "blueimp-file-upload/js/jquery.fileupload.js";
import "blueimp-file-upload/js/jquery.fileupload-image.js";

answered Nov 26 '16 at 16:59

Matheus Dal'Pizzol

5,735
3
19
29

5

Thanks a lot. This works fine. I needed to add this line to resolve -> alias as well: `'load-image-scale': 'blueimp-load-image/js/load-image-scale.js',` – Yolo Oct 16 '17 at 22:58
3

This answer was the most helpful to me. But the most recent version needs the `load-image-scale` alias, like Yolo said. Besides that, you need to change the `jquery-ui/widget` alias to `jquery-ui/ui/widget`. – Thijs Mar 23 '18 at 11:02
Latest version of webpack doesn't like that `config.resolve.extensions[0]` https://stackoverflow.com/a/42377085/684776 – crenshaw-dev May 02 '18 at 17:48
2

i also had to add `'load-image-orientation': 'blueimp-load-image/js/load-image-orientation.js'` – Julien Sep 21 '20 at 00:04
1

We had to add a couple of more aliases: alias: { 'load-image': 'blueimp-load-image/js/load-image.js', 'load-image-meta': 'blueimp-load-image/js/load-image-meta.js', 'load-image-exif': 'blueimp-load-image/js/load-image-exif.js', 'load-image-orientation': 'blueimp-load-image/js/load-image-orientation.js', 'load-image-scale': 'blueimp-load-image/js/load-image-scale.js', 'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js', 'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js' }, – Rikard Sep 09 '21 at 08:07

score 15 · Accepted Answer · answered Sep 23 '15 at 21:09

15

Disable both AMD and CommonJS and use the Browser Global jQuery.

/* The jQuery UI widget factory, can be omitted if jQuery UI is already included */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/vendor/jquery.ui.widget.js');
/* The Iframe Transport is required for browsers without support for XHR file uploads */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.iframe-transport.js');
/* The basic File Upload plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload.js');
/* The File Upload processing plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-process.js');
/* The File Upload validation plugin */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-validate.js');
/* The File Upload Angular JS module */
require('imports?define=>false&exports=>false!blueimp-file-upload/js/jquery.fileupload-angular.js');

This is the configuration I'm using to integrate webpack, blueimp-fileupload with angular. Alternatively you can configure in your webpack.config.js as a regex to avoid repeating loaders.

answered Sep 23 '15 at 21:09

Gowrav

627
7
22

1

It might also be good to note that you can provide jquery to blueimp by using the provide plugin: `webpack.ProvidePlugin({ "window.jQuery": "jquery" })`. more info [here](https://webpack.github.io/docs/shimming-modules.html) – Paul Gray Apr 08 '16 at 20:31
3

as an additional note, the "imports" loader is needed: `npm i --save-dev imports-loader` – jebbie Jul 09 '16 at 22:04
what is the "Browser Global jQuery"? – activedecay Feb 12 '17 at 23:29
Browser Global jQuery means jQuery is available on window namespace. – Gowrav Feb 24 '17 at 04:31
I was using all the bells and whistles and had an issue with dependency order with this. Found `script-loader`. Might help someone: https://stackoverflow.com/a/48236429/1447679 – user1447679 Jan 13 '18 at 02:35

score 8 · Answer 3 · answered Nov 22 '16 at 01:36

8

resolve: {
    extensions: ['', '.js'],
    alias: {
        'jquery-ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
    }
}

answered Nov 22 '16 at 01:36

fewspider

91
2
1

3

While this code snippet may solve the question, [including an explanation](//meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – kayess Nov 22 '16 at 10:31
5

Newer versions of this library need this line instead: `'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'` – Dave Lancea Aug 23 '17 at 19:40

score 5 · Answer 4 · answered Mar 29 '18 at 12:16

I had almost identical problem, except that Error announced not 'jquery.ui.widget' but 'jquery/ui/widget'.
For me @Gowrav answer was wrong way.

After days of straying I've solved it in the simple way. Just did:

npm install jquery-ui

The fact is that jquery.fileupload.js searching for its vendor:

But in context where jquery.fileupload.js is trying to import dependency, of course, it can't be found (resolved). So I add it to project instead.

P.S. It's just my opinion about how does all work. But this way has helped me.

franky · Answer 5 · 2015-08-20T10:20:41.063

2

jquery.fileupload.js checks for AMD require first which results in this error. You can teach webpack not to use AMD style for this file. (Make sure to npm install imports-loader for this method to work.):

require('imports?define=>false!blueimp-file-upload')

It should correctly register the module as CommonJS and will require the jquery.ui.widget from the right location.

Read more here: http://webpack.github.io/docs/shimming-modules.html#disable-some-module-styles

edited Aug 20 '15 at 10:20

answered Aug 20 '15 at 09:35

franky

1,323
1
12
13

I tried to use imports-loader, but inside `jquery.fileupload.js` file, it only require `jquery` and `jquery.ui.widget`, but I need require more additional file, like `tmpl.min.js` `load-image.all.min.js` `canvas-to-blob.min.js` `jquery.blueimp-gallery.min.js` `jquery.iframe-transport.js` `jquery.fileupload.js` `jquery.fileupload-process.js` `jquery.fileupload-image.js` `jquery.fileupload-validate.js` `jquery.fileupload-ui.js` what should I do? (the demo from offical site require all files I mentioned) – Littlee Aug 21 '15 at 02:12
Although I did not try myself it looks like many of those you listed are modules you can find here: https://www.npmjs.com/search?q=blueimp – franky Aug 23 '15 at 03:02
only part of the modules can be found on npm, files like `jquery.fileupload-process.js` is in the same folder as `jquery.fileupload.js`, I do not know how to require it. `require('imports?define=>false!blueimp-file-upload/jquery.fileupload-process.js')` is wrong. – Littlee Aug 24 '15 at 06:59

score 2 · Answer 6 · answered Sep 13 '16 at 16:08

You can add an alias to jquery.ui.widget's main file - it unfortunately doesn't specify one in its package.json, so webpack can't find it otherwise.

resolve: {
    alias: {
        "jquery.ui.widget": "node_modules/jquery.ui.widget/jquery.ui.widget.js"
    }
},

score 1 · Answer 7 · answered Nov 12 '18 at 07:46

1

first install two plugins

npm i blueimp-file-upload --save
npm i jquery-ui --save

then require in web pack

require('blueimp-file-upload/js/jquery.fileupload')

answered Nov 12 '18 at 07:46

Vahid Alvandi

588
9
17

score 0 · Answer 8 · answered Apr 26 '16 at 07:24

actually you can solve this by changing your webpack config, just add the path to resolve (for example I am using bower)

resolve: {
    extensions: [ '', '.js', '.jsx' ],
    modulesDirectories: [
       'node_modules',
       'bower_components', 
       'bower_components/blueimp-file-upload/js/vendor' 
    ]
}

score 0 · Answer 9 · answered Nov 30 '17 at 20:29

0

In webpack 3.x, the syntax will look like this:

  {
    test: require.resolve("blueimp-file-upload"),
    use: "imports-loader?define=>false"
  }

answered Nov 30 '17 at 20:29

Sri

4,613
2
39
42

How to use blueimp-file-upload with webpack?

9 Answers9

If you're working with images:

Install missing dependencies:

Configure Webpack:

Include scripts in your app:

Linked