VueJs Laravel Image Upload

Question

Like the title says, I'm trying to do an image upload from VueJs to a Laravel endpoint. I discovered that the only way(if there is another please tell me) is to send the base64 of the image through the request. On the Vue side I think everything is covered.

However, on the Laravel side is where it gets complicated. I can't decode the base64 string that gets passed, and when I try to store the image in my AWS S3 bucket, it doesn't store properly. Here is the code:

VueJS

<template>
<input type="file" name="image" class="form-control" @change="imagePreview($event)">
</template>

methods: {
    submitForm(){
        axios.defaults.headers.post['Content-Type'] = 'multipart/form-data';
        axios.post(this.$apiUrl + '/article', {
            image: this.image
        }).then(response => {
            flash(response.data.message, 'success');
        }).catch(e => {
            console.log(e);
        })
    },

    imagePreview(event) {
        let input = event.target;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            let vm = this;
            reader.onload = e => {
                this.previewImageUrl = e.target.result;
                vm.image = e.target.result;
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
}

Laravel:

    $this->validate($request, [
        'image' => 'required',
    ]);
    // return response()->json(base64_decode($request->image));

    $timestampName = microtime(true) . '.jpg';
    $url = env('AWS_URL') . '/article_images/' .$timestampName;

    Storage::disk('s3')->put($timestampName, base64_decode($request->image));

If I add the image validation rule, it says it's not an image..

I would also like to retrieve the extension if possible.

Answer 1

you can do it using FormData in JS part and use getClientOriginalExtension() on the file to get the extension in Laravel.

VueJS

imagePreview(event) {
    let selectedFile = event.target.files[0];
    vm.image = selectedFile;
}

submitForm(){
    let fomrData = new FormData();
    formData.append('image', vm.image);
    axios.post(this.$apiUrl + '/article', formData, {
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
            })
            .then(response => {
                 flash(response.data.message, 'success');
            })
            .catch(e => {
                console.log(e);
            });
}

Laravel

$this->validate($request, [
    'image' => 'required',
]);

$image = $request->file('image');

$extension = $image->getClientOriginalExtension(); // Get the extension
$timestampName = microtime(true) . '.' . $extension;
$url = env('AWS_URL') . '/article_images/' .$timestampName;

Storage::disk('s3')->put($url, file_get_contents($image));

Here is a link that might be useful

Hope that it helps.