Undefined index when using dropzone.js

  html, javascript, php

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>
        <h3>Drop files here or click to upload.</h3>
    <div class="fallback">
        <input type="file" name="file" accept="image/*" required>

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


                                                    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"});

Source: Ask Javascript Questions