Upload File with ajax PHP Vuejs - php

Question

Hey everyone Im trying to upload a file with ajax. I am also passing an username to get inserted into a database. In previous forms I've been using vuejs to run a fiction on submit rather than actually submitting the form with php. As I json encode everything and it requires no refresh.
heres my form the problem is I cant get the file upload to work.
<div id="app">
<form role="form" onsubmit="return false">
<div class="form-group">
<label>Username</label>
<input type="text" placeholder="Username" v-model="userName" name="userName" class="form-control>
</div>
<div class="form-group">
<label>File</label>
<input type="file" #change="processVideoFile($event)" id="uploadVideoFile">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
userName: '',
uploadVideoFile:''
methods: {
processVideoFile: function() {
this.uploadVideoFile=$('#uploadVideoFile').val();
},
addTemplate: function(){
this.sub=true;
var jsonString = JSON.stringify({
uploadVideoFile: this.uploadVideoFile,
userName: this.userName
});
if(this.userName!=''){
$.ajax({
url: 'addTemplateBackend.php',
dataType: 'json',
type: 'post',
contentType: 'application/json',
dataType: 'json',
data: jsonString,
error: function(data){
alert('error');
},
success: function(data){
console.log(data);
alert('success');
}.bind(this)
});
}
},
}
});
</script>
add templates backend
<?php session_start(); ob_start();
require_once('database.php');
$requestBody = file_get_contents('php://input');
$requestJSON = json_decode($requestBody);
$data=json_encode($requestJSON);
echo $data;
move_uploaded_file($requestJSON->uploadVideoFile, 'www.somesite.com/braiden/braintree/');
?>