stack stack - 1 month ago 11
CSS Question

Drag & Drop file upload automatically

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?

Answer

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>