sudippalash / media-input
Image upload from your device folder, URL & Youtube video URL
Installs: 32
Dependents: 0
Suggesters: 0
Security: 0
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Language:Blade
Requires
- php: ^7.3|^8.0
- laravel/framework: ^8.0|^9.0|^10.0|^11.0
This package is auto-updated.
Last update: 2024-11-15 18:49:06 UTC
README
This package provides a set of blade components
Install
Via Composer
composer require sudippalash/media-input
You can publish the config file with:
php artisan vendor:publish --provider="Sudip\MediaInput\Providers\AppServiceProvider" --tag=config
You can publish the lang file with:
php artisan vendor:publish --provider="Sudip\MediaInput\Providers\AppServiceProvider" --tag=lang
You can publish blade files with:
php artisan vendor:publish --provider="Sudip\MediaInput\Providers\AppServiceProvider" --tag=views
In config/media-input.php
config file you should set your data.
return [ /* |-------------------------------------------------------------------------- | Platform |-------------------------------------------------------------------------- | | Which platform you use in your application. Example: bootstrap3 or bootstrap4 or bootstrap5 or default | Note: you should add bootstrap platform CSS and JS library. If you use default then no need to add bootstrap CSS and JS library | */ 'platform' => 'bootstrap3', /* |-------------------------------------------------------------------------- | From URL |-------------------------------------------------------------------------- | | If you want to upload image from url & embed youtube video url | */ 'image_from_url' => true, 'video_from_url' => true, /* |-------------------------------------------------------------------------- | Styles Default Stack |-------------------------------------------------------------------------- | | Styles to push in appropriate stack (required) | */ 'styles_stack' => 'styles', /* |-------------------------------------------------------------------------- | Scripts Default Stack |-------------------------------------------------------------------------- | | Scripts to push in appropriate stack (required) | */ 'scripts_stack' => 'scripts', ];
Usage
<x-media-input::image uniqueId="{provide unique id if you use multiple in single page}" name="{file input name}" :fileUrls="['array of file url (optional)']" />
or
<x-media-input::image uniqueId="{provide unique id if you use multiple in single page}" name="{file input name}" itemKey="id" itemValue="image_url" :items="[collection of object (optional)]" />
Note
- jquery library is required. If your project already added jquery then ignore it.
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
-
bootstrap css & js is required as per your platform selection from config file. If your project already added jquery then ignore it or If you select default then no need to add bootstrap.
-
If you want to use the image sortable feature then you need to include sortable js in your code before the end body tag (Optional)
<script src="https://cdn.jsdelivr.net/gh/sudippalash/media-input/assets/js/Sortable.min.js"></script>
- If you want to use the image preview feature then you need to include magnific-popup css in your code head tag and magnific-popup js in your code before the end body tag (Optional)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sudippalash/media-input/assets/css/magnific-popup.css">
<script src="https://cdn.jsdelivr.net/gh/sudippalash/media-input/assets/js/jquery.magnific-popup.min.js"></script>