OctoberCMS Frontend file upload not adding file but adding database entry - php

Question

I have edited the Rainlab User plugin to allow for the user to upload a file on the frontend attached to their user profile. Works in the backend but not working on the frontend.
Inside User.php Model
public $attachOne = [
'avatar' => 'System\Models\File',
'id_document' => 'System\Models\File'
];
/**
* #var array The attributes that are mass assignable.
*/
protected $fillable = [
'name',
'surname',
'login',
'username',
'email',
'password',
'password_confirmation',
'created_ip_address',
'last_ip_address',
'id_document'
];
Inside Account.php Component
public function onSubmit()
{
if (!$user = $this->user()) {
return;
}
$data = post();
if ($this->updateRequiresPassword()) {
if (!$user->checkHashValue('password', $data['password_current'])) {
throw new ValidationException(['password_current' => Lang::get('rainlab.user::lang.account.invalid_current_pass')]);
}
}
if (Input::hasFile('avatar')) {
$user->avatar = Input::file('avatar');
}
if (Input::hasFile('id_document')) {
$user->id_document = Input::file('id_document');
}
$user->fill($data);
$user->save();
/*
* Password has changed, reauthenticate the user
*/
if (array_key_exists('password', $data) && strlen($data['password'])) {
Auth::login($user->reload(), true);
}
Flash::success(post('flash', Lang::get(/*Settings successfully saved!*/'rainlab.user::lang.account.success_saved')));
/*
* Redirect
*/
if ($redirect = $this->makeRedirection()) {
return $redirect;
}
$this->prepareVars();
}
Inside update.htm component
<form data-request="onSubmit" data-request-files data-request-flash>
<input type="hidden" name="_handler" value="onSubmit">
{{ form_token() }}
{{ form_sessionKey() }}
<div class="form-group">
<label for="accountName">Full Name</label>
<input name="name" type="text" class="form-control" id="accountName" value="{{ user.name }}">
</div>
<div class="form-group">
<label for="accountEmail">Email</label>
<input name="email" type="email" class="form-control" id="accountEmail" value="{{ user.email }}">
</div>
<div class="form-group">
<label for="accountEmail">ID Document</label>
<input type="file" name="id_document">
</div>
<div class="form-group">
<label for="accountEmail">Avatar</label>
<input type="file" name="avatar">
</div>
<button type="submit" class="btn btn-default">Save</button>
</form>
Result in system_files table when I submit the form
Database return
How do I make sure it adds all needed details in order to upload the file. Even the storage does not reflect the file on upload.