Jquery fileupload problem using blueimp plugin

Question

Developing a laravel web app, and I am trying to use blueimps file upload which is available here : https://github.com/blueimp/jQuery-File-Upload I am getting an error which I am struggling to sort out.

 jquery-3.3.1.min.js:2 Uncaught TypeError: $(...).fileUpload is not a 
 function
    at HTMLDocument.<anonymous> (createappeal-step4:94)
    at l (jquery-3.3.1.min.js:2)
    at c (jquery-3.3.1.min.js:2)

So far I have tried using the jquery CDN, The Jquery provided by blueimp. Copy pasted his code directly, to ensure I didn't have a typo.

<!--Js Here-->
<!--Jquery js-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!--Ajax Popper js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!--Bootstrap js-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--Upload ajax
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-xBuq/xzmlsLoJpyjoggmTez8OWUFM0/RC5BsqQBDX2v5cMvDHcMvDHcMakNTNrHIW2I5f" crossorigin="anonymous"></script>-->
<script src="{{ asset("/assets/js/jquery.fileupload.js")}}" type="javascript/text"></script>
<script src="{{ asset("/js/vendor/jquery.ui.widget.js")}}" type="javascript/text"></script>
<script src="{{asset("/js/jquery.iframe-transport.js")}}" type="javascript/text"></script>
<script>
    $(document).ready(function() {
        $('#fileupload').fileUpload({
            datatype: 'json',
            done: function (e,data){
                $.each(data.result.files, function(index,file){
                    $('<p/>').text(file.name).appendTo(document.body);
                });
            },
            progressall: function(e,data){
                var progress=parseInt(data.loaded / data.total * 100, 10);
                $('#progress.bar').css(
                    'width',
                    progress + '%'
                );
            }
        });
    });
</script>

Answer 1

I managed to fix this problem myself. Not sure why the including js files was not working but deleting and retyping got them to load successfully. Also the js files had to be in particular order (see below)

<script src="{{ asset ("/assets/js/vendor/jquery.ui.widget.js") }}"></script>
<script src="{{ asset ("/assets/js/jquery.iframe-transport.js") }}"></script>
<script src="{{ asset ("/assets/js/jquery.fileupload.js") }}"></script>