Completion input feature images

package-lock.json

@@ -3285,6 +3285,12 @@
             "integrity": "sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=",
             "dev": true
         },
+        "dropzone": {
+            "version": "5.7.1",
+            "resolved": "https://registry.npmjs.org/dropzone/-/dropzone-5.7.1.tgz",
+            "integrity": "sha512-eqcJafupMKRlVUihZtsLkzLn02WTPUMHeImP5ZtWm3ERObC/dv15te0qqn/X2rEKaSqRC0pNTHUBPgrPWcP52w==",
+            "dev": true
+        },
         "duplexify": {
             "version": "3.7.1",
             "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",

package.json

@@ -13,6 +13,7 @@
         "axios": "^0.19",
         "bootstrap": "^4.5.0",
         "cross-env": "^7.0",
+        "dropzone": "^5.7.1",
         "jquery": "^3.2",
         "laravel-mix": "^5.0.1",
         "lodash": "^4.17.13",

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

@@ -65,7 +65,12 @@ class ProductController extends Controller
 
     public function store(ProductRequest $request)
     {
-
+        /*foreach ($request->file('gallery_image') as $item) {
+            echo '<pre>';
+            print_r($item);
+            echo '</pre>';
+        }
+        die();*/
         $request->merge([
             'price' => preg_replace('/[^0-9]+/', '', $request->price),
             'sale_price' => preg_replace('/[^0-9]+/', '', $request->sale_price),
@@ -89,14 +94,14 @@ class ProductController extends Controller
             $file = $request->file('gallery_image');
             $type = 'gallery_image';
             $diskName = 'product';
-            $this->uploader($file, $diskName, $product, $type);
+            $this->uploadGallery($file, $diskName, $product, $type);
 
         }
         if ($request->has('featured_image')) {
             $file = $request->file('featured_image');
             $type = 'featured_image';
             $diskName = 'product';
-            $this->uploader($file, $diskName, $product, $type);
+            $this->uploadFeature($file, $diskName, $product, $type);
 
         }
 
@@ -166,7 +171,7 @@ class ProductController extends Controller
         }
     }
 //****************upload images in the product************************
-    public function uploader($file, $diskName, $product)
+    public function uploadFeature($file, $diskName, $product, $type)
     {
 
 
@@ -192,6 +197,7 @@ class ProductController extends Controller
             'path' => $upload,
             'mime_type' => $fileMimeType,
             'extension' => $fileExtension,
+            'type' => $type
 
 
         ];
@@ -209,6 +215,38 @@ class ProductController extends Controller
         session()->flash('image_deleted',$msg);
         return redirect()->back();
     }
+    public function uploadGallery($files, $diskName, $product, $type)
+    {
+        foreach ($files as $file) {
+            $fileExtension = $file->getClientOriginalExtension();
+
+            $fileMimeType = $file->getMimeType();
+
+            $afterDiskRoot = '/' . jdate()->format('Y') . '/' . jdate()->format('m');
+
+            $fileName = jdate(time())->format('Ymd') . '_' . $file->getClientOriginalName();
+
+            $filePath = storage_path('app/public/' . $diskName . $afterDiskRoot . '/' . $fileName);
+
+            if (File::exists($filePath)) {
+                $fileName = time() . '_' . $fileName;
+            }
 
+            $upload = $file->storeAs($afterDiskRoot, $fileName, $diskName);
+
+
+            $uploadData = [
+                'name' => $fileName,
+                'path' => $upload,
+                'mime_type' => $fileMimeType,
+                'extension' => $fileExtension,
+                'type' => $type
+            ];
+
+            $uploaded = $product->uploads()->create($uploadData);
+
+        }
+
+    }
 
 }

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

@@ -31,7 +31,7 @@ class ProductRequest extends FormRequest
             'status' => ['required'],
             'discription' => ['required'],
             'categories' => ['required'],
-           'gallery_image' => ['required', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
+          'gallery_image.*' => ['required', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
            'featured_image' => ['required', 'image', 'mimes:jpeg,jpg,png,gif', 'max:8000'],
 
         ];

packages/product/src/Models/Product.php

@@ -12,7 +12,7 @@ class Product extends Model
 {
     use SoftDeletes;
 
-   protected $fillable = ['title', 'discription', 'price', 'creator_id', 'type', 'status', 'sale_price', 'sku', 'slug', 'gallery_image', 'feature_image'];
+   protected $fillable = ['title', 'discription', 'price', 'creator_id', 'type', 'status', 'sale_price', 'sku', 'slug'];
 //    protected $guarded = [];
 
     public function user()

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

@@ -27,29 +27,13 @@
                 border: 0px;
                 background-color: #fff;
             }
-            .btn-file {
-                position: relative;
-                overflow: hidden;
-            }
-            .btn-file input[type=file] {
-                position: absolute;
-                top: 0;
-                right: 0;
-                min-width: 100%;
-                min-height: 100%;
-                font-size: 100px;
-                text-align: right;
-                filter: alpha(opacity=0);
-                opacity: 0;
-                outline: none;
-                background: white;
-                cursor: inherit;
-                display: block;
-            }
 
-            #img-upload{
-                width: 100%;
+            .file_img {
+                width: 100px;
+                height: 150px;
             }
+
+            .
         </style>
     @endslot
     @slot('subject')
@@ -71,7 +55,7 @@
                             @endcomponent
                             <div class="card-body mx-lg-5 px-lg-3">
                                 <form method="POST" action="{{ route('products.store') }}"
-                                      class="dropzone" id="dropzone"  enctype="multipart/form-data" >
+                                      enctype="multipart/form-data">
                                     @csrf
 
                                     <div class="form-group">
@@ -117,9 +101,12 @@
                                                     class="form-control @error('type') is-invalid @enderror" name="type"
                                                     value="{{ old('type') }}" autocomplete="type">
                                                 <option value="">انتخاب کنید</option>
-                                                <option value="0" {{ (old('type') == '0') ? 'selected' : '' }}>ساده </option>
-                                                <option value="1" {{ (old('type') == '1') ? 'selected' : '' }}>متغیر </option>
-                                                <option value="2" {{ (old('type') == '2') ? 'selected' : '' }}>باندل </option>
+                                                <option value="0" {{ (old('type') == '0') ? 'selected' : '' }}>ساده
+                                                </option>
+                                                <option value="1" {{ (old('type') == '1') ? 'selected' : '' }}>متغیر
+                                                </option>
+                                                <option value="2" {{ (old('type') == '2') ? 'selected' : '' }}>باندل
+                                                </option>
 
                                             </select>
 
@@ -174,8 +161,8 @@
                                             </select>
                                             @error('status')
                                             <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
+                                               <strong>{{ $message }}</strong>
+                                            </span>
                                             @enderror
                                         </div>
                                     </div>
@@ -214,50 +201,54 @@
                                         @enderror
 
                                     </div>
-                                    <div class="file-upload-wrapper">
-                                        <input type="file" id="input-file-now-custom-2" class="file-upload"
-                                               data-height="500" />
-                                    </div>
-                                    <div class="form-group">
+                                    <div class="row col-md-4">
+                                        <div class="form-group ">
 
-                                        <label for="title">{{ __('product.feature_image') }}</label><i
-                                            class="required">&nbsp; *</i>
-                                        <input type="file" name="file" id="profile-img"
-                                               data-input="thumbnail" data-preview="holder"
-                                               class="form-control photo @error('featured_image') is-invalid  @enderror"
-                                               value="{{old('featured_image')}}" autocomplete="featured_image" autofocus multiple>
-                                        @error('featured_image')
-                                        <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
-                                        @enderror
-                                        <div class="gallery_files">
-                                            @if( old( 'featured_image' ) )
-                                                <div class="gallery_file_upload mb-2">
-                                                    <div class="file_info">
-                                                        <a class="uploaded_file_thumbnail" target="_blank" href="{{ Storage::url( old( 'featured_image' ) ) }}">
-                                                            <img src="" id="profile-img-tag" width="200px" />
-                                                        </a>
-                                                        <span class="file_name">{{ basename( old( 'featured_image' ) ) }}</span>
-
-                                                    </div>
-                                                    <span class="delete_file"><i class="fas fa-times"></i></span>
-                                                </div>
-                                            @endif
+
+                                            <label for="title">{{ __('product.featured_image') }}</label><i
+                                                class="required">&nbsp; *</i>
+                                            <input type="file" name="featured_image"
+
+                                                   class="form-control photo  browse @error('featured_image') is-invalid  @enderror"
+                                                   value="{{old('featured_image')}}" autocomplete="featured_image"
+                                                   autofocus accept="image/*">
+
+
+                                            @error('featured_image')
+                                            <span class="invalid-feedback" role="alert">
+                                                 <strong>{{ $message }}</strong>
+                                            </span>
+                                            @enderror
+                                            <div class="ml-2 col-sm-6 ">
+
+                                                <img src="" id="preview" class="img-thumbnail">
+                                            </div>
                                         </div>
                                     </div>
-                                    <div class="form-group">
-                                        <label for="title">{{ __('product.gallery_image') }}</label><i
-                                            class="required">&nbsp; *</i>
-                                        <input type="file" name="gallery_image" id="gallery_image"
+                                    <div class="row">
+                                        <span class="btn btn-sm btn-success file_creator"><i
+                                                class="fa fa-plus"></i></span>
+                                        <div class="col-md-4 last_image">
+                                            <div class="form-group ">
+                                                <label for="title">{{ __('product.gallery_image') }}</label><i
+                                                    class="required">&nbsp; *</i>
+                                                <input type="file" name="gallery_image[]" id="gallery_image"
 
-                                               class="form-control photo @error('gallery_image') is-invalid  @enderror"
-                                               value="{{old('gallery_image')}}" autocomplete="gallery_image" autofocus multiple>
-                                        @error('gallery_image')
-                                        <span class="invalid-feedback" role="alert">
-                                            <strong>{{ $message }}</strong>
-                                        </span>
-                                        @enderror
+                                                       class="form-control photo @error('gallery_image') is-invalid  @enderror"
+                                                       value="{{old('gallery_image')}}" autocomplete="gallery_image"
+                                                       autofocus multiple>
+
+                                                @error('gallery_image')
+                                                <span class="invalid-feedback" role="alert">
+                                                    <strong>{{ $message }}</strong>
+                                                </span>
+                                                @enderror
+                                                <div class="ml-2 col-sm-6 ">
+
+                                                    <img src="" id="previewGallery" class="img-thumbnail">
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                     <div class="form-group mb-0">
                                         <div class="">
@@ -267,7 +258,6 @@
 
                                             <a href={{ route('products.index') }} type="button" class="btn btn-warning">
                                                 انصراف</a>
-
                                         </div>
                                     </div>
                                 </form>
@@ -284,7 +274,120 @@
 
     @slot('script')
         <script>
-        $('.file-upload').file_upload();
+
+            $(document).on('click', '.file_creator', function () {
+                $(".last_image:last").after($(".last_image:last").clone());
+
+            });
+
+            $(document).on("click", ".browse", function () {
+                var file = $(this).parents().find(".file");
+                file.trigger("click");
+            });
+            // show images feature
+            $('input[name="featured_image"]').change(function (e) {
+                var fileName = e.target.files[0].name;
+                $("#file").val(fileName);
+
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    // get loaded data and render thumbnail.
+                    document.getElementById("preview").src = e.target.result;
+
+                };
+                // read the image file as a data URL.
+                reader.readAsDataURL(this.files[0]);
+            });
+            //**************************show images gallery**********************************************
+            $(document).on("click", ".browse", function () {
+                var file = $(this).parents().find(".file");
+                file.trigger("click");
+            });
+            $('input[name="gallery_image[]"]').change(function (e) {
+                var fileName = e.target.files[0].name;
+                $("#file").val(fileName);
+
+                var reader = new FileReader();
+                reader.onload = function (e) {
+                    // get loaded data and render thumbnail.
+                    document.getElementById("previewGallery").src = e.target.result;
+
+                };
+                // read the image file as a data URL.
+                reader.readAsDataURL(this.files[0]);
+            });
+        //    ****************************************
+            $('.attachment_upload').change(function(){
+                var target = $(this).closest('.attachments');
+
+                for( let i=0; i<$(this).prop('files').length; i++ ){
+                    let file_id = uniqid();
+                    var markup = '<div class="attachment_file_upload mb-2" id="' + file_id + '">' +
+                        '<span class="delete_file"><i class="fas fa-times"></i></span>' +
+                        '<div class="file_info">' +
+                        '<a href="#"><span class="file_name">' + $(this).prop('files')[i].name + '</span></a>' +
+                        '<input class="uploaded_file_path" type="hidden">' +
+                        '</div>' +
+                        '<div class="progress">' +
+                        '<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>' +
+                        '</div>' +
+                        '</div>';
+                    target.find('.uploaded_files').append(markup);
+                    var formData = new FormData();
+                    formData.append('file', $(this).prop('files')[i]);
+                    formData.append('file_type', 'attachment');
+                    formData.append('object_type', target.attr('data-object-type'));
+                    formData.append('object_id', target.attr('data-object-id'));
+                    let fail_message = '<span class="ltr">آپلود فایل ' + $(this).prop('files')[i].name + ' با خطا مواجه شد.</span>';
+                    $.ajax({
+                        url: ajax_upload_url,
+                        async: true,
+                        data: formData,
+                        processData: false,
+                        contentType: false,
+                        dataType: 'json',
+                        type: 'post',
+                        success: function(response){
+                            if( response.status == 1 ){
+                                $('#' + file_id ).find('a').attr('href', response.file_url );
+                                $('#' + file_id ).find('.uploaded_file_path').val( response.file_path );
+                                $('#' + file_id ).find('.progress').remove();
+                            }
+                        },
+                        error: function(response){
+                            if( response.status == 422 ){
+                                var response_text = $.parseJSON( response.responseText );
+                                var text = fail_message;
+                                for( var j=0; j<response_text.errors.file.length; j++ ){
+                                    text += "<br />" + response_text.errors.file[j];
+                                }
+                                Swal.fire({
+                                    title: 'خطا در آپلود فایل',
+                                    html: text,
+                                    type: 'error',
+                                    customClass: {
+                                        icon: 'swal2-arabic-question-mark'
+                                    },
+                                    confirmButtonText: 'تایید'
+                                })
+                            }
+                        },
+                        xhr: function() {
+                            var myXhr = $.ajaxSettings.xhr();
+                            if(myXhr.upload){
+                                myXhr.upload.addEventListener(
+                                    'progress',
+                                    function(e){
+                                        progress( e, file_id );
+                                    },
+                                    false);
+                            }
+                            return myXhr;
+                        }
+                    });
+                }
+                $(this).val('');
+            });
         </script>
     @endslot
 

resources/lang/fa/product.php

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