Use Axios defaults in laravel vapor signed-storage-url

Question

Using Tymon jwt tokens for auth. Laravel works fine.

When using the upload to S3 code for Laravel vapor I cannot get the signed-storage-url to use my axios defaults:

axios.defaults.headers.common["Authorization"] = 'Bearer ' + token;

Store Method as shown in the docs:

Vapor.store(this.$refs.file.files[0], {
    progress: progress => {
        this.uploadProgress = Math.round(progress * 100);
    }
}).then(response => {
...

It calls this in the index.js of the npm package:

async store(file, options = null) {
        // want this to use my default header.
        const response = await axios.post('/vapor/signed-storage-url', {
            'bucket': options.bucket || '',
            'content_type': options.contentType || file.type,
            'expires': options.expires || ''
        });

Maybe something to do with the npm module not being in the correct scope.

I have overridden the vapor-core signed-storage-url controller to use the token and can get that to work no problem with Postman. It is calling Vapor.store that doesn't add the token to the axios call and I don't see a way to pass in the headers.

Edit: You can use these packages without signing up for Vapor.

composer require laravel/vapor-core

and

npm install --save-dev laravel-vapor

BobB BobB · Accepted Answer · 2019-10-25T05:58:43

SOLVED So to make this work I copied the async store method to my vue component methods and called it from there. Gets the default headers but ...

That created an axios header issue with S3 which is solved by doing this:

async store(file, options = null) {
            const response = await axios.post('/vapor/signed-storage-url', {
                'bucket': options.bucket || '',
                'content_type': options.contentType || file.type,
                'expires': options.expires || ''
            });

            if (typeof options.progress === 'undefined') {
                options.progress = () => {};
            }
// This is the fix for the headers. Instance just for the S3 PUT
            var instance = axios.create();
            instance.defaults.headers.common = {};
            const s3Response = await instance.put(response.data.url, file, {
                headers: response.data.headers,
                onUploadProgress: (progressEvent) => {
                    options.progress(progressEvent.loaded / progressEvent.total);
                }
            });

            response.data.extension = file.name.split('.').pop()

            return response.data;
        },

Thanks to https://github.com/axios/axios/issues/382#issuecomment-254712154

Use Axios defaults in laravel vapor signed-storage-url

1 Answers