Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support larupload trait in image resource/model #98

Merged
merged 5 commits into from
Nov 10, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
"require": {
"php": "^8.0.2",
"intervention/image": "^2.5",
"mostafaznv/nova-video": "^4.0|^5.0|^6.0.2",
"laravel/framework": "^9.0|^10.0",
"laravel/nova": "^4.13",
"mostafaznv/nova-video": "^4.0|^5.0|^6.0.2",
"nova-kit/nova-packages-tool": "^1.2",
"spatie/laravel-image-optimizer": "^1.6"
},
Expand Down
11 changes: 11 additions & 0 deletions config/nova-ckeditor.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@

'video-model' => 'App\Models\Video',

/*
|--------------------------------------------------------------------------
| Image Model
|--------------------------------------------------------------------------
|
| Specifies the path of your image model
|
*/

'image-model' => 'App\Models\Image',


/*
|--------------------------------------------------------------------------
Expand Down
2 changes: 1 addition & 1 deletion dist/js/field.js

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions docs/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
## ⚙ Advanced Usage

* [Customize ImageStorage](advanced-usage/customize-imagestorage.md)
* [Integrating NovaFileArtisan (Larupload) with Image Resource](advanced-usage/integrating-novafileartisan-larupload-with-image-resource.md)
* [Customize AudioStorage](advanced-usage/customize-audiostorage.md)
* [Multiple Toolbars](advanced-usage/multiple-toolbars.md)
* [Customize Toolbar Items](advanced-usage/customize-toolbar-items.md)
Expand All @@ -33,6 +34,7 @@
* [Snippets](advanced-usage/ckeditor-field-options/snippets.md)
* [Configuration](advanced-usage/configuration/README.md)
* [Video Model](advanced-usage/configuration/video-model.md)
* [Image Model](advanced-usage/configuration/image-model.md)
* [Memory](advanced-usage/configuration/memory.md)
* [Max Image Quality](advanced-usage/configuration/max-image-quality.md)
* [Image Max Width](advanced-usage/configuration/image-max-width.md)
Expand Down
14 changes: 14 additions & 0 deletions docs/advanced-usage/configuration/image-model.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
description: image-model
---

# Image Model

<table><thead><tr><th>Property Name</th><th width="211.33333333333331">Type</th><th>Default</th></tr></thead><tbody><tr><td>image-model</td><td>string</td><td><mark style="color:red;"><code>App\Models\Image</code></mark></td></tr></tbody></table>

The `image-model` configuration option allows you to specify the path of your **image** model within your Laravel application. This configuration determines which image model will be used for handling images within the CKEditor field.

By default, the `image-model` configuration option is set to `App\Models\Image`, assuming that you have a `Image` model located in the `app/Models` directory of your application. However, you can customize this path to match the location of your own image model.

To configure the `image-model` option, update the value in the configuration file `config/nova-ckeditor.php` with the desired path to your image model.

Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
---
description: Since v6.1.0
---

# Integrating NovaFileArtisan (Larupload) with Image Resource

To enhance your Nova application's image handling capabilities, you can seamlessly integrate [NovaFileArtisan](https://github.com/mostafaznv/nova-file-artisan), a feature-rich file uploader package that serves as a wrapper for [Larupload](https://github.com/mostafaznv/larupload). Follow these steps to incorporate <mark style="color:red;">NovaFileArtisan</mark> into your Image Resource:



1. Install <mark style="color:red;">NovaFileArtisan</mark> and Larupload packages:

```sh
composer require mostafaznv/nova-file-artisan
```

2. Modify your <mark style="color:red;">images</mark> table schema:

```php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;


return new class extends Migration
{
public function up(): void
{
Schema::create('images', function (Blueprint $table) {
$table->id();
$table->string('name')->index();
$table->upload('file');
$table->timestamps();
});
}


public function down(): void
{
Schema::drop('images');
}
};
```

3. Apply the <mark style="color:red;">Larupload</mark> trait to your Image model:

```php
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Mostafaznv\Larupload\Enums\LaruploadMediaStyle;
use Mostafaznv\Larupload\Enums\LaruploadNamingMethod;
use Mostafaznv\Larupload\Storage\Attachment;
use Mostafaznv\Larupload\Traits\Larupload;


class Image extends Model
{
use Larupload;

protected $fillable = [
'name', 'file'
];

protected static function booted(): void
{
parent::booted();

self::saving(function ($model) {
if (!$model->name) {
$name = $model->file->meta('name');

$model->name = pathinfo($name, PATHINFO_FILENAME);
}
});
}

public function attachments(): array
{
return [
Attachment::make('file')
->disk('image')
->namingMethod(LaruploadNamingMethod::HASH_FILE)
->coverStyle('cover', 500, 500, LaruploadMediaStyle::CROP),
];
}
}
```

4. Replace <mark style="color:red;">ImageUpload</mark> with <mark style="color:red;">NovaFileArtisan</mark> field in your Nova resource:

```php
<?php

namespace App\Nova\Resources;

use App\Nova\Resource;
use Illuminate\Http\Request;
use Laravel\Nova\Fields\Text;
use App\Models\Image as ImageModel;
use Mostafaznv\NovaFileArtisan\Fields\NovaFileArtisan;
use Mostafaznv\NovaFileArtisan\Fields\NovaFileArtisanMeta;


class Image extends Resource
{
public static string $model = ImageModel::class;


public function fields(Request $request): array
{
return [
Text::make(trans('Name'), 'name')
->showOnPreview()
->help(trans('The file name that should be searched'))
->sortable(),

NovaFileArtisan::make('File', 'file')
->showOnPreview()
->rules('required', 'mimes:jpg,jpeg,png,gif,webp', 'max:5000')
->help(trans(':size Megabyte Max FileSize.', ['size' => 5])),

...NovaFileArtisanMeta::make('file')->all(),
];
}
}
```

5. You're Done!



These steps empower your Nova application with advanced file handling capabilities using NovaFileArtisan. Feel free to explore additional features and customization options offered by Larupload and NovaFileArtisan.
2 changes: 1 addition & 1 deletion docs/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
### Requirements

* PHP 8.0.2 or higher
* Laravel 8.40.\* or higher
* Laravel 9.\* or higher
* Nova 4
* FFMPEG (required for larupload usage)

Expand Down
13 changes: 13 additions & 0 deletions resources/js/ckeditor/plugins/MediaBrowser.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,10 +155,23 @@ export default class MediaBrowser {
this.model.change((writer) => {
items.forEach(({file, url, urls}, index) => {
if (index === 0 && this.hasSelectedWidget) {
if (urls) {
if (urls.image) {
url = urls.image
}
else if (urls.video) {
url = urls.video
}
}

return writer.setAttributes({src: url, alt: file, imageCaption: file}, this.selected)
}

if (this.localType === 'image') {
if (urls && urls.image) {
url = urls.image
}

return this.model.insertContent(
writer.createElement('imageBlock', {src: url, alt: file, imageCaption: file}),
this.model.document.selection.getLastPosition()
Expand Down
1 change: 1 addition & 0 deletions resources/js/components/editor-field.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
type="image"
:field-key="$options[editorUUID] + '-image'"
:multiple="true"
:has-larupload-trait="currentField.imageHasLaruploadTrait"
/>

<media-browser
Expand Down
24 changes: 23 additions & 1 deletion resources/js/components/media-browser.vue
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,22 @@ export default {
return item
})
}
else if (this.isImagePicker) {
this.items.map((item) => {
if (this.hasLaruploadTrait) {
item.url = item.file.meta.format === 'gif'
? item.file.original
: item.file.cover

item.urls = {
cover: item.file.cover,
image: item.file.original,
}
}

return item
})
}

if (entities.length) {
this.page = newPage
Expand Down Expand Up @@ -386,8 +402,14 @@ export default {
const data = {}

if (this.isImagePicker) {
data.file = file
data.name = file.name.split('.').slice(0, -1).join('.')

if (this.hasLaruploadTrait) {
data['file[original]'] = file
}
else {
data.file = file
}
}
else {
if (this.hasLaruploadTrait) {
Expand Down
44 changes: 38 additions & 6 deletions src/CkEditor.php
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,13 @@ class CkEditor extends Field
*/
public string $videoModel = '';

/**
* Specifies the path of your image model
*
* @var string
*/
public string $imageModel = '';


public function __construct($name, $attribute = null, callable $resolveCallback = null)
{
Expand All @@ -130,6 +137,7 @@ public function __construct($name, $attribute = null, callable $resolveCallback
);

$this->videoModel = config('nova-ckeditor.video-model');
$this->imageModel = config('nova-ckeditor.image-model', 'App\Models\Image');
}


Expand Down Expand Up @@ -299,7 +307,8 @@ public function jsonSerialize(): array
'uiLanguage' => $this->uiLanguage,
'shouldNotGroupWhenFull' => $this->shouldNotGroupWhenFull,
'shouldShow' => $this->shouldBeExpanded(),
'videoHasLaruploadTrait' => $this->hasLaruploadTrait(),
'videoHasLaruploadTrait' => $this->videoHasLaruploadTrait(),
'imageHasLaruploadTrait' => $this->imageHasLaruploadTrait(),
'novaVideoIsLegacy' => $this->isLegacyNovaVideo(),
]);
}
Expand All @@ -321,21 +330,44 @@ protected function prepareSnippets(array $snippets): array
}

/**
* Check if class has larupload trait
* Check if image class has larupload trait
*
* @return bool
*/
private function hasLaruploadTrait(): bool
private function imageHasLaruploadTrait(): bool
{
if ($this->videoModel) {
$class = $this->videoModel;
if ($this->imageModel) {
return $this->hasLaruploadTrait($this->imageModel);
}

return false;
}

return class_exists($class) and in_array(Larupload::class, class_uses($class));
/**
* Check if video class has larupload trait
*
* @return bool
*/
private function videoHasLaruploadTrait(): bool
{
if ($this->videoModel) {
return $this->hasLaruploadTrait($this->videoModel);
}

return false;
}

/**
* Check if class has larupload trait
*
* @param string $class
* @return bool
*/
private function hasLaruploadTrait(string $class): bool
{
return class_exists($class) and in_array(Larupload::class, class_uses($class));
}

/**
* Check whether NovaVideo is legacy
*
Expand Down