CODEWITHSUNDEEP
javascriptjqueryrequirejsjquery-file-uploadblueimp
Prasad.CH
Prasad.CH

Reputation: 492

blueimp jquery fileup with requriejs not working

Hi I've already tried link from github and other SO questions. None of them solved my problem (SO-1 , SO-2, github).

So Here is my code snippet:

require(
            [   'https://blueimp.github.io/JavaScript-Templates/js/tmpl.min.js',
                'https://blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js',
                'https://blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js',
                'upload/jquery.iframe-transport',
                'upload/jquery.fileupload-ui'
            ],function(){
                console.log("new action called ");
            }               
        );

in a folder "upload" i've below files:

After adding all above files, still in my console I've bunch of errors. out of them below two are actually doesn't make sense.

js/jquery.fileupload-image.js : 23 'load-image-exif'

js/jquery.fileupload-image.js : 24 'load-image-ios'

I can't find files with those names in official git repo. can anyone suggest an idea how to get it working (a fiddle would be a gret help).

Upvotes: 1

Views: 1231

Answers (1)

Jimubao
Jimubao

Reputation: 411

CH

I've manage to get the blueimp fileupload working after exploring every individual files. The problem is coming from require js dependencies, so if u are looking solution to use require js to load blueimp fileupload here is the solution.

  1. Download latest blueimp fileupload release https://github.com/blueimp/jQuery-File-Upload/releases

  2. Remove all unnecessary files (All .html files, .json, .md, server folder, test folder and app.js from js folder). I just personally don't need those file, u can keep them if u want. I just like to keep thing tidy and clean. ^^

    like these

  3. I've manually grabbed load-image-exif.js, load-image-ios.js, load-image-meta.js, load-image, tmpl.min.js and put them in vendor folder, where jquery.ui.widget.js is. So i cd to fileupload vendor folder and just curl grab these files like following

    curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image-meta.js

curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image-ios.js

curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image-exif.js

curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Load-Image/master/js/load-image.js

curl -O https://raw.githubusercontent.com/blueimp/JavaScript-Templates/master/js/tmpl.min.js

  4. have these path setting in ur require js config 

    paths: {
    jquery: '//code.jquery.com/jquery-1.11.0.min',        

    // redefined blueimp fileupload path
    "jquery.fileupload": "/jquery-file-upload/js/jquery.fileupload",
    "jquery.fileupload-ui": "/jquery-file-upload/js/jquery.fileupload-ui",
    "jquery.fileupload-image": "/jquery-file-upload/js/jquery.fileupload-image",
    "jquery.fileupload-audio": "/jquery-file-upload/js/jquery.fileupload-audio",
    "jquery.fileupload-video": "/jquery-file-upload/js/jquery.fileupload-video",
    "jquery.fileupload-validate": "/jquery-file-upload/js/jquery.fileupload-validate",
    "jquery.fileupload-process": "/jquery-file-upload/js/jquery.fileupload-process",
    "jquery.iframe-transport": "/jquery-file-upload/js/jquery.iframe-transport",

    "tmpl": "/jquery-file-upload/js/vendor/tmpl.min",
    "load-image": "/jquery-file-upload/js/vendor/load-image",
    "load-image-ios": "/jquery-file-upload/js/vendor/load-image-ios",
    "load-image-exif": "/jquery-file-upload/js/vendor/load-image-exif",
    "load-image-meta": "/jquery-file-upload/js/vendor/load-image-meta",
    "jquery.ui.widget": "/jquery-file-upload/js/vendor/jquery.ui.widget",
}

  5. in ur app.js or main.js what ever u prefer just require either jquery.fileupload or jquery.fileupload-ui. For me I need to use the image preview and progress tracking and template engine so i'm requiring jquery.fileupload-ui

    define([
  'jquery',
  'jquery.fileupload-ui',
], function($) {
    $('#fileupload').fileupload({
        // work on ur magic here
    });
});

Upvotes: 1

Related Questions