Get to your project root, and run the following command:
git clone git@github.com:technovistalimited/uppish.git packages/technovistalimited/uppish/
⚠️ REMOVE.gitDIRECTORY⚠️
Don't forget to remove.gitdirectory from thepackages/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
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"
}
}Open up the command console on the root of your app and run:
composer dump-autoloadAdd the following string to config/app.php under providers array:
Technovistalimited\Uppish\UppishServiceProvider::class,Add the following line to the config/app.php under aliases array:
'Uppish' => Technovistalimited\Uppish\Facades\Uppish::class,Make the configuration and view files ready first:
php artisan vendor:publish --tag=uppishAdd 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>
@endpushWhere 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
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
}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" />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
}
}
}Dependent to php artisan storage:link.
$fileURL = Uppish::getFileURL($file);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');Uppish::clearTemp();Returns true on successful deletion, false on finding no files.
There are many ways you can plug per-scope settings into each of the <input type="file"> element.
Accepts: (boolean) True/False
Default: false (not required)
<x-uppish::files isRequired="true" />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" />Accepts: (integer) In binary bytes
Default: config('uppish.upload_max_size')
// Accepting 10mb file in this field.
<x-uppish::files size="10485760" />Accepts: (string) HTML element ID
Default: '' (empty, no ID attribute)
<x-uppish::files fieldId="file" />Accepts: (string) HTML element Class
Default: '' (empty)
<x-uppish::files fieldClass="file" />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" />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" />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" />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" />// 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');
});
});
});- Image Preview
- Image Gallery for multiple files