nervgh / angular-file-upload

[ALMOST NOT MAINTAINED] Angular File Upload is a module for the AngularJS framework
MIT License
3.44k stars 1.13k forks source link

angular is not defined #865

Open msuresh551 opened 4 years ago

msuresh551 commented 4 years ago

Hi folks,
Previously I am using angular-file-upload version 1.0.3 and AngularJS version 1.2 now I have updated AngularJS 1.7 and anguar-file-uploader 2.5.0 unfortunately file uploader is not working throwing error like

_ReferenceError: angular is not defined at Object. (angular-file-upload.js:190) at webpack_require (angular-file-upload.js:36) at Object. (angular-file-upload.js:75) at webpack_require (angular-file-upload.js:36) at angular-file-upload.js:57 at angular-file-upload.js:61 at Object.execCb (require.js:1650) at Module.check (require.js:861) at Module.enable (require.js:1143) at Module.init (require.js:774) requirejs.onError @ main.js:2 onError @ require.js:537 check @ require.js:886 enable @ require.js:1143 init @ require.js:774 callGetModule @ require.js:1170 completeLoad @ require.js:1544 onScriptLoad @ require.js:1671 load (async) req.load @ require.js:1882 load @ require.js:1639 load @ require.js:820 fetch @ require.js:810 check @ require.js:840 enable @ require.js:1143 enable @ require.js:1511 (anonymous) @ require.js:1128 (anonymous) @ require.js:132 each @ require.js:57 enable @ require.js:1090 init @ require.js:774 callGetModule @ require.js:1170 completeLoad @ require.js:1544 onScriptLoad @ require.js:1671 load (async) req.load @ require.js:1882 load @ require.js:1639 load @ require.js:820 fetch @ require.js:810 check @ require.js:840 enable @ require.js:1143 enable @ require.js:1511 (anonymous) @ require.js:1128 (anonymous) @ require.js:132 each @ require.js:57 enable @ require.js:1090 init @ require.js:774 (anonymous) @ require.js:1416 setTimeout (async) req.nextTick @ require.js:1755 localRequire @ require.js:1405 configure @ require.js:1343 requirejs @ require.js:1734 req.config @ require.js:1745 (anonymous) @ main.js:7 main.js:4 Uncaught ReferenceError: angular is not defined at Object. (angular-file-upload.js:190) at webpack_require (angular-file-upload.js:36) at Object. (angular-file-upload.js:75) at webpack_require (angular-file-upload.js:36) at angular-file-upload.js:57 at angular-file-upload.js:61 at Object.execCb (require.js:1650) at Module.check (require.js:861) at Module.enable (require.js:1143) at Module.init (require.js:774)_ can you please helm me out...

ghost commented 4 years ago

I have a workaround to solve this. Modify angular-file-upload/src/index.js and export the module:

export default angular
    .module(CONFIG.name, [])
    .value('fileUploaderOptions', options)
    .factory('FileUploader', serviceFileUploader)
    .factory('FileLikeObject', serviceFileLikeObject)
    .factory('FileItem', serviceFileItem)
    .factory('FileDirective', serviceFileDirective)
    .factory('FileSelect', serviceFileSelect)
    .factory('FileDrop', serviceFileDrop)
    .factory('FileOver', serviceFileOver)
    .factory('Pipeline', servicePipeline)
    .directive('nvFileSelect', directiveFileSelect)
    .directive('nvFileDrop', directiveFileDrop)
    .directive('nvFileOver', directiveFileOver)
    .run([
        'FileUploader',
        'FileLikeObject',
        'FileItem',
        'FileDirective',
        'FileSelect',
        'FileDrop',
        'FileOver',
        'Pipeline',
        function(FileUploader, FileLikeObject, FileItem, FileDirective, FileSelect, FileDrop, FileOver, Pipeline) {
            // only for compatibility
            FileUploader.FileLikeObject = FileLikeObject;
            FileUploader.FileItem = FileItem;
            FileUploader.FileDirective = FileDirective;
            FileUploader.FileSelect = FileSelect;
            FileUploader.FileDrop = FileDrop;
            FileUploader.FileOver = FileOver;
            FileUploader.Pipeline = Pipeline;
        }
    ])
.name;

Next import into your app:

import ngUpload from './node_modules/angular-file-upload/src/index'`
angular.module('myapp', [ngUpload])