javascript - Undefined index when using dropzone.js

one text

I'm making a file upload using dropzone.js. It's my first time using it so I don't really know what I'm doing.

So basically, when I use $_FILES["file"]["tmp_name"] it says that file is an undefined index. I tried removing dropzone.js to see if the problem is with dropzone.js so I tried it, and it works perfectly.

Here is my code:

<form action="#" id="frmFileUpload" class="dropzone" method="POST" enctype="multipart/form-data" style="padding-left: 0px; border-left-width: 0px!important;">
    <div class="dz-message" style="margin-bottom: 60px;">
        <div class="drag-icon-cph">
            <i class="material-icons">touch_app</i>
        </div>
        <h3>Drop files here or click to upload.</h3>
    </div>
    <div class="fallback">
        <input type="file" name="file" accept="image/*" required>
    </div>  

    <input class="btn btn-primary btn-lg waves-effect btn-block" name="update_pfp" type="submit" value="Submit" style="position: absolute; bottom: 0px;">
</form>

<?php

if (isset($_POST['update_pfp'])) {
    $file_path = '../images/profile_picture/';
    $unique_name = time().uniqid(rand());
    $destination = $file_path . $unique_name . '.png';
    $basename = basename($_FILES["file"]["name"]);
    $filename = $_FILES["file"]["tmp_name"];
    $file_type = strtolower(pathinfo($file_path . $basename, PATHINFO_EXTENSION));

    echo "<script>alert('".$filename."')</script>";

        move_uploaded_file($filename, $destination);

        $model->updateProfilePicture($basename, $unique_name);
}

?>

<script type="text/javascript">
$(function () {
    Dropzone.options.frmFileUpload = {
        paramName: 'file',
        acceptedFiles: 'image/*',
        thumbnailWidth: null,
        thumbnailHeight: null,
        init: function() {
            this.on("thumbnail", function(file, dataUrl) {
                $('.dz-image').last().find('img').attr({width: '100%', height: '100%'});
            }),
            this.on("success", function(file) {
                $('.dz-image').css({"width":"100%", "height":"auto"});
            })
        }
    };
});
</script>