I got .fileupload is not a function error in my laravel 8 app

sergeynilov commented 3 years ago

Hello, In my Laravel 8 / jQuery 3.5.1 / bootstrap 4.5.3 app I want to add jQuery-File-Upload library and adding all files to my project I got error

Uncaught TypeError: $(...).fileupload is not a function

At line with fileupload calling:

      <div class="col-xs-12 col-sm-6">
          <input id="fileupload"  type="file" class="ad_image_fileupload" name="files[]" >
      </div>

@section('scripts')

    <link href="{{ asset('css/gijgo.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ url('css/jquery.fileupload.css') }} "/>

    <script src="{{ asset('node_modules/tinymce/tinymce.js') }}"></script>
    <script src="{{ asset('js/autonumeric@4.6.0.js') }}"></script>

    <script src="{{ url('js/fileupload/jquery.ui.widget.js') }}"></script>

    <script src="{{ url('js/fileupload/jquery.iframe-transport.js') }}"></script>
    <script src="{{ url('js/fileupload/jquery.fileupload.js') }}"></script>

    <script src="{{ url('js/fileupload/jquery.fileupload-process.js') }}"></script>
    <script src="{{ url('js/fileupload/jquery.fileupload-ui.js') }}"></script>
    <script src="{{ url('js/fileupload/jquery.fileupload-validate.js') }}"></script>
    <script src="{{ url('js/fileupload/jquery.fileupload-video.js') }}"></script>

    <script src="{{ asset('js/gijgo.min.js') }}"></script>

    <script>
        console.log('resources/views/admin/ads/edit.blade.php::')
        jQuery.noConflict();  //Not to conflict with other scripts
        jQuery(document).ready(function ($) {
            console.log('-2 resources/views/admin/ads/edit.blade.php::')

            $('.ad_image_fileupload').fileupload({
               url: href,
               type: "POST",

in my resources/views/admin/layouts/app.blade.php :

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/plugins.css') }}" rel="stylesheet">
    <link href="{{ asset('css/solar/bootstrap.min.css') }}{{  "?dt=".time()  }}" rel="stylesheet">

    <link href="{{ asset('css/jquery-confirm.css') }}" rel="stylesheet" type="text/css">   

    <!-- Scripts -->
    <script src="{{ asset('js/jquery.min.js') }}"></script>    
    <script src="{{ asset('js/app.js') }}{{  "?dt=".time()  }}" defer></script>

    <script src="{{ asset('js/admin/common.js') }}{{  "?dt=".time()  }}"></script>

</head>

<body class="d-flex flex-column">
<div id="app" class="d-flex flex-column">

    <header>
        @include('admin.layouts.navbar')
    </header>
    <main class="container-fluid flex-fill">
        @yield('content')
    </main>

    <footer>
        @include($current_admin_template.'.layouts.footer')
    </footer>
    @yield('scripts')

</div>
</body>

and in resources/js/bootstrap.js :

window._ = require('lodash');

console.log('resources/js/bootstrap.js::')

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    window.confirm =  require('jquery-confirm')

    window.toastr =  require('toastr')

    require('bootstrap');
    require('toastr');
    require('bootstrap-notify'); //     <script src="{{ asset('/js/jquery.bootstrap-growl.min.js') }}"></script>

} catch (e) {}

window.axios = require('axios');

I am sure that fileupload is triggered afetr quesry is loaded. I tried to change order of files in my blade file, but got this error anyway...

I tried to change place of @yield('scripts') inside of app.blade.php and location of js files inside of my blade file, but failed...

How it can be fixed?

Thanks!

sergeynilov commented 3 years ago

That is how console of my browser looks like : https://prnt.sc/wes6dq Apart I use and init gijgo datepicker, tinymce, autonumeric component when jquery is inited and they all works ok. I mean jquery was inited ok. Any hints ?

PingPongSet commented 3 years ago

@sergeynilov Is it working for you? It might be the same issue as https://github.com/blueimp/jQuery-File-Upload/issues/3716

blueimp commented 3 years ago

Please see #2190

blueimp / jQuery-File-Upload

I got .fileupload is not a function error in my laravel 8 app #3700