Media Datenbank 1.0

2019-11-21 21:12:17 +01:00 · 2019-11-21 21:12:17 +01:00 · c9f3d85d4e
commit c9f3d85d4e
parent c11fc557bf
50 changed files with 4774 additions and 172 deletions
--- a/packages/iqcontent/laravel-filemanager/src/Controllers/ColorController.php
+++ b/packages/iqcontent/laravel-filemanager/src/Controllers/ColorController.php
@ -10,6 +10,15 @@ use IqContent\LaravelFilemanager\Events\FolderWasRenamed;
 class ColorController extends LfmController
 {
    public function getColor()
+    {
+        return view('laravel-filemanager::colors')
+            ->with([
+                'working_dir' => request('working_dir'),
+                'color' => request('color')
+            ]);
+    }
+
+    public function performColor()
    {
        $file_name = $this->helper->input('file');
        $new_color = $this->helper->input('new_color');
--- a/packages/iqcontent/laravel-filemanager/src/Controllers/CropController.php
+++ b/packages/iqcontent/laravel-filemanager/src/Controllers/CropController.php
@ -5,6 +5,7 @@ namespace IqContent\LaravelFilemanager\Controllers;
 use Intervention\Image\Facades\Image;
 use IqContent\LaravelFilemanager\Events\ImageIsCropping;
 use IqContent\LaravelFilemanager\Events\ImageWasCropped;
+use IqContent\LaravelFilemanager\Models\IQContentFile;

 class CropController extends LfmController
 {
@ -34,21 +35,42 @@ class CropController extends LfmController
        if (! $overWrite) {
            $fileParts = explode('.', $image_name);
            $fileParts[count($fileParts) - 2] = $fileParts[count($fileParts) - 2] . '_cropped_' . time();
-            $crop_path = $this->lfm->setName(implode('.', $fileParts))->path('absolute');
+            $image_name = implode('.', $fileParts);
+            $crop_path = $this->lfm->setName($image_name)->path('absolute');
        }

        event(new ImageIsCropping($image_path));

        $crop_info = request()->only('dataWidth', 'dataHeight', 'dataX', 'dataY');

+
+
        // crop image
-        Image::make($image_path)
+        $image = Image::make($image_path)
            ->crop(...array_values($crop_info))
            ->save($crop_path);

        // make new thumbnail
        $this->lfm->makeThumbnail($image_name);

+        $new_file = $this->lfm->pretty($image_name);
+        $working_folder_id = $new_file->getModelParentFolderId();
+
+        $mimeType = $new_file->mimeType();
+        $extension = $new_file->extension();
+        $size = \File::size($crop_path);
+
+        IQContentFile::create([
+            'folder_id' => $working_folder_id,
+            'name' => $image_name,
+            'identifier' => $image_name,
+            'ext' => $extension,
+            'mine' => $mimeType,
+            'size' => $size / 1000,
+            'dimensions' => $image->width()."x".$image->height(),
+            'content' => '',
+        ]);
+
        event(new ImageWasCropped($image_path));
    }

--- a/packages/iqcontent/laravel-filemanager/src/Controllers/FileController.php
+++ b/packages/iqcontent/laravel-filemanager/src/Controllers/FileController.php
@ -0,0 +1,253 @@
+<?php
+
+namespace IqContent\LaravelFilemanager\Controllers;
+
+use Intervention\Image\Facades\Image;
+use IqContent\LaravelFilemanager\Events\ImageIsCropping;
+use IqContent\LaravelFilemanager\Events\ImageWasCropped;
+use IqContent\LaravelFilemanager\Models\IQContentFile;
+
+class FileController extends LfmController
+{
+
+    private $apikey = 'AIzaSyC31Tf0rZVYqRRcUNk4XXPtV5yzKDzkb1E';
+    /**
+     * Show crop page.
+     *
+     * @return mixed
+     */
+    public function getFile()
+    {
+
+        return view('laravel-filemanager::file')
+            ->with([
+                'working_dir' => request('working_dir'),
+            ]);
+    }
+
+    /**
+     * Crop the image (called via ajax).
+     */
+    public function performFile($overWrite = true)
+    {
+        //$working_dir = request('working_dir');
+        $file_type = request('file_type');
+        if($file_type === 'youtube'){
+           return $this->createYoutubeFile($file_type);
+
+        }
+        /*   if(!$file_name || $file_name == ""){
+            $file_name = "newEmptyFile.".$file_type;
+        }else{
+
+            $file_name = $file_name.".".$file_type;
+        }
+        $file_name = request('file_name');
+        $file_content = request('file_content');*/
+
+        return $this->response('error', "unbekannter File Typ");
+
+    }
+
+   private function createYoutubeFile($file_type){
+
+        $youtube_video_id = request('file_content');
+        $value = $this->readGoogleApi($youtube_video_id);
+
+        if(!$value || !isset($value['items'][0]['snippet']['title'])){
+           return $this->response('error', "youtube ID nicht gefunden: ".$youtube_video_id);
+        }
+
+        $file_title = $value['items'][0]['snippet']['title'];
+        if (config('lfm.alphanumeric_filename')) {
+            $file_title = $this->helper->sanitize($file_title);
+        }
+        $file_name = $file_title.".".$file_type;
+
+        if ($this->lfm->setName($file_name)->exists()) {
+            return $this->response('error', parent::getError('move-exist'));
+        }
+
+        $new_file = $this->lfm->pretty($file_name);
+        $working_folder_id = $new_file->getModelParentFolderId();
+        $file_path = $new_file->path();
+        //Storage::disk('local')->put('file.txt', 'Contents');
+        $new_file->put($youtube_video_id);
+
+        $mimeType = $file_type;
+        $extension = $file_type;
+
+        $size = \File::size($file_path);
+
+        //thumbnails
+       if(isset($value['items'][0]['snippet']['thumbnails']['standard']['url'])) {
+           // create folder for thumbnails
+           $this->lfm->makeThumbnailURL($file_title.".jpg", $value['items'][0]['snippet']['thumbnails']['standard']['url']);
+           //image from url
+          // $image = Image::make($value['items'][0]['snippet']['thumbnails']['standard']['url']);
+          // $image->fit(config('lfm.thumb_img_width', 200), config('lfm.thumb_img_height', 200));
+          // $this->lfm->storage->put($image->stream()->detach());
+       }
+
+           IQContentFile::create([
+            'folder_id' => $working_folder_id,
+            'name' => $new_file->name(),
+            'identifier' => $new_file->name(),
+            'ext' => $extension,
+            'mine' => $mimeType,
+            'size' => $size / 1000,
+            'dimensions' => '',
+            'content' => $youtube_video_id,
+        ]);
+
+       return parent::$success_response;
+
+
+   }
+
+    private function readGoogleApi($videoId){
+
+        $googleApiUrl = 'https://www.googleapis.com/youtube/v3/videos?id=' . $videoId . '&key=' . $this->apikey . '&part=snippet';
+
+        $ch = curl_init();
+
+        curl_setopt($ch, CURLOPT_HEADER, 0);
+        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
+        curl_setopt($ch, CURLOPT_URL, $googleApiUrl);
+        curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
+        curl_setopt($ch, CURLOPT_VERBOSE, 0);
+        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
+        $response = curl_exec($ch);
+
+        curl_close($ch);
+
+        $data = json_decode($response);
+
+        $value = json_decode(json_encode($data), true);
+
+        return $value;
+    }
+
+}
+
+//     $title = $value['items'][0]['snippet']['title'];
+//        $description = $value['items'][0]['snippet']['description'];
+
+/*
+ *
+ *
+            array(4) {
+  ["kind"]=>
+  string(25) "youtube#videoListResponse"
+  ["etag"]=>
+  string(57) ""j6xRRd8dTPVVptg711_CSPADRfg/TOFYJKnMf1x6cO7CgAzk3K2BaRw""
+  ["pageInfo"]=>
+  array(2) {
+    ["totalResults"]=>
+    int(1)
+    ["resultsPerPage"]=>
+    int(1)
+  }
+  ["items"]=>
+  array(1) {
+    [0]=>
+    array(4) {
+      ["kind"]=>
+      string(13) "youtube#video"
+      ["etag"]=>
+      string(57) ""j6xRRd8dTPVVptg711_CSPADRfg/pVQe28OgNai40jPirl_G00FJDw8""
+      ["id"]=>
+      string(11) "Rpo5py2fjrg"
+      ["snippet"]=>
+      array(10) {
+        ["publishedAt"]=>
+        string(24) "2018-12-23T22:42:41.000Z"
+        ["channelId"]=>
+        string(24) "UCZZ5ZL0Wiv90RF2KDuR_mFA"
+        ["title"]=>
+        string(16) "Wir: STERN TOURS"
+        ["description"]=>
+        string(55) "Reiseveranstalter und Kulturreise-Spezialist aus Berlin"
+        ["thumbnails"]=>
+        array(5) {
+          ["default"]=>
+          array(3) {
+            ["url"]=>
+            string(46) "https://i.ytimg.com/vi/Rpo5py2fjrg/default.jpg"
+            ["width"]=>
+            int(120)
+            ["height"]=>
+            int(90)
+          }
+          ["medium"]=>
+          array(3) {
+            ["url"]=>
+            string(48) "https://i.ytimg.com/vi/Rpo5py2fjrg/mqdefault.jpg"
+            ["width"]=>
+            int(320)
+            ["height"]=>
+            int(180)
+          }
+          ["high"]=>
+          array(3) {
+            ["url"]=>
+            string(48) "https://i.ytimg.com/vi/Rpo5py2fjrg/hqdefault.jpg"
+            ["width"]=>
+            int(480)
+            ["height"]=>
+            int(360)
+          }
+          ["standard"]=>
+          array(3) {
+            ["url"]=>
+            string(48) "https://i.ytimg.com/vi/Rpo5py2fjrg/sddefault.jpg"
+            ["width"]=>
+            int(640)
+            ["height"]=>
+            int(480)
+          }
+          ["maxres"]=>
+          array(3) {
+            ["url"]=>
+            string(52) "https://i.ytimg.com/vi/Rpo5py2fjrg/maxresdefault.jpg"
+            ["width"]=>
+            int(1280)
+            ["height"]=>
+            int(720)
+          }
+        }
+        ["channelTitle"]=>
+        string(10) "SternTours"
+        ["tags"]=>
+        array(1) {
+          [0]=>
+          string(11) "STERN TOURS"
+        }
+        ["categoryId"]=>
+        string(2) "19"
+        ["liveBroadcastContent"]=>
+        string(4) "none"
+        ["localized"]=>
+        array(2) {
+          ["title"]=>
+          string(16) "Wir: STERN TOURS"
+          ["description"]=>
+          string(55) "Reiseveranstalter und Kulturreise-Spezialist aus Berlin"
+        }
+      }
+    }
+  }
+}
+
+
+*/
+//Preview image
+//https://img.youtube.com/vi/Rpo5py2fjrg/hqdefault.jpg
+
+
+
+//https://www.googleapis.com/youtube/v3/videos
+
+//https://www.googleapis.com/youtube/v3/videos?part=snippet&id={YOUTUBE_VIDEO_ID}&fields=items(id%2Csnippet)&key={YOUR_API_KEY}
+
+//http://gdata.youtube.com/feeds/api/videos/Rpo5py2fjrg
--- a/packages/iqcontent/laravel-filemanager/src/Controllers/ItemsController.php
+++ b/packages/iqcontent/laravel-filemanager/src/Controllers/ItemsController.php
@ -69,7 +69,11 @@ class ItemsController extends LfmController
            foreach ($lfm->folders() as $folder){
                if($folder->name() == $old_file->name()){
                    return $this->response('error', parent::getError('move-exist'));
-
+                }
+            }
+            foreach ($lfm->files() as $files){
+                if($files->name() == $old_file->name()){
+                    return $this->response('error', parent::getError('move-exist'));
                }
            }

--- a/packages/iqcontent/laravel-filemanager/src/Lfm.php
+++ b/packages/iqcontent/laravel-filemanager/src/Lfm.php
@ -346,18 +346,36 @@ class Lfm
                'as' => 'getCropimage',
            ]);

+            // add-file
+            Route::get('/add-file', [
+                'uses' => 'FileController@getFile',
+                'as' => 'getFile',
+            ]);
+
+            // add-file
+            Route::get('/add-dofile', [
+                'uses' => 'FileController@performFile',
+                'as' => 'performFile',
+            ]);
+
            // rename
            Route::get('/rename', [
                'uses' => 'RenameController@getRename',
-                'as' => 'getRename',
+                'as' => 'getFile',
            ]);

            // colorshue
-            Route::get('/colorshue', [
+            Route::get('/colorhue', [
                'uses' => 'ColorController@getColor',
                'as' => 'getColor',
            ]);

+            // colorshue
+            Route::get('/docolorhue', [
+                'uses' => 'ColorController@performColor',
+                'as' => 'performColor',
+            ]);
+
            // scale/resize
            Route::get('/resize', [
                'uses' => 'ResizeController@getResize',
--- a/packages/iqcontent/laravel-filemanager/src/LfmItem.php
+++ b/packages/iqcontent/laravel-filemanager/src/LfmItem.php
@ -9,7 +9,7 @@ class LfmItem
    private $lfm;
    private $helper;

-    private $columns = ['name', 'url', 'time', 'icon', 'color', 'is_file', 'is_image', 'thumb_url'];
+    private $columns = ['name', 'url', 'time', 'icon', 'color', 'is_file', 'is_image', 'thumb_url', 'size', 'dimension', 'content'];
    public $attributes = [];

    public function __construct(LfmPath $lfm, Lfm $helper)
@ -70,7 +70,7 @@ class LfmItem
     */
    public function isImage()
    {
-        return starts_with($this->mimeType(), 'image');
+        return (strpos($this->mimeType(), 'image') !== false);
    }

    /**
@ -94,6 +94,11 @@ class LfmItem
        return $this->lfm->extension();
    }

+    public function put($content)
+    {
+        return $this->lfm->put($content);
+    }
+
    public function url()
    {
        if ($this->isDirectory()) {
@ -105,7 +110,23 @@ class LfmItem

    public function size()
    {
-        return $this->isFile() ? $this->humanFilesize($this->lfm->size()) : '';
+        if($this->model()){
+            return $this->isFile() ? $this->humanFilesize($this->model()->size) : '';
+
+        }
+    }
+
+    public function content()
+    {
+        if($this->model()){
+            return $this->model()->content;
+
+        }
+    }
+
+    public function sizeRow()
+    {
+        return $this->isFile() ? $this->lfm->size() : '';
    }

    public function time()
@ -113,6 +134,17 @@ class LfmItem
        return $this->lfm->lastModified();
    }

+    public function dimension()
+    {
+        if ($this->isImage()) {
+            if($this->model()) {
+                return $this->model()->dimensions;
+            }
+        }
+
+        return "";
+    }
+
    public function dimensions()
    {

@ -123,15 +155,26 @@ class LfmItem
        return null;
    }

+    public function getModelParentFolderId(){
+        return $this->lfm->getModelParentFolderId();
+    }
+
    public function thumbUrl()
    {
+
        //edit
+
        if ($this->isDirectory()) {
            return null;
        }

        if ($this->isImage()) {
-            return $this->lfm->thumb($this->hasThumb())->url(true);
+            return $this->lfm->thumb($this->hasThumb())->url();
+        }
+
+        if ($this->extension() === "youtube") {
+            $name =  str_replace(".youtube", ".jpg", $this->name());
+            return $this->lfm->setName($name)->thumb(true)->url();
        }

        return null;
@ -223,9 +266,12 @@ class LfmItem
     * @param  int  $decimals  Decimals.
     * @return string
     */
-    public function humanFilesize($bytes, $decimals = 2)
+    public function humanFilesize($bytes = 0, $decimals = 2)
    {
-        $size = ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+        if($bytes == 0){
+            return "";
+        }
+        $size = ['KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
        $factor = floor((strlen($bytes) - 1) / 3);

        return sprintf("%.{$decimals}f %s", $bytes / pow(1024, $factor), @$size[$factor]);
--- a/packages/iqcontent/laravel-filemanager/src/LfmPath.php
+++ b/packages/iqcontent/laravel-filemanager/src/LfmPath.php
@ -229,11 +229,14 @@ class LfmPath
        $parent_folder_id = $this->getModelParentFolderId();
        $this->storage->makeDirectory(0777, true, true);

-        IQContentFolder::create([
-            'folder_id' => $parent_folder_id,
-            'name' => $this->item_name,
-            'identifier' => $this->item_name,
-        ]);
+        if(!$this->is_thumb){
+            IQContentFolder::create([
+                'folder_id' => $parent_folder_id,
+                'name' => $this->item_name,
+                'identifier' => $this->item_name,
+            ]);
+        }
+
    }

    public function isDirectory()
@ -425,4 +428,16 @@ class LfmPath
        $this->storage->put($image->stream()->detach());
    }

+    public function makeThumbnailURL($file_name, $url)
+    {
+        // create folder for thumbnails
+        $this->setName(null)->thumb(true)->createFolder();
+        // generate cropped image content
+        $this->setName($file_name)->thumb(true);
+        $image = Image::make($url);
+       // $this->image_dimensions = $image->width()."x".$image->height();
+        $image->fit(config('lfm.thumb_img_width', 200), config('lfm.thumb_img_height', 200));
+        $this->storage->put($image->stream()->detach());
+    }
+
 }
--- a/packages/iqcontent/laravel-filemanager/src/lang/de/lfm.php
+++ b/packages/iqcontent/laravel-filemanager/src/lang/de/lfm.php
@ -43,6 +43,8 @@ return [
    'message-extension_not_found' => 'Installieren Sie gd oder imagick Erweiterung um Bilder zuzuschneiden, Größe ändern und Thumbnails zu erstellen.',
    'message-drop'      => 'Or drop files here to upload',

+    'file-name' => 'Neue Datei:',
+
    'error-rename' => 'Dateiname wird bereits verwendet!',
    'error-file-name'   => 'File name cannot be empty!',
    'error-file-empty' => 'Sie müssen eine Datei auswählen!',
@ -74,9 +76,9 @@ return [
    'btn-uploading' => 'Hochladen...',
    'btn-close' => 'Schließen',
    'btn-crop' => 'Zuschneiden',
-    'btn-cancel' => 'Stornieren',
+    'btn-cancel' => 'schließen',
    'btn-resize' => 'Größe ändern',
-    'btn-copy-crop'     => 'Copy & Crop',
+    'btn-copy-crop'     => 'kopieren & zuschneiden',
    'btn-crop-free'     => 'Free',
    'btn-confirm'       => 'Okay',
    'btn-open'          => 'Ordner öffnen Folder',
--- a/packages/iqcontent/laravel-filemanager/src/views/_crop.blade.php
+++ b/packages/iqcontent/laravel-filemanager/src/views/_crop.blade.php
@ -0,0 +1,104 @@
+<div class="row no-gutters">
+  <div class="col-xl-8">
+    <div class="crop-container">
+      <img src="{{ $img->url . '?timestamp=' . $img->time }}" class="img img-responsive">
+    </div>
+  </div>
+  <div class="col-xl-4">
+    <div class="text-center">
+      <div class="img-preview center-block"></div>
+      <br>
+      <div class="btn-group clearfix">
+        <label class="btn btn-info btn-aspectRatio active" onclick="changeAspectRatio(this, 16 / 9)">
+          16:9
+        </label>
+        <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, 4 / 3)">
+          4:3
+        </label>
+        <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, 1)">
+          1:1
+        </label>
+        <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, 2 / 3)">
+          2:3
+        </label>
+        <label class="btn btn-info btn-aspectRatio" onclick="changeAspectRatio(this, null)">
+          {{ trans('laravel-filemanager::lfm.btn-crop-free') }}
+        </label>
+      </div>
+      <br>
+      <br>
+      <div class="btn-group clearfix">
+        <button class="btn btn-secondary" onclick="loadItems()">{{ trans('laravel-filemanager::lfm.btn-cancel') }}</button>
+        <button class="btn btn-warning" onclick="performCropNew()">{{ trans('laravel-filemanager::lfm.btn-copy-crop') }}</button>
+        <button class="btn btn-primary" onclick="performCrop()">{{ trans('laravel-filemanager::lfm.btn-crop') }}</button>
+      </div>
+      <form id='cropForm'>
+        <input type="hidden" id="img" name="img" value="{{ $img->name }}">
+        <input type="hidden" id="working_dir" name="working_dir" value="{{ $working_dir }}">
+        <input type="hidden" id="dataX" name="dataX">
+        <input type="hidden" id="dataY" name="dataY">
+        <input type="hidden" id="dataWidth" name="dataWidth">
+        <input type="hidden" id="dataHeight" name="dataHeight">
+        <input type='hidden' name='_token' value='{{csrf_token()}}'>
+      </form>
+    </div>
+  </div>
+</div>
+
+<script>
+    var $image = null,
+        options = {};
+
+    $(document).ready(function () {
+        var $dataX = $('#dataX'),
+            $dataY = $('#dataY'),
+            $dataHeight = $('#dataHeight'),
+            $dataWidth = $('#dataWidth');
+
+        $image = $('.crop-container > img');
+        options = {
+            aspectRatio: 16 / 9,
+            preview: ".img-preview",
+            strict: false,
+            crop: function (data) {
+                // Output the result data for cropping image.
+                $dataX.val(Math.round(data.x));
+                $dataY.val(Math.round(data.y));
+                $dataHeight.val(Math.round(data.height));
+                $dataWidth.val(Math.round(data.width));
+            }
+        };
+        $image.cropper(options);
+    });
+    function changeAspectRatio(_this, aspectRatio) {
+        options.aspectRatio = aspectRatio;
+        $('.btn-aspectRatio.active').removeClass('active');
+        $(_this).addClass('active');
+        $('.img-preview').removeAttr('style');
+        $image.cropper('destroy').cropper(options);
+        return false;
+    }
+    function performCrop() {
+      performLfmRequest('cropimage', {
+        img: $("#img").val(),
+        working_dir: $("#working_dir").val(),
+        dataX: $("#dataX").val(),
+        dataY: $("#dataY").val(),
+        dataHeight: $("#dataHeight").val(),
+        dataWidth: $("#dataWidth").val(),
+        type: $('#type').val()
+      }).done(loadItems);
+    }
+
+    function performCropNew() {
+      performLfmRequest('cropnewimage', {
+        img: $("#img").val(),
+        working_dir: $("#working_dir").val(),
+        dataX: $("#dataX").val(),
+        dataY: $("#dataY").val(),
+        dataHeight: $("#dataHeight").val(),
+        dataWidth: $("#dataWidth").val(),
+        type: $('#type').val()
+      }).done(loadItems);
+    }
+</script>
--- a/packages/iqcontent/laravel-filemanager/src/views/colors.blade.php
+++ b/packages/iqcontent/laravel-filemanager/src/views/colors.blade.php
@ -0,0 +1,34 @@
+
+<input type="text" name="color" id="minicolors-hue" class="form-control" value="{{$color}}">
+
+
+
+<script>
+
+
+    $(document).ready(function () {
+
+      $("#notify").on("shown.bs.modal", function() {
+
+      });
+    });
+
+    function colorshue(title, color, callback) {
+
+
+        $('#notify').find('input').unbind('keypress.key13').bind('keypress.key13', function (e) {
+            if (e.which === 13) {
+                $('#notify').find('.btn-primary').click();
+            }
+        });
+       // $('#colorhue').modal('show').find('.modal-title').text(title);
+    }
+
+    $('#minicolors-hue').minicolors({
+        control:  'hue',
+        position: 'bottom ' + 'left',
+    });
+
+</script>
+
+
--- a/packages/iqcontent/laravel-filemanager/src/views/crop.blade.php
+++ b/packages/iqcontent/laravel-filemanager/src/views/crop.blade.php
@ -1,10 +1,15 @@
+<style>
+  img {
+    max-width: 100%;
+  }
+</style>
 <div class="row no-gutters">
-  <div class="col-xl-8">
+  <div class="col-12">
    <div class="crop-container">
      <img src="{{ $img->url . '?timestamp=' . $img->time }}" class="img img-responsive">
    </div>
  </div>
-  <div class="col-xl-4">
+  <div class="col-12">
    <div class="text-center">
      <div class="img-preview center-block"></div>
      <br>
@ -28,9 +33,8 @@
      <br>
      <br>
      <div class="btn-group clearfix">
-        <button class="btn btn-secondary" onclick="loadItems()">{{ trans('laravel-filemanager::lfm.btn-cancel') }}</button>
-        <button class="btn btn-warning" onclick="performCropNew()">{{ trans('laravel-filemanager::lfm.btn-copy-crop') }}</button>
-        <button class="btn btn-primary" onclick="performCrop()">{{ trans('laravel-filemanager::lfm.btn-crop') }}</button>
+        <button class="btn btn-primary" onclick="performCropNew()">{{ trans('laravel-filemanager::lfm.btn-copy-crop') }}</button>
+        <!-- <button class="btn btn-primary" onclick="performCrop()">{{ trans('laravel-filemanager::lfm.btn-crop') }}</button> -->
      </div>
      <form id='cropForm'>
        <input type="hidden" id="img" name="img" value="{{ $img->name }}">
@ -50,26 +54,39 @@
        options = {};

    $(document).ready(function () {
+
+      $("#notify").on("shown.bs.modal", function() {
        var $dataX = $('#dataX'),
-            $dataY = $('#dataY'),
-            $dataHeight = $('#dataHeight'),
-            $dataWidth = $('#dataWidth');
+                $dataY = $('#dataY'),
+                $dataHeight = $('#dataHeight'),
+                $dataWidth = $('#dataWidth');

        $image = $('.crop-container > img');
        options = {
-            aspectRatio: 16 / 9,
-            preview: ".img-preview",
-            strict: false,
-            crop: function (data) {
-                // Output the result data for cropping image.
-                $dataX.val(Math.round(data.x));
-                $dataY.val(Math.round(data.y));
-                $dataHeight.val(Math.round(data.height));
-                $dataWidth.val(Math.round(data.width));
-            }
+          aspectRatio: 16 / 9,
+          preview: ".img-preview",
+          strict: false,
+          crop: function (data) {
+            console.log(data);
+
+            // Output the result data for cropping image.
+            $dataX.val(Math.round(data.x));
+            $dataY.val(Math.round(data.y));
+            $dataHeight.val(Math.round(data.height));
+            $dataWidth.val(Math.round(data.width));
+          }
        };
        $image.cropper(options);
+      });
    });
+
+    function closeAndLoadItems() {
+
+      $image = $('.crop-container > img');
+      $image.cropper('destroy');
+      $('#notify').modal('hide').find('.modal-body').html("");
+      loadItems();
+    }
    function changeAspectRatio(_this, aspectRatio) {
        options.aspectRatio = aspectRatio;
        $('.btn-aspectRatio.active').removeClass('active');
@ -87,7 +104,7 @@
        dataHeight: $("#dataHeight").val(),
        dataWidth: $("#dataWidth").val(),
        type: $('#type').val()
-      }).done(loadItems);
+      }).done(closeAndLoadItems);
    }

    function performCropNew() {
@ -99,6 +116,6 @@
        dataHeight: $("#dataHeight").val(),
        dataWidth: $("#dataWidth").val(),
        type: $('#type').val()
-      }).done(loadItems);
+      }).done(closeAndLoadItems);
    }
 </script>
--- a/packages/iqcontent/laravel-filemanager/src/views/file.blade.php
+++ b/packages/iqcontent/laravel-filemanager/src/views/file.blade.php
@ -0,0 +1,25 @@
+
+
+<form id='fileForm'>
+    <div class="form-group">
+        <label class="form-label" for="file_type">Typ*</label>
+        <select class="custom-select" data-style="btn-default" name="from_file_type" id="from_file_type">
+            <option value="youtube">Youtube</option>
+            <!--<option value="txt">Text</option> -->
+        </select>
+    </div>
+
+    <div class="form-group">
+        <label class="form-label" for="file_type">Youtube Video ID*</label>
+        <input type="text" class="form-control" name="form_file_content" id="form_file_content" placeholder="Nur die ID des Video angeben" required>
+    </div>
+
+
+    <input type="hidden" id="working_dir" name="working_dir" value="{{ $working_dir }}">
+    <input type='hidden' name='_token' value='{{csrf_token()}}'>
+</form>
+<script>
+
+</script>
+
+