Uploading files using axio and laravel returning tmp name instead of real fine name

i'm working on a file uploader using axio, vue and laravel his is my migrate

    public function up()
    {
        Schema::create('cloudfolders', function (Blueprint $table) {
            $table->increments('id');
            $table->uuid('uuid')->nullable();
            $table->string('name');
            $table->string('type')->default('image');
            $table->string('downloads')->nullable();
            $table->integer('user_id');
            $table->timestamps();
        });
    }

i have a file uploader on vue component

                  <form method="POST" enctype="multipart/form-data" @submit.prevent="handleFileUpload">

                    <input type="file" id="file" ref="myFiles" @change="selectedFile">

                    <span v-if="uploadedFile"> {{uploadedFile.name}}</span>

                    <div class="mt-4 mb-4">

                      <button class="linx-btn hover:border-blue hover:text-blue focus:bg-grey-lightest" type="submit" 

                        style="outline: none;" 

                        :class="isDisabled ? 'disabled' : ''"

                        :disabled="isDisabled"

                        >

                        Upload File

                      </button>


                  </form>

in same component i have the function to upload the file

<script>

import {mapState} from 'vuex'

    export default {

        name: 'ImageUploader',

        data () {

            return {

                gallery:false,

                fullURL : '/media/default/placeholder.png',

                filename : '',

                errors:[],

                isDisabled  : false,

                uploadedFile : '',

            }

        },


methods:{

handleFileUpload : function(index){

    this.isDisabled = true

    let formData = new FormData();

    formData.append( 'file', this.uploadedFile);

    console.log(this.uploadedFile);

    axios.post( 'api/uploadphotos',

      formData,

      {

        headers: {

            'Content-Type': 'multipart/form-data'

        }

      }

    ).then( response => {

      this.$store.dispatch('addPhoto', response.data);
  
      this.name = '';
  
      Event.$emit('requestAlertSuccess');

    })

    .catch( error => {

        if (error.response.status == 422) {

          this.isDisabled = false;

          this.errors = error.response.data.errors;

          Event.$emit('requestAlertSuccess');

        }

    });

    this.isDisabled = false;

    event.target.reset();

    this.errors = '';

},
}

</script>

the controller on laravel (api/uploadphotos)

    public function uploadphotos(Request $request)
    {
        
        $request->validate([

            'file' => 'required|image|mimes:jpeg,png,jpg,gif|max:25000',

        ]);
        
        $image = new Cloudfolder();
        
        $image->uuid = (string) Str::uuid();
        $image->name = $request['file'];
        $image->type = 'image';
        $image->downloads = 0;
        $image->user_id = Auth::id();
        $image->save();

        $lastFile = Cloudfolder::orderBy('id', 'desc')->first();
        return $lastFile;        
        
    }

with implementation above I'm not being able to get the file name instead i'm getting this

/private/var/folders/gn/zn5r8k1d1yxdpz0r0kx0453h0000gn/T/phpHbIKEe

what seems to be the problem ????