Drag & Drop file upload automatically

Question

Here is my code:

        // first case
        $('.drop-files-container').on('drop dragdrop',function(e) {
            var files = e.originalEvent.dataTransfer.files;
            processFileUpload(files);
            return false;
        });

        // second case
        $('#files').on('change',function(e) {
            var files = e.originalEvent.dataTransfer.files;
            processFileUpload(files);
            return false;
        });

        function processFileUpload(droppedFiles) {
            alert('send ajax call');
        }

        $('.drop-files-container').on('dragenter',function(event){
            event.preventDefault();
            $(this).css('background','#f1f1f1');
        })
        $('.drop-files-container').on('dragover',function(event){
            event.preventDefault();
        })

        html, body{
            height: 100%;
        }
        .drop-files-container{
            display: block;
            border: 2px dashed #aaa;
            width: 550px;
            padding: 60px 0px;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 60px;
            line-height: 2;
            color: #999;
            text-align: center;
            cursor: pointer;
        }
        .drop-files-container:hover{
            background-color: #f1f1f1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="yourregularuploadformId" action="#">
        <div>
            <label for="files" class="drop-files-container">Drag .txt File Here</label>
            <input id="files" type="file" name="files[]" style="visibility:hidden;" multiple="multiple">
        </div>
    </form>

I need to execute processFileUpload(droppedFiles) function in two cases. Either when a file is dragged in .drop-files-container area or when a file is selected by "choose a file window" (when you click on that area, mentioned window will be open).

As you see, my code works for first case (drag and drop) as well, but it doesn't work for second one (choose a file window). It throws this error:

"Uncaught TypeError: Cannot read property 'files' of undefined"

How can I fix it?

Lucky · Accepted Answer · 2016-11-05 07:01:37Z

You can try this,

var files = $(this)[0].files;

for your second block.

You can also use

var files = evt.target.files;

or

var files = document.getElementById('files').files;

Refer these links,

        // first case
        $('.drop-files-container').on('drop dragdrop',function(e) {
            var files = e.originalEvent.dataTransfer.files;
            processFileUpload(files);
            return false;
        });

        // second case
        $('#files').on('change',function(e) {
            var files = $(this)[0].files;
            processFileUpload(files);
            return false;
        });

        function processFileUpload(droppedFiles) {
            alert('send ajax call');
        }

        $('.drop-files-container').on('dragenter',function(event){
            event.preventDefault();
            $(this).css('background','#f1f1f1');
        })
        $('.drop-files-container').on('dragover',function(event){
            event.preventDefault();
        })

        html, body{
            height: 100%;
        }
        .drop-files-container{
            display: block;
            border: 2px dashed #aaa;
            width: 550px;
            padding: 60px 0px;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 60px;
            line-height: 2;
            color: #999;
            text-align: center;
            cursor: pointer;
        }
        .drop-files-container:hover{
            background-color: #f1f1f1;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="yourregularuploadformId" action="#">
        <div>
            <label for="files" class="drop-files-container">Drag .txt File Here</label>
            <input id="files" type="file" name="files[]" style="visibility:hidden;" multiple="multiple">
        </div>
    </form>

@stack Glad. Now you can accept my answer if it solved your problem.

Collectives™ on Stack Overflow

Drag & Drop file upload automatically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related