ar7 / media
Explore, Upload, Delete and Create new folder in your laravel project
Requires
- intervention/image: ^2.7
Requires (Dev)
- laravel/framework: ^10.7
README
Media - Explore, Upload, Delete and Create new folder
You can use this package to upload your media and attach the media to your models.
Version | Laravel |
---|---|
^1.0.0 | ^10.7 |
Installation
composer require ar7/media
.- add
Ar7\Media\MediaServiceProvider::class
toproviders
array insideconfig/app.php
. - add
'Ar7Media' => Ar7\Media\Facades\Ar7Media::class
toaliases
array insideconfig/app.php
. - add
"Ar7\\Media\\": "vendor/ar7/media/src/"
toautoload => psr-4
object insidecomposer.json
file, then run this command:composer dump-autoload
. - If you haven't link your storage, please run this command
php artisan storage:link
. - run
php artisan vendor:publish --tag=ar7-media-config
to copy the config file intoconfig
folder. - run
php artisan vendor:publish --tag=ar7-media-public
to copy asset files intopublic
folder, running this command with--force
flag is recommended. - run
php artisan vendor:publish --tag=ar7-media-migrations
to copy the migrations intodatabase/migrations
folder. - run
php artisan migrate
to create the tables.
API
You can use these methods on your model:
Method | Parameters | Description | Example |
---|---|---|---|
addMedia | $paths - (Single-Array) | Add media to your model | User::findOrFail(1)->addMedia([$request->input('image')]) |
updateMedia | $paths - (Array) | Update media for your model | User::findOrFail(1)->updateMedia([$request->input('image')]) |
removeMedia | $name - (Single-Array) | Remove media from your model | User::findOrFail(1)->removeMedia('image') |
getMedia | - | Return all the media for your model | $media = User::findOrFail(1)->getMedia() |
getMediaByName | $pattern (String) | Return all the media that has a name with the provided pattern | $media = User::findOrFail(1)->getMediaByName('/(extra_images)/') |
getMedium | $id - (Integer) | Get a single medium of your model with an id, If id is empty it will return the first medium | $medium = User::findOrFail(1)->getMedium(2) |
getMediumByName | $name - (Single-Array) | Get a single medium of your model with the name, If the name is empty it will return the first medium | $medium = User::findOrFail(1)->getMediumByName('image') |
There is a getSubSize
method for a single medium which you can get a specific subSize (that you defined in the config
file) of an image, using below code:
$medium->getSubSize('thumbnail');
Usage
First, take A look at the ar7_media.php
file in config
folder.
Add Ar7Media
to your model
use Ar7\Media\Ar7Media; class Product extends Model { ... use Ar7Media; ... }
In your view you have to load the css and js files and load the media selector:
Example:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ar7 Media</title> <!-- load the css file --> @ar7_media('css') </head> <body> <form method="post"> @csrf <!-- load the media selector --> @ar7_media_start @ar7_media_file('img', '{"name": "image", "placeholder": "Image", "file": ""}') @ar7_media_end <!-- load the media selector --> <br> <button type="submit">Submit</button> </form> <!-- load the js files --> @ar7_media('js') </body> </html>
The @ar7_media_file
directive has two parameters:
- ID - for the media selector
- OPTIONS - A JSON object with these keys:
{ "name": "(String)", // the key which you can get in $request object when the form submitted "placeholder": "(String)", // placeholder for the media selector "file": "(String)", // Current media path to show in media selector "id": "(Number)" // Current media id }
Upload from controller
To upload a file from controller simply use the Ar7Media
facade.
use Ar7\Media\Facades\Ar7Media; class HomeController { function index() { $file = $request->file('file'); Ar7Media::upload($file, 'path'); // path is optional } }
Load with JS
If you want to load the selector with javascript use the instruction below:
add this inside or outside the media selector blade directives.
@ar7_media_start <div id="mp3"></div> @ar7_media_end <!-- OR --> <div id="mp3"></div>
then load the selector with this code
Ar7Media.loadMediaSelectorWithJS('mp3', {name: 'mp3', placeholder: 'MP3', accept: '.mp3'});
The parameters of loadMediaSelectorWithJS
method are exactly like @ar7_media_file
directive. It only has a
third parameter that get true
or false
. you should pass false
if you want to add that div
element outside the
media selector blade directives.
Integrations
CKEditor
In your view add a textarea:
<textarea name="editor1"></textarea>
Use media as CKEditor file browser:
CKEDITOR.replace('editor1', { filebrowserBrowseUrl: mediaRoute('ar7.media.index'), filebrowserImageBrowseUrl: mediaRoute('ar7.media.index') + '?accept={{ config("ar7_media.mime_types.image/*") }}', });