Copying To Clipboard Of a File PATH in Laravel 8 NOT WORKING

Question

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?

Answer 1

const appUrl = "{{ config('app.url') }}";
const storageUrl = "{{ asset('storage') }}";    
const fullPath = appUrl + storageUrl + '/' + path.replace(/\\/g, '/');

You have appUrl which gives you http://localhost. And also you have storageUrl which gives http://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:

<button class="btn btn-primary copy-btn" data-path="{{ $meme->path }}">Copy Path</button>
const fullPath = storageUrl + '/' + path.replace(/\\/g, '/');