I have made a Media Library in Laravel 8 app which users can upload their pictures.
Here is the blade that retreives information of uploaded assets in a table:
<table class="table table-hover">
<tr>
<th>Number</th>
<th>Name</th>
<th>Volume</th>
<th>Suffix</th>
<th>Links</th>
</tr>
@foreach($memes as $meme)
@php($menuCounter = 0)
<tr>
<td>{{ ++$menuCounter }}</td>
<td>{{ $meme->name }}</td>
<td>{{ $meme->size }}</td>
<td>{{ $meme->extension }}</td>
<td></td>
</tr>
@endforeach
</table>
The table works fine but there is a column named Link which should show a button and whenever someone clicks on it, it should copy the path of image with the url of website (written in .env
file as APP_URL
) into clipboard.
So in order to do that, I added this:
<button class="btn btn-primary copy-btn" data-path="{{ storage_path('app/public/' . $meme->path) }}">Copy Path</button>
And this is the script for copying:
const copyButtons = document.querySelectorAll('.copy-btn');
const appUrl = "{{ config('app.url') }}";
const storageUrl = "{{ asset('storage') }}";
copyButtons.forEach(button => {
button.addEventListener('click', () => {
const path = button.getAttribute('data-path');
const fullPath = appUrl + storageUrl + '/' + path.replace(/\/g, '/');
const tempInput = document.createElement('input');
tempInput.setAttribute('value', fullPath);
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
alert('Image path copied to clipboard!');
});
});
But this is wrong since it copies the url of image like this:
http://localhosthttp://localhost:8000/storage/C:/xampp/htdocs/projectname/root/storage/app/public/media/png/1684132151.png
While it should be something like this:
http://localhost/storage/media/png/1684132151.png
So how to adjust the correct url for copying into clipboard using this button?
2
Answers
Replace
with
This will give you absolute URL!
You have appUrl which gives you
http://localhost
. And also you have storageUrl which giveshttp://localhost/storage
.And your
storage_path('app/public/' . $meme->path)
gives you absolute system path (location) to your file.I suggest just doing meme path and storage url: