sudippalash/media-input

Image upload from your device folder, URL & Youtube video URL

1.0.4 2023-03-01 16:02 UTC

MIT

• Sudip Palash

• Image upload
• Media Input
• Laravel Image Upload
• Media Upload Like Shopify
• Image Upload Like Shopify

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

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

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

2. 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>

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