Dropzone function is not working under jQuery in Mac OS

Question

I am using dropZone to drag and upload files but somehow it's not working. I am in Mac OS. I have given 777 permission to the uploaded folder, but still, it's not uploading. Here is my code:

$(document).on('change','#type',function(){
      var type = $('#type').val();
      var course = $('#course').val();
      alert(type); alert(course);
      if(type != "" && course!= ""){
        $('#file_upload').show();
        Dropzone.options.dropzoneForm = {
            paramName: "uploadMultiple",
            maxFilesize: 5,
            dictDefaultMessage: "<strong>Drop files here or click to upload. </strong></br>",
            acceptedFiles: type,
            renameFile: 'course',
            url: "../files/course/"+course+"/",
            init: function () {
              this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                  alert('File Uploaded');
                }
              });
            }
        };
      } else {
        $('#file_upload').hide();
      }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src ="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>
<select type="text" class="form-control" id="course" required>
      <option value="" selected disabled>Select Course</option>
      <option value="1">Development</option>
</select>

<select type="text" class="form-control" id="type" required>
      <option value="" selected disabled>Select File Type</option>
      <option value="application/pdf">PDF</option>
</select>
          
<div id="file_upload">          
  <form action="#" class="dropzone" id="dropzoneForm">
   <div class="fallback">
        <input name="file" type="file" multiple />
     </div>
 </form>
</div>

What am I doing wrong here?