Laravel upload file with unique file name

MediaController.php

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class MediaController extends Controller
{

    /**
     * Upload image
     */
    public function upload(Request $request)
    {	
		if($request->hasFile('media_file')){
			$theFile = $request->file('media_file');
			if($theFile->isValid()){
				$folder = 'images';
				$disk = Storage::disk('public');
				$uniqueFilename = $this->uniqueMediaName($theFile, $folder, $disk);
				$path = $theFile->storeAs($folder, $uniqueFilename, 'public');
				$fileurl = $disk->url($path);
				return response()->json(['fileurl' => $fileurl], 201);
			}else{
				return response()->json(['error' => 'No file uploaded'], 400);
			}
		}else{
			return response()->json(['error' => 'No file'], 400);
		}
	}// upload

	/**
	 * Generate unique file name
	 */
	public function uniqueMediaName($theFile, $folder, $disk)
	{
		$filename = $theFile->getClientOriginalName();
		$extension = $theFile->getClientOriginalExtension();

		$i = 1;
		$basename = basename($filename, '.' . $extension);
		$output = $folder.'/'.$filename;
		while($disk->exists($output)){
			$output = $folder .'/'. $basename .'-'. $i . '.' . $extension;
			$i++;
		}
		return basename($output);
	}//uniqueMediaName

}

UoloadComponent.vue

<template>
    <div class="container">
        <div class="card">
            <header class="card-header">
                <p class="card-header-title">
                    File Picker
                </p>
            </header>

            <div class="card-content">
                <div>
                    <div v-if="getDropItem">
                        <!-- Image List will be here -->
                    </div>

                    <div v-else>
                        <div @dragenter="highlightDropzone = true"
                            :class="{'highlight-dropzone': highlightDropzone}"
                            @dragleave="highlightDropzone = false"
                            @dragover.prevent
                            @drop.prevent="dropMethod($event)" class="file-dragzone">
                            <p>Drop your file here to upload.</p>
                        </div>
                    </div>
                </div>

            </div> <!-- /.card-content -->
        </div>
    </div>
</template>

<script>
    export default {
        data: () => ({
            highlightDropzone: false,
            getDropItem: false,
            dragged: null
        }),
        methods: {
            dropMethod(event){
                this.highlightDropzone = false;
                this.getDropItem = true;
                
                var dt = event.dataTransfer;
                if(dt.files.length){
                    var dropItems = dt.files;
                    for(var i=0; i < dropItems.length; i++){
                        let form = new FormData();
                        form.append('media_file', dropItems[i]);
                        axios.post('/upload', form).then(function(reseponse){
                            console.log(reseponse);
                        }).catch(function(error){
                            console.log(error);
                        });
                    }// End for
                }// End if
            } // dropMethod
        }// methods
    }
</script>

web.php

<?php

// We must use post request
Route::post('/upload', 'MediaController@upload');