Have you checked your upload_max_filesize and post_max_size in yourphp.ini file?
Perhaps try uploading a small file and see if request()->file('video') is still null?
I am having trouble uploading files as part of a form Submit. Can someone take a quick peak?
Thanks!
Controller (this DD returns null):
public function update($channel, Video $video)
{
dd(request()->file('video'));
}
Form
<div class="panel panel-default" v-if="editing">
<div class="panel-heading">
<div class="level">
<input type="text" class="form-control" v-model="form.title">
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="control-label">Upload new video</div>
<input type="file" accept="video/*" @change="processFile">
<div class="control-label" style="margin-top: 2em;">Abstract</div>
<textarea class="form-control" rows="10" v-model="form.abstract"></textarea>
<div class="control-label" style="margin-top: 2em;">Body</div>
<textarea class="form-control" rows="10" v-model="form.body"></textarea>
</div>
</div>
<div class="panel-footer">
<div class="level">
<button class="btn btn-primary btn-xs level-item" @click="update">Update</button>
<button class="btn btn-xs level-item" @click="resetForm">Cancel</button>
</div>
</div>
</div>
Vue
<script>
import Comments from '../components/Comments.vue';
import SubscribeButton from '../components/SubscribeButton.vue';
import WatchedButton from '../components/WatchedButton.vue';
import player from '../components/Player.vue';
export default {
props: ['video'],
components: { Comments, SubscribeButton, player, WatchedButton },
data() {
return {
commentsCount: this.video.comments_count,
locked: this.video.locked,
title: this.video.title,
body: this.video.body,
form: {},
editing: false,
file: {}
};
},
created () {
this.resetForm();
},
methods: {
toggleLock() {
let uri = `/locked-videos/{$this.video.slug}`;
axios[this.locked ? 'delete' : 'post'](uri);
this.locked = ! this.locked;
},
update() {
let uri = `/videos/${this.video.channel.slug}/${this.video.slug}`;
let formData = new FormData();
formData.append('title', this.form.title)
formData.append('abstract', this.form.abstract)
formData.append('body', this.form.body)
formData.append('video', this.file)
axios.patch(uri, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(() => {
this.editing = false;
this.title = this.form.title;
this.body = this.form.body;
flash('Updated!')
});
},
resetForm() {
this.form = {
title: this.video.title,
abstract: this.video.abstract,
body: this.video.body
};
this.editing = false;
},
processFile(e) {
if (!e.target.files.length) return;
this.file = e.target.files[0];
}
}
}
</script>
I solved it. I believe this is a bug in the Symphony framework. Apparently it has issues accepting multipart form data through a patch request. (I'm on Laravel 5.5, maybe its fixed in later versions? I have not checked).
Details here: https://github.com/laravel/framework/issues/13457
Fix was to post it, and pass the patch as the _method:
formData.append('_method', 'PATCH');
Please or to participate in this conversation.