Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

theUnforgiven's avatar

Vapor uploading files

Hi all,

I have my AWS all setup in .env and Vapor deploy all works etc. But I have a new Vue component, to upload files.

<template>
    <div class="mt-2 mb-2 mr-2">
        <input type="file" id="file" ref="file" @change="upload" class="form-control">
        <div v-if="isUploaded">
            <div class="alert alert-success">File uploaded successfully</div>
        </div>
    </div>
</template>

<script>
    export default {

        data() {
            return {
                isUploaded: false,
            }
        },

        methods: {
            upload() {
                Vapor.store(this.$refs.file.files[0], {
                    progress: progress => {
                        this.uploadProgress = Math.round(progress * 100);
                    }
                }).then(response => {
                    console.log(response)
                    axios.post('/api/file/upload', {
                        uuid: response.uuid,
                        key: response.key,
                        bucket: response.bucket,
                        name: this.$refs.file.files[0].name,
                        content_type: this.$refs.file.files[0].type,
                    })

                    this.isUploaded = true;
                });
            }
        }
    }
</script>

But I'm seeing these errors and not sure why, as I have followed the Vapor docs.

Any help greatly appreciated

cc @themsaid

0 likes
9 replies
theUnforgiven's avatar

@kickinbrain I have the following in the bootstrap.js file

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    'X-Requested-With': 'XMLHttpRequest'
};

Which by my understanding should take care of CSRF?

bobbbbb's avatar

Might need to add a CORS policy to your bucket

theUnforgiven's avatar

@bobbbbb I'm not sure that is the issue as I have the API keys set within the env and also setup to connect to AWS via Vapor depolyments.

tinfoilman's avatar

The error says blocked by the CORS policy. You need to allow each method on the bucket. I seem to remember doing something like this when I originally setup my vapor deployment.

Log into your AWS account, go to S3, find the bucket being used by vapor, click on the "Permissions" tab, then the "CORS Policy" button.

The CORS configuration editor will appear and I believe it should look identical to mine:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Please or to participate in this conversation.