end feilde gallery images

packages/product/src/Http/Controllers/ProductController.php

@@ -71,6 +71,7 @@ class ProductController extends Controller
             echo '</pre>';
         }
         die();*/
+//        dd($request->all());
 
         $request->merge([
             'price' => preg_replace('/[^0-9]+/', '', $request->price),
@@ -92,11 +93,10 @@ class ProductController extends Controller
 
 
         if ($request->has('gallery_image')) {
-            $info = $request->only(['galleries[descriptionGallery]', 'galleries[captionGallery]']);
-            $file = $request->file('gallery_image');
+            $file = $request->only('gallery_image', 'captionGallery', 'descriptionGallery');
             $type = 'gallery_image';
             $diskName = 'product';
-            $this->uploadGallery($file, $diskName, $product, $type,$info);
+            $this->uploadGallery($file, $diskName, $product, $type);
 
         }
         if ($request->has('featured_image')) {
@@ -200,8 +200,8 @@ class ProductController extends Controller
             'mime_type' => $fileMimeType,
             'extension' => $fileExtension,
            'type' => $type,
-           'descriptionImg' => $info['featureDescription'],
-           'caption' => $info['featureCaption'],
+            'descriptionImg' => $info['featureDescription'],
+            'caption' => $info['featureCaption'],
 
 
         ];
@@ -221,7 +221,8 @@ class ProductController extends Controller
     }
     public function uploadGallery($files, $diskName, $product, $type)
     {
-        foreach ($files as $file) {
+//        dd($files);
+        foreach ($files['gallery_image'] as $key => $file) {
             $fileExtension = $file->getClientOriginalExtension();
 
             $fileMimeType = $file->getMimeType();
@@ -244,7 +245,9 @@ class ProductController extends Controller
                 'path' => $upload,
                 'mime_type' => $fileMimeType,
                 'extension' => $fileExtension,
-                'type' => $type
+                'type' => $type,
+                'descriptionImg' => $files['descriptionGallery'][$key],
+                'caption' => $files['captionGallery'][$key],
             ];
 
             $uploaded = $product->uploads()->create($uploadData);

packages/product/src/Http/Requests/ProductRequest.php

@@ -33,8 +33,8 @@ class ProductRequest extends FormRequest
             'categories' => ['required'],
             'featureDescription' => ['nullable'],
             'featureCaption' => ['nullable'],
-            'gallery_image.*' => ['required', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
-            'featured_image' => ['required', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
+            'gallery_image' => ['nullable'],
+            'featured_image' => ['nullable', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
             'galleries.*' => ['nullable']
 
         ];

packages/product/src/views/product/create.blade.php

@@ -29,10 +29,19 @@
             }
 
 
-            /* ---------------------------------------
+
   /* Fine Uploader Gallery View Styles
   /* ---------------------------------------*/
 
+            .media {
+                border-radius: 10px;
+                display: flex;
+                text-align: center;
+                margin: 10px;
+                padding: 10px;
+                border: 5px solid #752360;
+                align-items: flex-start;
+            }
 
             #gallery img {
                 width: 150px;
@@ -115,7 +124,10 @@
                 display: flex !important;
 
             }
-
+            .media-body {
+                flex: 1;
+                padding: 15px;
+            }
             #delete {
                 display: flex;
                 margin-left: -40px;
@@ -128,40 +140,33 @@
 
             /*    *****************************/
 
-            .sortable {
-                padding: 0;
-                -webkit-touch-callout: none;
-                -webkit-user-select: none;
-                -khtml-user-select: none;
-                -moz-user-select: none;
-                -ms-user-select: none;
-                user-select: none;
+            output{
+                display: flex;
+                /*flex-flow: row;*/
+                flex-wrap: wrap;
+                flex: none;
+
             }
+            output span{
+                padding: 5px;
 
-            .sortable li {
-display: flex;
-                width: 40%;
-                height: 50%;
-                overflow: hidden;
-                border: 1px solid red;
-                border-radius: 5px;
                 text-align: center;
-                margin: 5px;
             }
-
-
-            .fig img {
-                float: right;
+            list{
                 padding: 10px;
+                border:5px solid #752360;
+                text-align: center;
             }
-
-            .fig label {
-                float: right;
+            output span a{
+                position: absolute;
             }
-
-            .dz-preview {
+            .test{
                 padding: 10px;
             }
+            .DeleteImages{
+                border:5px solid #752360;
+                border-radius: 10px;
+            }
         </style>
     @endslot
     @slot('subject')
@@ -199,7 +204,7 @@ display: flex;
                                         </span>
                                         @enderror
                                     </div>
-                                    <div class="form-row ">
+                                    <div class="form-row">
                                         <div class="form-group col-lg-4">
                                             <label for="slug">{{ __('product.slug') }}</label>
                                             <input type="text" name="slug"
@@ -328,39 +333,37 @@ display: flex;
                                         </span>
                                         @enderror
                                     </div>
-
                                     <div class="form-group col-md-8">
-                                        <label for="title">{{ __('product.featured_image') }}</label><i
-                                            class="required">&nbsp; *</i>
-
-                                        <span class="btn btn-primary btn-file"> <input type="file" id="uploadImages"
-                                                                                       name="featured_image"
-                                                                                       accept="image/*"
-                                                                                       class="form-control photo  browse @error('featured_image') is-invalid  @enderror"
-                                                                                       value="{{old('featured_image')}}"
-                                                                                       autocomplete="featured_image"
-                                                                                       autofocus>تصویر شاخص </span>
+                                        <label for="title">
+                                            {{ __('product.featured_image') }}
+                                        </label> <i class="required">&nbsp; *</i>
+
+                                        <span class="btn btn-primary btn-file">
+                                            <input type="file" id="uploadImages" name="featured_image" accept="image/*"
+                                                class="form-control photo  browse @error('featured_image') is-invalid  @enderror"
+                                                 value="{{old('featured_image')}}" autocomplete="featured_image" autofocus>تصویر شاخص
+                                        </span>
                                         <div class="hide-element" id="previewImages">
                                             <div class="media">
                                                 <div class="media-left ">
-                                                    <a href="" role="button" class="btn btn-danger pull-right"
-                                                       id="delete"> <i
-                                                            class="icon fa fa-close"></i></a>
+                                                    <a href="" role="button" class="btn btn-danger pull-right" id="delete">
+                                                        <i class="icon fa fa-close"></i>
+                                                    </a>
                                                     <img class="media-object thumbnail " src=""
                                                          alt="" id="0" title="" data-toggle="modal"
                                                          data-target="#individualImagePreview">
                                                 </div>
+
                                                 <div class="media-body">
-                                                    <p><label for="featureDescription">توضیحات: </label><input type="text"
-                                                                                                        class="form-control"
-                                                                                                        value=""
-                                                                                                        name="featureDescription">
+                                                    <p>
+                                                        <label for="featureDescription">توضیحات: </label>
+                                                        <input type="text" class="form-control"  value="" name="featureDescription">
+                                                    </p>
+                                                    <p>
+                                                        <label for="featureCaption">عنوان: </label>
+                                                        <input type="text" class="form-control" value="" name="featureCaption">
                                                     </p>
-                                                    <p><label for="featureCaption">عنوان: </label><input type="text"
-                                                                                                  class="form-control"
-                                                                                                  value=""
-                                                                                                  name="featureCaption"></p>
-                                                    {{--  <p><label for="tags">Tags:max of 3 tags.comma seperated </label><input type="text" class="form-control" value="" name="tags" /></p>--}}
+
                                                 </div>
                                             </div>
                                         </div>
@@ -370,60 +373,24 @@ display: flex;
                                             </span>
                                         @enderror
                                     </div>
-
-                                        <div class="form-group col-md-12 ">
-                                            <label for="title" class="">{{ __('product.gallery_image') }}</label><i
-                                                class="required">&nbsp; *</i>
-{{--                                            <span class="btn btn-primary btn-file"><input type="file"--}}
-{{--                                                                                          name="gallery_image[]"--}}
-{{--                                                                                          id="file-dropzone"--}}
-{{--                                                                                          class=" form-control photo  @error('gallery_image') is-invalid  @enderror"--}}
-{{--                                                                                          autocomplete="gallery_image"--}}
-{{--                                                                                          autofocus>ساخت گالری</span>--}}
-                                            <input type="file"
-                                                   name="gallery_image[]"
-                                                   id="file-dropzone"
-                                                   class=" form-control photo  @error('gallery_image') is-invalid  @enderror"
-                                                   autocomplete="gallery_image"
-                                                   autofocus multiple>
-
-                                            <ul class="visualizacao sortable dropzone-previews">
-
-
-                                                <div class="preview col-md-6" style="display:none;" >
-                                                    <li >
-
-                                                        <div class="dz-preview dz-file-preview fig">
-
-
-                                                            <a href="" role="button" class="btn btn-danger pull-right"
-                                                               id="delete"> <i
-                                                                    class="icon fa fa-close"></i></a>
-                                                            <img data-dz-thumbnail>
-
-
-                                                            <label for="description">توضیحات: </label><input type="text"
-                                                                                                             class="form-control"
-                                                                                                             value=""
-                                                                                                             name="galleries[descriptionGallery][]">
-                                                            <label for="caption">عنوان: </label><input type="text"
-                                                                                                       class="form-control"
-                                                                                                       value=""
-                                                                                                       name="galleries[captionGallery][]">
-
-
-                                                        </div>
-
-
-                                                    </li>
-                                                </div>
-                                            </ul>
+                                    <div class="form-row">
+                                        <div class="upload-widget test ">
+
+                                            <div class="select">
+                                                <label for="title">
+                                                    {{ __('product.gallery_image') }}
+                                                </label>
+                                                <span class="btn btn-primary btn-file">
+                                                <input class="files" type="file" name="gallery_image[]" multiple>
+                                                    {{ __('product.gallery_images') }}
+                                                </span>
+                                                <output class="list" >
+                                                </output>
+                                            </div>
+                                            <div class="dropZone col-4">
+                                            </div>
                                         </div>
-
-
-
-                                    <div class="form-group col-md-7"></div>
-
+                                    </div>
                                     <div class="form-group mb-0">
                                         <div class="">
                                             <button type="submit" class="btn btn-primary">
@@ -449,24 +416,115 @@ display: flex;
 
         <script>
             //**************************show images gallery**********************************************
+            $(document).ready(function(){
+                $('.upload-widget').on('click', '.deleteGallary', function(e){
+                    e.preventDefault();
+                    $(this).closest(".DeleteImages").remove();
+                });
+            });
+            var FileUploader = (function() {
 
-            // $('#deleteG').click(function () {
-            //
-            //     $(this).closest('.preview').find('dz-preview').remove();
-            //
-            // });
+                function FileUploader(options) {
+                    options = options || {};
 
-            $('#file-dropzone').dropzone({
-                url: "/upload",
-                maxFilesize: 100,
-                paramName: "uploadfile",
-                maxThumbnailFilesize: 99999,
+                    this.widget = document.querySelector(options.className);
+                    this.dropZone = this.widget.querySelector('.dropZone');
+                    this.input = this.widget.querySelector('.files');
+                    this.output = this.widget.querySelector('.list');
+                };
 
-                previewsContainer: '.visualizacao',
-                previewTemplate: $('.preview').html(),
 
-            });
+                FileUploader.prototype.init = function() {
+                    var self = this;
 
+                    self.dropZone.addEventListener('drop', function(e) {self.handleFile(e, self);}, false);
+                    self.input.addEventListener('change', function(e) {self.handleFile(e, self);}, false);
+                    self.dropZone.addEventListener('dragover', self.handleDragOver, false);
+                };
+
+                //
+                FileUploader.prototype.handleFile = function(evt, that) {
+                    var self = that;
+                    var files;
+
+                    evt.stopPropagation();
+                    evt.preventDefault();
+
+                    if (evt.type === 'change') {
+                        files = evt.target.files;
+                    } else if (evt.type === 'drop') {
+                        files = evt.dataTransfer.files;
+                    }
+
+                    self.selectLogic(files, self);
+                };
+
+
+                FileUploader.prototype.handleDragOver = function(evt) {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                    evt.dataTransfer.dropEffect = 'link';
+                };
+
+
+                FileUploader.prototype.selectLogic = function(files, that) {
+                    var self = that;
+                    var reader;
+
+                    for (var i = 0, file; file = files[i]; i++) {
+
+                        reader = new FileReader();
+                        reader.onload = (function(theFile) {
+                            return function(e) {
+                                var
+                                    span = document.createElement('span'),
+                                    canvas = document.createElement('canvas'),
+                                    ctx = canvas.getContext('2d'),
+                                    image = new Image(),
+                                    ratio,
+                                    thumb;
+
+                                image.src = e.target.result;
+                                //size image
+                                image.onload = function() {
+                                    ratio = 150/image.width;
+                                    ratio = 150/image.height;
+
+
+                                    canvas.width = image.width * ratio;
+                                    canvas.height = image.height * ratio;
+                                    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+
+                                    // Gallery Description Input Fields
+                                    thumb = canvas.toDataURL(theFile.type);
+
+                                    span.innerHTML = '<div class="DeleteImages"><a href="" class="deleteGallary btn btn-danger pull-right"\n' +
+                                        '> <i\n' +
+                                        'class="icon fa fa-close"></i></a><img class="thumb" style="width: 250px; height: 250px;" src="' + thumb + '" title="' + escape(theFile.name) + '" /> <span style="display: block;"> ' +
+                                        '<label for="description">توضیحات: </label><input type="text"\n' +
+                                        ' class="form-control"\n' +
+                                        '   name="descriptionGallery[]">\n' +
+                                        ' <label for="caption">عنوان: </label><input type="text"\n' +
+                                        ' class="form-control"\n' +
+                                        '  name="captionGallery[]"></span></div>';
+                                }
+
+
+                                // span.addEventListener('click', function() {
+                                //     window.open(e.target.result);
+                                // });
+
+                                self.output.insertBefore(span, null);
+                            }
+                        })(file)
+                        reader.readAsDataURL(file);
+                    }
+                }
+                return FileUploader;
+            })();
+
+            var test = new FileUploader({className: '.test'});
+            test.init();
 
             //***************FEATURE IMAGES***************************************
             $(document).ready(function () {
@@ -486,10 +544,12 @@ display: flex;
                         $('#captionForImage').toggleClass('hide-element');
                     }
                 });
-                $('#delete').click(function () {
-                    console.log('click detected inside circl-o of delete');
-                    $(this).closest('#previewImages').find('.media').remove();
-                    $('#delete').toggleClass('fa-circle-o').toggleClass('fa-times-circle');
+                //Delete features Image
+                $(document).ready(function(){
+                    $('#previewImages').on('click', '#delete', function(e){
+                        e.preventDefault();
+                        $(this).closest(".media").remove();
+                    });
                 });
                 //namespace variable to determine whether to continue or not
                 var proceed = false;
@@ -670,8 +730,6 @@ display: flex;
                 }
             });
 
-            //    *******************************
-            //
         </script>
     @endslot
 

resources/lang/fa/product.php

@@ -10,6 +10,7 @@ return [
   'slug'        => 'slug',
   'title'       => 'عنوان',
   'gallery_image'       => 'عکس های محصول',
+  'gallery_images'       => 'ساخت گالری',
   'featured_image'       => 'تصویر شاخص',
 ];