How do I store files in vue.js?

Question

I want to store image files and video files but the data is showing Blob.

The video file and image file displays as soon as uploaded which is cool.

Please, I'm not sure the code below is okay: how can I work around that? I'm using VueJs and Laravel.

Also, the reset method I called on the addMessage is not allowing subsequent adding of another file. Don't know if it is the write place to call it.

Below is my script in vue.

<script>
import { Datetime } from 'vue-datetime';

export default {
    components: { Datetime },

    data() {
        return {
            //messages: [],
            text: '',
            imageUrl: '',
            imageBlob: '',
            videoUrl: '',
            videoBlob: '',
            startTime: '',
            endTime: '',
        }
    },

    methods: {
        reset(){
            this.text = '';
            this.imageUrl = '';
            this.imageBlob = '';
            this.videoUrl = '';
            this.videoBlob = '';
            this.startTime = '';
            this.endTime = '';
        },

        refreshImage() {
            let comp = this;
            this.readObjectUrl($('#input-image').get(0), function (url, blob) {
                comp.imageUrl = url;
                comp.imageBlob = blob;
            });
        },

        refreshVideo() {
            let comp = this;
            this.readObjectUrl($('#input-video').get(0), function (url, blob) {
                comp.videoUrl = url;
                comp.videoBlob = blob;
                comp.playVideo(url);
            });
        },

        playVideo(url) {
            let video = $('#video-preview').get(0);
            video.preload = 'metadata';
            // Load video in Safari / IE11
            if (url) {
                video.muted = false;
                video.playsInline = true;
                video.play();
            }
        },

        addMessage() {
            this.$emit('added-message', this);
            this.reset();

        },

        // Read a file input as a data URL.
        readDataUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    callback(fileReader.result);
                };
                fileReader.readAsDataURL(input.files[0]);
            }
            else {
                callback(null);
            }
        },

        // Read a file input as an object url.
        readObjectUrl(input, callback) {
            if (input.files && input.files[0]) {
                let fileReader = new FileReader();
                fileReader.onload = function () {
                    let blob = new Blob([fileReader.result], {type: input.files[0].type});
                    let url = URL.createObjectURL(blob);
                    callback(url, blob);
                };
                fileReader.readAsArrayBuffer(input.files[0]);
            }
            else {
                callback(null);
            }

        },

    }

}

All the fields are working except the files.

Thanks for the assistance.

Answer 1

I am not quite sure what you actually want to achieve but you can make use of Laravel - Storage to save files.

Add a axios post method in your vue.js File and send the uploaded files. Then save it in the controller with storage.

Example

• Put input fields in a html <form name='imageForm'>

• Create folder storage/app/images

In Vue

let form = document.forms.namedItem('imageForm');
let formData = new FormData(form);

axios.post('/uploads', formData)
        .then(response => {
            console.log('success')
        })

In your controller

public function store(Request $request) {
        // Validate file upload
        $this->validate($request, [
            'image' => 'required|file'
        ]);

        // Define a name for the file with the correct extension
        $fileExt = $request->image->extension();
        $imageName = "SampleImage" . $fileExt;

        // Save file in storage
        $imagePath = $request->image->storeAs('images', $imageName);

        // Save file name in database to fetch it later (Order 1 in this example)
        $currentOrder = Order::find(1);
        $currentOrder->image = $imageName;
        $currentOrder->save();
    }

Define a route with wildcard (for example /uploads/{{image}}

And then use the following controller method to fetch it

public function show($image) {
        return Storage::disk('local')->get('images/' . $image);
    }

Let me know if this helps you!