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

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

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:

  1. const copyButtons = document.querySelectorAll('.copy-btn');
  2. const appUrl = "{{ config('app.url') }}";
  3. const storageUrl = "{{ asset('storage') }}";
  5. copyButtons.forEach(button => {
  6.     button.addEventListener('click', () => {
  7.         const path = button.getAttribute('data-path');
  8.         const fullPath = appUrl + '/' + path.replace(/\\/g, '/');
  10.         const tempInput = document.createElement('input');
  11.         tempInput.setAttribute('value', fullPath);
  12.         document.body.appendChild(tempInput);
  13.         tempInput.select();
  14.         document.execCommand('copy');
  15.         document.body.removeChild(tempInput);
  17.         alert('Image path copied to clipboard!');
  18.     });
  19. });

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:

  1. <table class="table table-hover">
  2. 	<tr>
  3. 		<th>Number</th>
  4.         <th>Name</th>
  5.         <th>Volume</th>
  6.         <th>Suffix</th>
  7.         <th>Links</th>
  8.     </tr>
  9.     @foreach($memes as $meme)
  10.     @php($menuCounter = 0)
  11. 		<tr>
  12. 			<td>{{ ++$menuCounter }}</td>
  13.             <td>{{ $meme->name }}</td>
  14.             <td>{{ $meme->size }}</td>
  15.             <td>{{ $meme->extension }}</td>
  16.             <td></td>
  17.         </tr>
  18.     @endforeach
  19. </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:

  1. <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:

  1.         const copyButtons = document.querySelectorAll('.copy-btn');
  2.         const appUrl = "{{ config('app.url') }}";
  3.         const storageUrl = "{{ asset('storage') }}";
  5.         copyButtons.forEach(button => {
  6.             button.addEventListener('click', () => {
  7.                 const path = button.getAttribute('data-path');
  8.                 const fullPath = appUrl + storageUrl + '/' + path.replace(/\\/g, '/');
  10.                 const tempInput = document.createElement('input');
  11.                 tempInput.setAttribute('value', fullPath);
  12.                 document.body.appendChild(tempInput);
  13.                 tempInput.select();
  14.                 document.execCommand('copy');
  15.                 document.body.removeChild(tempInput);
  17.                 alert('Image path copied to clipboard!');
  18.             });
  19.         });

But this is wrong since it copies the url of image like this:

  1. http://localhosthttp://localhost:8000/storage/C:/xampp/htdocs/projectname/root/storage/app/public/media/png/1684132151.png

While it should be something like this:

  1. 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, '/');

英文: 
  1. const appUrl = "{{ config('app.url') }}";
  2. const storageUrl = "{{ asset('storage') }}";    
  3. 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:

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

答案2

得分: -1

Replace:

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

with:

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

这将为您提供绝对URL！

英文:

Replace

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

with

  1. <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
  • clipboard
  • laravel
  • laravel-8
  • laravel-storage
  • php
匿名

发表评论

匿名网友

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

确定