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

AydenWH's avatar

Laravel 5.4 - Upload Files with Axios

May I know how to upload files by using Axios?

I want to upload an image to storage/app/public/logo whenever users submit the form with other relevant details.

Whenever I pass all the value to controller by using Axios, $request->file('logo')->store('logo') shows Call to a member function store() on null

SOLUTION

add.js

const vue = new Vue({

    ...

    methods: {
        createItem() {
            axios.defaults.headers.common["X-CSRF-TOKEN"] = document
                .querySelector('meta[name="csrf-token"]')
                .getAttribute("content");

            let formData = new FormData();

            formData.append('name', this.create.name);
            formData.append('email', this.create.email);
            formData.append('website', this.create.website);
            formData.append('address', this.create.address);
            formData.append('postcode', this.create.postcode);
            formData.append('logo', document.getElementById('logo').files[0]);

            axios
                .post("/api/company/add", formData)
                .then(response => {
                    if (response.data.result === true) {
                        toastr.success(this.create.name + " added successfully");
                    } else {
                        toastr.danger("Failed to create new company");
                    }
                })
                .catch(response => {});
        },
    }
}).$mount("#company");

Controller.php

public function store(Request $request)
{
$this->validate($request, [
    'image' => 'image64:jpeg,jpg,png',
    'name' => 'required',
    'email' => 'required',
    'website' => 'required',
    'address' => 'required',
    'postcode' => 'required'
]);

$result = Company::create([
    'logo' => $request->logo,
    'name' => $request->name,
    'email' => $request->email,
    'website' => $request->website,
    'address' => $request->address,
    'postcode' => $request->postcode
]);

if ($result) {

    if ($request->hasFile('logo') && $request->file('logo')->isValid()) {
        $request->file('logo')->store('logos');
    }

    return ['result' => true];

} else {
    return ['result' => false];
}
0 likes
4 replies
tekmi's avatar

@tyris I think you actually may not send your images properly via Axios.

Did you try to use https://developer.mozilla.org/en-US/docs/Web/API/FormData when you build your key/values to be sent to server?

I found one example from Axios repository that may be useful: https://github.com/mzabriskie/axios/blob/master/examples/upload/index.html#L27

Or there is also some package on NPM: https://github.com/AshikNesin/axios-fileupload/blob/master/index.js

Good luck!

StefanJanssen's avatar
Level 1

Some code from my portfolio project for when you need more examples:

ManageCovers.vue

      sendForm(){
        const fileInput = document.querySelector( '#image-upload' );
        const formData = new FormData();
        formData.append( 'image', fileInput.files[0] );
        formData.append( 'name', this.name );
        this.axios.post( 'admin/blog/cover', formData )
        .then( ( response ) => {
          this.message = `Cover (name: ${this.name}) has been added`;
          this.name = '';
          fileInput.value = null;
          this.covers.push( response.data );
        } )
        .catch( ( error ) => {
          this.message = error.error;
        } );
      }

ManageCovers.html

<form class="cover__form" id="form">
    <label for="name">Name:</label>
    <input class="input" type="text" id="name" placeholder="Name" v-model="name">

    <input class="input" type="file" id="image-upload">

    <input class="input button btn--success" type="button" value="Add Cover" @click="sendForm()">
  </form>

It might not be the cleanest code out there but you might be able to learn something from it.

2 likes
AydenWH's avatar

@StefanJanssen

Thanks for your help. I managed to solve the issue and updated my question with solution.

juansebas257's avatar

Thank you very much, I was missing the .files[0] in the file input

Please or to participate in this conversation.