复制文件路径到剪贴板在 Laravel 8 中无法正常工作

huangapple go评论65阅读模式
英文:

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

问题

You can adjust the URL for copying into the clipboard by modifying the way you construct fullPath. You need to remove the duplicate http://localhost part. Here's the corrected code snippet for constructing fullPath:

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 + '/' + 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!');
    });
});

This code will create the correct URL format for copying into the clipboard, like this: http://localhost/storage/media/png/1684132151.png.

英文:

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?

答案1

得分: 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:


const fullPath = storageUrl + '/' + path.replace(/\/g, '/');

英文:
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, '/');

答案2

得分: -1

Replace:

<button class="btn btn-primary copy-btn" data-path="{{ storage_path('app/public/' . $meme->path) }}">Copy Path</button>

with:

<button class="btn btn-primary copy-btn" data-path="{{ asset(storage_path('app/public/' . $meme->path)) }}">Copy Path</button>

这将为您提供绝对URL!

英文:

Replace

<button class="btn btn-primary copy-btn" data-path="{{ storage_path('app/public/' . $meme->path) }}">Copy Path</button>

with

<button class="btn btn-primary copy-btn" data-path="{{ asset(storage_path('app/public/' . $meme->path)) }}">Copy Path</button>

This will give you absolute URL!

huangapple
  • 本文由 发表于 2023年5月15日 14:45:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76251472.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定