Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I applied php artisan storage:link.
filesystems.php
'links' => [
public_path('storage') => storage_path('app/public'),
],
prayer variable:
[
{
"id": 1,
"value": "uploads/Ice Spice & Nicki Minaj - Princess Diana (Official Music Video) (1).mp3"
},
{
"id": 2,
"value": "uploads/Stres x Anuryh x Boier Bibescu x Shift - Fast Life Videoclip Oficial.mp3"
},
{
"id": 3,
"value": "uploads/prayer.mp3"
}
]
Files are stored inside storage/app/public/uploads.
Inside Vue Component:
<li v-for="prayer in prayers" :key="prayer.id">
<div class="w-1/6">
<audio controls :src="prayer.value" ></audio>
</div>
</li>
i think you are missing a subfolder in the mp3 path (value), try changing it from:
"value": "uploads/Ice Spice & Nicki Minaj - Princess Diana (Official Music Video) (1).mp3"
to
"value": "storage/uploads/Ice Spice & Nicki Minaj - Princess Diana (Official Music Video) (1).mp3"
i added the storage/ to the beginning of the path
how do you generate those urls?
@s4muel URLs are returned from Laravel API. Added storage/ but still does not fix it.
@floreap but is it at least correct? if you open it manually in browser, which one works? (with or without storage/), try using full url instead
i get that from laravel, but how? do you use Storage::url(...) helper? https://laravel.com/docs/11.x/filesystem#file-urls probably not, it just prepends the storage automatically for local driver
I would also suggest that you remove any and all spaces in your filenames, they usually makes things more complicated.
uploads/Ice Spice .... this file path will not work from Vue part. You need the full url.
You should pass the path to front-end like
Storage::url($yourPath); // Get full path.
Made it work finally! Weird is that php artisan storage:link, respectively php artisan storage:unlink doesn't affect at all filesystem.php. I ignored /storage directory and uploaded files in the /public directory.
Controller:
public function index() {
// Get all files in the specified directory
$directory = public_path('uploads');
$files = File::files($directory);
// Initialize an array to hold the URLs
$filesUrls = [];
// Iterate through the files and generate their URLs
foreach ($files as $file) {
// Get the relative path of the file
$relativePath = $file->getRelativePathname();
// Generate the full URL
$url = Storage::url($relativePath);
// Add the URL to the array
$filesUrls[] = $url;
}
// Return the array of URLs
$filesUrls = array_map(function($url) {
return str_replace('storage', 'uploads', $url);
}, $filesUrls);
return $filesUrls;
}
public function store(Request $request)
{
$request->validate([
'file' => 'required|mimes:mp3|max:15000',
]);
// Retrieve the uploaded file
$file = $request->file('file');
$fileName = $file->getClientOriginalName();
$destinationPath = public_path('uploads');
$file->move($destinationPath, $fileName);
$fileUrl = asset('uploads/' . $fileName);
// Return a response with the file URL
return response()->json(['url' => $fileUrl], 200);
}
Vue component:
<li v-for="prayer in prayers">
<div class="w-1/6">
<audio controls :src="prayer" ></audio>
</div>
</li>
Please or to participate in this conversation.