[Vuejs]-How to properly upload file from vue to laravel?

by

0👍

✅

Ok, finally i figured out was wrong. I changed this code in my createProject in my Store.js:

let formData = new FormData()
        formData.append('preview', preview)
        console.log(formData);
        axios.get('/sacntum/csrf-cookie').then(response => {
            axios.post('api/create', {
                name: name,
                description: description,
                preview: formData,
            }, {
                headers: {
                    'content-type': 'multipart/form-data',
                }
            })

To this:

let formData = new FormData()
        formData.append('name', name)
        formData.append('description', description);
        formData.append('preview', preview)
        console.log(preview);
        axios.get('/sacntum/csrf-cookie').then(response => {
            axios.post('api/create', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })

I passed the formdata object with the photo separately with the other parameters, although I should have put all the parameters in formdata.

Thanks everyone who tried to help. @Nothingbutageek I think it’s not necessary to write custom rules for the photo unless you need some specific validation or specific error response, although if you need specific error response you can use form request validation.

0👍

Use the below code in the controller

    $photo = $request->file('image');
    $imagename = time() . '.' . $photo->getClientOriginalExtension();        
    
    // Add Normal Image...
    $destinationPath = public_path('uploads');
    $photo->move($destinationPath, $imagename);

    echo '<pre>';
    print_r("Upload Successfully. Store File : laravel_code/public/uploads & laravel_code/public/uploads/thumbnail_images");

0👍

In order to validate a file on laravel request you will need to write a custom validation.
https://laravel.com/docs/10.x/validation#custom-validation-rules

The passes function should be something like this

public function passes($attribute, $value): bool
{
    $extension = strtolower($value->getClientOriginalExtension());

    return in_array($extension, ["jpg", "jpeg", "png", "pdf"]);
}

The function above only controls the mime types, you can add whichever validation you wish in this function

Leave a comment