Ajax formdata file upload with progress percent

Question

I got the same code but I'm am getting this kind error:

Uncaught TypeError: Cannot read property '0' of undefined at HTMLInputElement. (upload.js:18) at HTMLInputElement.dispatch (jquery-3.3.1.slim.min.js:2) at HTMLInputElement.v.handle (jquery-3.3.1.slim.min.js:2)

This is my code:

$(document).ready(function(){
    $('.upload-btn').on('click', function(){
        $('#upload-input').click();

        $('.progress-bar').text('0%');
        $('.progress-bar').width('0%');
    });

    $('#upload-input').on('change', function(){
        var uploadInput = $('#upload-input').val();

        if(uploadInput != undefined){
        //    var form = $('form')[0];// You need to use standard javascript object here

            var formData = new FormData();
            console.log(uploadInput[0]);
            
            formData.append('upload', uploadInput[0].files[0]).val();

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    uploadInput.val('');
                },

                xhr: function(){
                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener('progress', function(e){
                        if(e.lengthComputable){
                            var uploadPercent = e.loaded / e.total;
                            uploadPercent = (uploadPercent * 100);

                            $('.progress-bar').text(uploadPercent + '%');
                            $('.progress-bar').width(uploadPercent + '%');

                            if(uploadPercent == 100){
                                $('.progress-bar').text('Completed');
                                $('#completed').text('File Uploaded');
                            }
                        }
                    }, false);

                    return xhr;
                }
            })
        }
    })
})

<div class="row">
  <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar"></div>
  </div>   
  <button class="btn btn-success btn-md upload-btn" type="button">Upload File</button>
  <input type="file" class="form-control" name="upload" id="upload-input" style="display: none;">
</div>

Answer 1

Your code have many errors

var uploadInput = $('#upload-input').val();

1. You are selecting file path, not <input> tag change it: var uploadInput = $('#upload-input');

2. This is wrong Syntex formData.append('upload', uploadInput[0].files[0]).val(); Change it: formData.append('upload', uploadInput[0].files[0]);

Working code:

$(document).ready(function(){
    $('.upload-btn').on('click', function(){
        $('#upload-input').click();

        $('.progress-bar').text('0%');
        $('.progress-bar').width('0%');
    });

    $('#upload-input').on('change', function(){
        var uploadInput = $('#upload-input');

        if(uploadInput != undefined){
        //    var form = $('form')[0];// You need to use standard javascript object here

            var formData = new FormData();
            console.log(uploadInput[0]);

            formData.append('upload', uploadInput[0].files[0]);

            $.ajax({
                url: '/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data){
                    uploadInput.val('');
                },

                xhr: function(){
                    var xhr = new XMLHttpRequest();

                    xhr.upload.addEventListener('progress', function(e){
                        if(e.lengthComputable){
                            var uploadPercent = e.loaded / e.total;
                            uploadPercent = (uploadPercent * 100);

                            $('.progress-bar').text(uploadPercent + '%');
                            $('.progress-bar').width(uploadPercent + '%');

                            if(uploadPercent == 100){
                                $('.progress-bar').text('Completed');
                                $('#completed').text('File Uploaded');
                            }
                        }
                    }, false);

                    return xhr;
                }
            })
        }
    })
})