coderego's avatar

File Uploads with Axios - Having Trouble

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>
0 likes
5 replies
matt_panton's avatar

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?

coderego's avatar

Tried, no dice. Good idea though.

I have the same.file upload working appropriately using a normal html form

matt_panton's avatar

I assume you've done a console.log(this.file) just before making the axios request to check it's not null for some reason?

The only other thing I can think of is that whenever I've used axios to upload files, I've never had to set the Content-Type header so maybe remove that and give it a go

coderego's avatar

Yeah I have, it is not null. Tried removing the content-type, still nothing.

coderego's avatar
coderego
OP
Best Answer
Level 6

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');
2 likes

Please or to participate in this conversation.