Uppish

Table of Contents

• Start development
  • Step 1: Put the package in place
  • Step 2: Add the repository to your app
    • composer.json
  • Step 3: Let the composer do the rest
    • Providers array
    • Aliases array
  • Step 4: Publish the Necessary files
• How to use
  • Load styles and Scripts
  • Add Mode
  • Edit Mode
    • Blade files
    • Controller
  • Get File URL
  • Get Image URL
  • Clearing /tmp directory
  • Pluggability
    • isRequired
    • accept
    • size
    • fieldId
    • fieldClass
    • limit
    • groupClass
    • btnClass
    • btnText
  • Overriding things
    • Overriding Routes
    • Overriding Uploaded Files' UI
• Credits
• Wishlists

Start development

Step 1: Put the package in place

Get to your project root, and run the following command:

git clone git@github.com:technovistalimited/uppish.git packages/technovistalimited/uppish/

⚠️ REMOVE .git DIRECTORY ⚠️
Don't forget to remove .git directory from the packages/technovistalimited/uppish/ path if you have a global version controlling in your project. You can use the following command right after the cloning:
cd packages/technovistalimited/uppish/ && rm -rf .git

Step 2: Add the repository to your app

composer.json

Open up the composer.json of your app root and add the following line under psr-4 autoload array:

"Technovistalimited\\Uppish\\": "packages/technovistalimited/uppish/src"

So that it would look similar to:

"autoload": {
    "psr-4": {
        "Technovistalimited\\Uppish\\": "packages/technovistalimited/uppish/src"
    }
}

Step 3: Let the composer do the rest

Open up the command console on the root of your app and run:

composer dump-autoload

Providers array

Add the following string to config/app.php under providers array:

Technovistalimited\Uppish\UppishServiceProvider::class,

Aliases array

Add the following line to the config/app.php under aliases array:

'Uppish' => Technovistalimited\Uppish\Facades\Uppish::class,

Step 4: Publish the Necessary files

Make the configuration and view files ready first:

php artisan vendor:publish --tag=uppish

How to use

Load styles and Scripts

Add the necessary stylesheets and javascripts.

@push('styles')
    /*
    If you want to use the default styling of Uppish.
    <link rel="stylesheet" href="path/to/bootstrap-4.min.css"> */
    <link rel="stylesheet" href="{{ asset('vendor/uppish/css/uppish.css') }}">
    /* <link rel="stylesheet" href="{{ asset('vendor/uppish/css/interface.css') }}"> */
@endpush

@push('scripts')
    // Pass uppish PHP data into JavaScripts.
    @include('vendor.uppish.php-js')

    <!--
    Uppish is Dependent to jQuery.
    <script src="path/to/jquery-3.6.min.js"></script> -->
    <script src="{{ asset('vendor/uppish/js/uppish.js') }}"></script>
@endpush

Where you need to add file upload feature, simply add the following:

<x-uppish::files name="image" />

If you have to add multiple files, use array notation in the name attribute:

<x-uppish::files name="images[]" />

📣 FOR MORE PLUGGABILITY SEE THE PLUGGABILITY SECTION

Add Mode

public function store(Request $request)
{
    $upload = Uppish::upload($request->upload); // Returns array of arrays.

    // dd($upload[0]['file']); // single file
    // Or, for multiple files, loop through $upload
}

Edit Mode

Blade files

Pass the information of already uploaded files in a string (for single file) or in an array (for multiple files).

// $file = 'public/uploads/2021/04/1617194983-My-Document.pdf';

// Note the colon (:) before 'files'.
<x-uppish::files name="upload" :files="$file" />

// $files = array(
//     'public/uploads/2021/04/1617194983-My-Document.pdf',
//     'public/uploads/2021/04/1617194987-Profile-image.png',
// );

// Note the colon (:) before 'files'.
<x-uppish::files name="upload[]" :files="$files" />

Controller

public function update(Request $request, $id)
{
    // $item = Item::findorfail($id);
    $upload = Uppish::upload($request->upload); // Returns array of arrays.

    if (!empty($upload)) {
        // New file to be updated, so delete the old file.
        if (!empty($item->upload)) {
            Uppish::delete($item->upload);

            // dd($upload[0]['file']); // single file
            // Or, for multiple files, loop through $upload
        }

    }
}

Get File URL

Dependent to php artisan storage:link.

$fileURL  = Uppish::getFileURL($file);

Get Image URL

Dependent to php artisan storage:link.

$originalImageURL  = Uppish::getFileURL($image);
$originalImageURL  = Uppish::getImageURL($image);
$originalImageURL  = Uppish::getImageURL($image, 'original');
$thumbnailImageURL = Uppish::getImageURL($image, 'tmb');
$mediumImageURL    = Uppish::getImageURL($image, 'med');

Clearing /tmp directory

Uppish::clearTemp();

Returns true on successful deletion, false on finding no files.

Pluggability

There are many ways you can plug per-scope settings into each of the <input type="file"> element.

isRequired

Accepts: (boolean) True/False
Default: false (not required)

<x-uppish::files isRequired="true" />

accept

Accepts: (string) file extensions/MIME types (comma separated)
Default: config('uppish.accepted_extensions')

<x-uppish::files accept="jpg, png, bmp, gif" /> <!-- Not recommended, use MIMEs instead -->
<x-uppish::files accept="{{ Uppish::extensionsToMimes('jpg, png, bmp, gif') }}" />
<x-uppish::files accept="image/jpeg, image/png, image/x-ms-bmp, image/gif" />

size

Accepts: (integer) In binary bytes
Default: config('uppish.upload_max_size')

// Accepting 10mb file in this field.
<x-uppish::files size="10485760" />

fieldId

Accepts: (string) HTML element ID
Default: '' (empty, no ID attribute)

<x-uppish::files fieldId="file" />

fieldClass

Accepts: (string) HTML element Class
Default: '' (empty)

<x-uppish::files fieldClass="file" />

limit

Applicable for multiple files input only (eg. name="files[]")
Accepts: (integer) Number of files (cannot exceed config('uppish.maximum_files') limit)
Default: config('uppish.maximum_files')

// Accepting 5 files in this field where multiple files are accepted.
<x-uppish::files name="files[]" limit="5" />

groupClass

Mostly for aesthetic purposes. If you want to add more classes to the grouping element
Accepts: (string) Space-separated HTML classes
Default: '' (empty)

<x-uppish::files groupClasses="my-class another-class" />

btnClass

Mostly for aesthetic purposes. If you want to add more classes to the [visible] button element
Accepts: (string) Space-separated HTML classes
Default: 'btn btn-outline-secondary' (Bootstrap 4 classes)

<x-uppish::files btnClass="btn btn-primary my-btn-class" />

btnText

Mostly for aesthetic purposes. If you want to change the button text
Accepts: (string) Simple text or translatable string
Default: '' (Showing Browse...)

<x-uppish::files btnClass="btn btn-primary my-btn-class" />

Overriding things

Overriding Routes

// Mark the backslash (\) before the namespace value.
Route::group(['namespace' => '\Technovistalimited\Uppish\Controllers'], function () {
    Route::group(['middleware' => ['web']], function () {
        Route::prefix('/uppish')->group(function () {
            Route::post('/upload/', 'UppishController@store')->name('uppish.upload');
            Route::post('/delete/', 'UppishController@delete')->name('uppish.delete');
        });
    });
});

Overriding Uploaded Files' UI

Credits

• feathericons

Wishlists

• Image Preview
• Image Gallery for multiple files