Laravel Media Library Full (ok)
277KB
laravel-medialibrary.rar
C:\xampp82\htdocs\testcom\database\migrations\2022_04_16_074443_create_media_table.php
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateMediaTable extends Migration
{
public function up()
{
Schema::create('media', function (Blueprint $table) {
$table->bigIncrements('id');
$table->morphs('model');
$table->uuid('uuid')->nullable()->unique();
$table->string('collection_name');
$table->string('name');
$table->string('file_name');
$table->string('mime_type')->nullable();
$table->string('disk');
$table->string('conversions_disk')->nullable();
$table->unsignedBigInteger('size');
$table->json('manipulations');
$table->json('custom_properties');
$table->json('generated_conversions');
$table->json('responsive_images');
$table->unsignedInteger('order_column')->nullable()->index();
$table->nullableTimestamps();
});
}
public function down()
{
Schema::dropIfExists('media');
}
}
C:\xampp82\htdocs\testcom\database\migrations\2022_04_16_074828_create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};
C:\xampp82\htdocs\testcom\app\Models\Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
class Post extends Model implements HasMedia
{
use HasFactory, InteractsWithMedia;
protected $guarded = [];
public function registerMediaColections()
{
$this->addMediaCollection('images')
->singleFile();
$this->addMediaCollection('downloads')
->singleFile();
}
public function registerMediaConversions(Media $media = null): void
{
$this->addMediaConversion('thumb')
->width(368)
->height(232)
->sharpen(10);
}
}
C:\xampp82\htdocs\testcom\app\Http\Controllers\PostController.php
<?php
namespace App\Http\Controllers;
use App\Http\Requests\PostCreateRequest;
use App\Models\Post;
use Illuminate\Http\Request;
use Spatie\MediaLibrary\MediaCollections\Models\Media;
use Spatie\MediaLibrary\Support\MediaStream;
class PostController extends Controller
{
public function index()
{
$posts = Post::all();
return view('posts.index', compact('posts'));
}
public function create()
{
return view('posts.create');
}
public function store(PostCreateRequest $request)
{
$post = Post::create($request->validated());
if ($request->hasFile('image')) {
$post->addMediaFromRequest('image')->withResponsiveImages()->toMediaCollection('images');
}
if ($request->hasFile('download')) {
$post->addMediaFromRequest('download')->withResponsiveImages()->toMediaCollection('downloads');
}
return to_route('posts.index');
}
public function edit(Post $post)
{
return view('posts.edit', compact('post'));
}
public function show(Post $post) {
return view('posts.show', compact('post'));
}
public function update(PostCreateRequest $request, Post $post)
{
$post->update($request->validated());
if ($request->hasFile('image')) {
$post->addMediaFromRequest('image')->withResponsiveImages()->toMediaCollection('images');
}
if ($request->hasFile('download')) {
$post->addMediaFromRequest('download')->withResponsiveImages()->toMediaCollection('downloads');
}
return to_route('posts.index');
}
public function destroy($id)
{
$post = Post::findOrFail($id);
$post->delete();
return to_route('posts.index');
}
public function download($id)
{
$post = Post::findOrFail($id);
$media = $post->getFirstMedia('downloads');
return $media;
}
public function downloads()
{
// $media = Media::where('collection_name', 'downloads')->get();
return MediaStream::create('downloads.zip')->addMedia(Media::all());
}
public function resImage($id)
{
$post = Post::findOrFail($id);
return view('posts.show', compact('post'));
}
}
C:\xampp82\htdocs\testcom\resources\views\components\main.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="antialiased">
{{ $slot }}
</body>
</html>
C:\xampp82\htdocs\testcom\resources\views\posts\create.blade.php
<x-main>
<div class="max-w-6xl mx-auto mt-12">
<div class="space-y-8 divide-y divide-gray-200 w-1/2 mt-10">
<form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
@csrf
<div class="sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700"> Post Title </label>
<div class="mt-1">
<input type="text" id="title" name="title"
class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
</div>
</div>
<div class="sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700"> Post Image </label>
<div class="mt-1">
<input type="file" id="image" name="image"
class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
</div>
</div>
<div class="sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700"> Post Image Download </label>
<div class="mt-1">
<input type="file" id="image" name="download"
class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
</div>
</div>
<div class="sm:col-span-6 pt-5">
<label for="body" class="block text-sm font-medium text-gray-700">Body</label>
<div class="mt-1">
<textarea id="body" rows="3" name="body"
class="shadow-sm focus:ring-indigo-500 appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"></textarea>
</div>
</div>
<div class="sm:col-span-6 pt-5">
<button type="submit" class="px-4 py-2 rounded bg-indigo-500 hover:bg-indigo-700">Create</button>
</div>
</form>
</div>
</div>
</x-main>
C:\xampp82\htdocs\testcom\resources\views\posts\edit.blade.php
<x-main>
<div class="max-w-6xl mx-auto mt-12">
<div class="space-y-8 divide-y divide-gray-200 w-1/2 mt-10">
<form method="POST" action="{{ route('posts.update', $post->id) }}" enctype="multipart/form-data">
@csrf
@method('PUT')
<div class="sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700"> Post Title </label>
<div class="mt-1">
<input type="text" id="title" name="title" value="{{ $post->title }}" class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
</div>
</div>
<div class="sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700"> Post Image </label>
<div class="mt-1">
<input type="file" id="image" name="image" class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
</div>
</div>
<div class="sm:col-span-6">
<label for="title" class="block text-sm font-medium text-gray-700"> Post Image Download </label>
<div class="mt-1">
<input type="file" id="image" name="download" class="block w-full transition duration-150 ease-in-out appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out sm:text-sm sm:leading-5" />
</div>
</div>
<div class="sm:col-span-6 pt-5">
<label for="body" class="block text-sm font-medium text-gray-700">Body</label>
<div class="mt-1">
<textarea id="body" rows="3" name="body" class="shadow-sm focus:ring-indigo-500 appearance-none bg-white border border-gray-400 rounded-md py-2 px-3 text-base leading-normal transition duration-150 ease-in-out focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
{{ $post->body }}
</textarea>
</div>
</div>
<div class="sm:col-span-6 pt-5">
<button type="submit" class="px-4 py-2 rounded bg-indigo-500 hover:bg-indigo-700">Create</button>
</div>
</form>
</div>
</div>
</x-main>
C:\xampp82\htdocs\testcom\resources\views\posts\index.blade.php
<x-main>
<div class="max-w-6xl mx-auto mt-8">
<a href="{{ route('posts.create') }}" class="px-4 py-2 text-white bg-indigo-500 rounded">Create</a>
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50 dark:bg-gray-600 dark:text-gray-200">
<tr>
<th scope="col"class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">Id</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">Title</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">Image</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">Download</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
@foreach ($posts as $post)
<tr>
<td class="px-6 py-4 whitespace-nowrap">{{ $post->id }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ $post->title }}</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="w-8 h-8 rounded-full" src="{{ $post->getFirstMedia('images')->getUrl('thumb') }}" />
</td>
<td class="px-6 py-4 whitespace-nowrap">
<img class="w-8 h-8 rounded-full" src="{{ $post->getFirstMedia('downloads')->getUrl('thumb') }}" />
</td>
<td class="px-6 py-4 text-right text-sm">
<div class="flex space-x-2">
<a href="{{ route('posts.edit', $post->id) }}" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-700 rounded-lg text-white">Edit</a>
<a href="{{ route('posts.show', $post->id) }}" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-700 rounded-lg text-white">Show</a>
<form class="px-4 py-2 bg-red-500 hover:bg-red-700 rounded-lg text-white" method="POST" action="{{ route('posts.destroy', $post->id) }}" onsubmit="return confirm('Are you sure?');">
@csrf
@method('DELETE')
<button type="submit">Delete</button>
</form>
</div>
</td>
</tr>
@endforeach-
<!-- More items... -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</x-main>
C:\xampp82\htdocs\testcom\resources\views\posts\show.blade.php
<x-main>
<div class="max-w-6xl mx-auto mt-12">
<h1>{{ $post->title }}</h1>
{{ $post->getFirstMedia('downloads') }}
</div>
</x-main>
PreviousLaravel 9 Upload Images with Spatie Media Library Tutorial (ok)Next=== END Spatie Media Library ===
Last updated