From 53357c17c9f1b36acb053f3e8f205762cf9eba99 Mon Sep 17 00:00:00 2001
From: jitendra <jitendra@webkul.com>
Date: Thu, 9 Aug 2018 17:37:56 +0530
Subject: [PATCH] Product Image Upload Added

---
 config/filesystems.php                        |  4 +-
 .../views/catalog/attributes/create.blade.php |  4 +-
 .../views/catalog/attributes/edit.blade.php   |  4 +-
 .../products/accordians/images.blade.php      |  4 +-
 .../views/catalog/products/edit.blade.php     |  3 +-
 packages/Webkul/Channel/src/Channel.php       |  4 +
 ..._27_113941_create_product_images_table.php |  4 +-
 .../Http/Controllers/ProductController.php    |  2 -
 .../Product/src/Models/ProductImage.php       | 41 ++++++++-
 .../Repositories/ProductImageRepository.php   | 71 +++++++++++++++
 .../src/Repositories/ProductRepository.php    | 14 +++
 .../views/customers/signup/index.blade.php    | 89 +++++++++++--------
 .../assets/images/placeholder-icon.svg        | 28 ++++++
 .../assets/js/components/image/image-item.vue | 56 ++++++++----
 .../js/components/image/image-wrapper.vue     | 47 ++++++++--
 .../Ui/src/Resources/assets/sass/app.scss     | 53 ++++++++++-
 16 files changed, 350 insertions(+), 78 deletions(-)
 create mode 100644 packages/Webkul/Product/src/Repositories/ProductImageRepository.php
 create mode 100644 packages/Webkul/Ui/src/Resources/assets/images/placeholder-icon.svg

diff --git a/config/filesystems.php b/config/filesystems.php
index 77fa5ded1..25a84a4bd 100644
--- a/config/filesystems.php
+++ b/config/filesystems.php
@@ -13,7 +13,7 @@ return [
     |
     */
 
-    'default' => env('FILESYSTEM_DRIVER', 'local'),
+    'default' => env('FILESYSTEM_DRIVER', 'public'),
 
     /*
     |--------------------------------------------------------------------------
@@ -51,7 +51,7 @@ return [
         'public' => [
             'driver' => 'local',
             'root' => storage_path('app/public'),
-            'url' => env('APP_URL').'/storage',
+            'url' => env('APP_URL').'/public/storage',
             'visibility' => 'public',
         ],
 
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
index 3e64fc41f..0c721c891 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/create.blade.php
@@ -131,13 +131,13 @@
                                 </select>
                             </div>
                         
-                            <!--<div class="control-group">
+                            <div class="control-group">
                                 <label for="value_per_channel">{{ __('admin::app.catalog.attributes.value_per_channel') }}</label>
                                 <select class="control" id="value_per_channel" name="value_per_channel">
                                     <option value="0">{{ __('admin::app.catalog.attributes.no') }}</option>
                                     <option value="1">{{ __('admin::app.catalog.attributes.yes') }}</option>
                                 </select>
-                            </div>-->
+                            </div>
                         
                             <div class="control-group">
                                 <label for="is_filterable">{{ __('admin::app.catalog.attributes.is_filterable') }}</label>
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php
index 8cab79962..5775d0848 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/attributes/edit.blade.php
@@ -174,7 +174,7 @@
                                 <input type="hidden" name="value_per_locale" value="{{ $attribute->value_per_locale }}"/>
                             </div>
                         
-                            <!--<div class="control-group">
+                            <div class="control-group">
                                 <label for="value_per_channel">{{ __('admin::app.catalog.attributes.value_per_channel') }}</label>
                                 <select class="control" id="value_per_channel" name="value_per_channel" disabled>
                                     <option value="0" {{ $attribute->value_per_channel ? '' : 'selected' }}>
@@ -185,7 +185,7 @@
                                     </option>
                                 </select>
                                 <input type="hidden" name="value_per_channel" value="{{ $attribute->value_per_channel }}"/>
-                            </div>-->
+                            </div>
                         
                             <div class="control-group">
                                 <label for="is_filterable">{{ __('admin::app.catalog.attributes.is_filterable') }}</label>
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/images.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/images.blade.php
index fe72ed819..929af4a50 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/images.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/products/accordians/images.blade.php
@@ -1,7 +1,7 @@
 <accordian :title="'{{ __($accordian['name']) }}'" :active="true">
     <div slot="body">
-
-        <image-wrapper :button-label="'{{ __('admin::app.catalog.products.add-image-btn-title') }}'" input-name="images" multiple="true"></image-wrapper>
+    
+        <image-wrapper :button-label="'{{ __('admin::app.catalog.products.add-image-btn-title') }}'" input-name="images" :images='@json($product->images)'></image-wrapper>
 
     </div>
 </accordian>
\ No newline at end of file
diff --git a/packages/Webkul/Admin/src/Resources/views/catalog/products/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/catalog/products/edit.blade.php
index 68873be38..c7353c7f1 100644
--- a/packages/Webkul/Admin/src/Resources/views/catalog/products/edit.blade.php
+++ b/packages/Webkul/Admin/src/Resources/views/catalog/products/edit.blade.php
@@ -9,7 +9,7 @@
         <?php $locale = request()->get('locale') ?: app()->getLocale(); ?>
         <?php $channel = request()->get('channel') ?: channel()->getChannel(); ?>
 
-        <form method="POST" action="" @submit.prevent="onSubmit">
+        <form method="POST" action="" @submit.prevent="onSubmit" enctype="multipart/form-data">
 
             <div class="page-header">
 
@@ -133,6 +133,7 @@
 
 @section('javascript')
     <script>
+
         $(document).ready(function () {
             $('#channel-switcher, #locale-switcher').on('change', function (e) {
                 $('#channel-switcher').val()
diff --git a/packages/Webkul/Channel/src/Channel.php b/packages/Webkul/Channel/src/Channel.php
index 67dd6afb6..d0b752193 100644
--- a/packages/Webkul/Channel/src/Channel.php
+++ b/packages/Webkul/Channel/src/Channel.php
@@ -18,4 +18,8 @@ class Channel
 
         return $channel->code;
     }
+
+    public function getChannelModel() {
+        return ChannelModel::first();
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Database/Migrations/2018_07_27_113941_create_product_images_table.php b/packages/Webkul/Product/src/Database/Migrations/2018_07_27_113941_create_product_images_table.php
index 7d5468d5c..53dcc84a7 100644
--- a/packages/Webkul/Product/src/Database/Migrations/2018_07_27_113941_create_product_images_table.php
+++ b/packages/Webkul/Product/src/Database/Migrations/2018_07_27_113941_create_product_images_table.php
@@ -15,9 +15,9 @@ class CreateProductImagesTable extends Migration
     {
         Schema::create('product_images', function (Blueprint $table) {
             $table->increments('id');
-            $table->string('type');
+            $table->string('type')->nullable();
             $table->string('path');
-            $table->integer('product_id')->unsigned()->nullable();
+            $table->integer('product_id')->unsigned();
             $table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
         });
     }
diff --git a/packages/Webkul/Product/src/Http/Controllers/ProductController.php b/packages/Webkul/Product/src/Http/Controllers/ProductController.php
index 0977dabf0..2e2806a82 100644
--- a/packages/Webkul/Product/src/Http/Controllers/ProductController.php
+++ b/packages/Webkul/Product/src/Http/Controllers/ProductController.php
@@ -161,8 +161,6 @@ class ProductController extends Controller
      */
     public function update(ProductForm $request, $id)
     {
-        dd(request()->all());
-        
         $this->product->update(request()->all(), $id);
 
         session()->flash('success', 'Product updated successfully.');
diff --git a/packages/Webkul/Product/src/Models/ProductImage.php b/packages/Webkul/Product/src/Models/ProductImage.php
index 8f1edfa6d..7e07c7344 100644
--- a/packages/Webkul/Product/src/Models/ProductImage.php
+++ b/packages/Webkul/Product/src/Models/ProductImage.php
@@ -4,12 +4,13 @@ namespace Webkul\Product\Models;
 
 use Illuminate\Database\Eloquent\Model;
 use Webkul\Product\Models\Product;
+use Illuminate\Support\Facades\Storage;
 
 class ProductImage extends Model
 {
     public $timestamps = false;
 
-    protected $fillable = [];
+    protected $fillable = ['path', 'product_id'];
 
     /**
      * Get the product that owns the image.
@@ -18,4 +19,42 @@ class ProductImage extends Model
     {
         return $this->belongsTo(Product::class);
     }
+
+    /**
+     * Get image url for the product image.
+     */
+    public function url()
+    {
+        return Storage::url($this->path);
+    }
+
+    /**
+     * Get image url for the product image.
+     */
+    public function getUrlAttribute()
+    {
+        return $this->url();
+    }
+    
+    /**
+     * @param string $key
+     *
+     * @return bool
+     */
+    public function isCustomAttribute($attribute)
+    {
+        return $this->attribute_family->custom_attributes->pluck('code')->contains($attribute);
+    }
+
+    /**
+     * @return array
+     */
+    public function toArray()
+    {
+        $array = parent::toArray();
+
+        $array['url'] = $this->url;
+
+        return $array;
+    }
 }
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Repositories/ProductImageRepository.php b/packages/Webkul/Product/src/Repositories/ProductImageRepository.php
new file mode 100644
index 000000000..7f5925c70
--- /dev/null
+++ b/packages/Webkul/Product/src/Repositories/ProductImageRepository.php
@@ -0,0 +1,71 @@
+<?php 
+
+namespace Webkul\Product\Repositories;
+ 
+use Illuminate\Support\Facades\Storage;
+use Webkul\Core\Eloquent\Repository;
+
+/**
+ * Product Image Reposotory
+ *
+ * @author    Jitendra Singh <jitendra@webkul.com>
+ * @copyright 2018 Webkul Software Pvt Ltd (http://www.webkul.com)
+ */
+class ProductImageRepository extends Repository
+{    
+    /**
+     * Specify Model class name
+     *
+     * @return mixed
+     */
+    function model()
+    {
+        return 'Webkul\Product\Models\ProductImage';
+    }
+
+    /**
+     * @param array $data
+     * @param mixed $product
+     * @return mixed
+     */
+    public function uploadImages($data, $product)
+    {
+        $previousImageIds = $product->images()->pluck('id');
+
+        if(isset($data['images'])) {
+            foreach ($data['images'] as $imageId => $image) {
+                $file = 'images.' . $imageId;
+                $dir = 'product/' . $product->id;
+
+                if (str_contains($imageId, 'image_')) {
+                    $this->create([
+                            'path' => request()->file($file)->store($dir),
+                            'product_id' => $product->id
+                        ]);
+                } else {
+                    if(is_numeric($index = $previousImageIds->search($imageId))) {
+                        $previousImageIds->forget($index);
+                    }
+
+                    if(request()->hasFile($file)) {
+                        if($imageModel = $this->find($imageId)) {
+                            Storage::delete($imageModel->path);
+                        }
+
+                        $this->update([
+                                'path' => request()->file($file)->store($dir)
+                            ], $imageId);
+                    }
+                }
+            }
+        }
+
+        foreach ($previousImageIds as $imageId) {
+            if($imageModel = $this->find($imageId)) {
+                Storage::delete($imageModel->path);
+
+                $this->delete($imageId);
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/Webkul/Product/src/Repositories/ProductRepository.php b/packages/Webkul/Product/src/Repositories/ProductRepository.php
index ebbe3fac1..d253245d6 100644
--- a/packages/Webkul/Product/src/Repositories/ProductRepository.php
+++ b/packages/Webkul/Product/src/Repositories/ProductRepository.php
@@ -8,6 +8,7 @@ use Webkul\Attribute\Repositories\AttributeRepository;
 use Webkul\Attribute\Repositories\AttributeOptionRepository;
 use Webkul\Product\Repositories\ProductAttributeValueRepository;
 use Webkul\Product\Repositories\ProductInventoryRepository;
+use Webkul\Product\Repositories\ProductImageRepository;
 use Webkul\Product\Models\ProductAttributeValue;
 
 /**
@@ -46,6 +47,13 @@ class ProductRepository extends Repository
      */
     protected $productInventory;
 
+    /**
+     * ProductImageRepository object
+     *
+     * @var array
+     */
+    protected $productImage;
+
     /**
      * Create a new controller instance.
      *
@@ -53,6 +61,7 @@ class ProductRepository extends Repository
      * @param  Webkul\Attribute\Repositories\AttributeOptionRepository     $attributeOption
      * @param  Webkul\Product\Repositories\ProductAttributeValueRepository $attributeValue
      * @param  Webkul\Product\Repositories\ProductInventoryRepository      $productInventory
+     * @param  Webkul\Product\Repositories\ProductImageRepository          $productImage
      * @return void
      */
     public function __construct(
@@ -60,6 +69,7 @@ class ProductRepository extends Repository
         AttributeOptionRepository $attributeOption,
         ProductAttributeValueRepository $attributeValue,
         ProductInventoryRepository $productInventory,
+        ProductImageRepository $productImage,
         App $app)
     {
         $this->attribute = $attribute;
@@ -70,6 +80,8 @@ class ProductRepository extends Repository
 
         $this->productInventory = $productInventory;
 
+        $this->productImage = $productImage;
+
         parent::__construct($app);
     }
 
@@ -183,6 +195,8 @@ class ProductRepository extends Repository
         }
 
         $this->productInventory->saveInventories($data, $product);
+        
+        $this->productImage->uploadImages($data, $product);
 
         return $product;
     }
diff --git a/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php b/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php
index cc0e1b38e..686710abf 100644
--- a/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/customers/signup/index.blade.php
@@ -1,44 +1,55 @@
 @extends('shop::store.layouts.master')
+
 @section('content-wrapper')
-<div class="content">
-    <div class="sign-up-text">
-        Already have an account - <a href="{{ route('customer.session.index') }}">Sign In</a>
-    </div>
-    <form method="post" action="{{ route('customer.register.create') }}">
-        {{ csrf_field() }}
-        <div class="login-form">
-            <div class="login-text">Sign Up</div>
-            <div class="control-group">
-                <label for="email">First Name</label>
-                <input type="text" class="control" name="first_name">
-            </div>
-            <div class="control-group">
-                <label for="email">Last Name</label>
-                <input type="text" class="control" name="last_name">
-            </div>
-            <div class="control-group">
-                <label for="email">Email</label>
-                <input type="email" class="control" name="email">
-            </div>
-            <div class="control-group">
-                <label for="email">Password</label>
-                <input type="password" class="control" name="password">
-            </div>
-            <div class="control-group">
-                <label for="email">Confirm Password</label>
-                <input type="password" class="control" name="confirm_password">
-            </div>
-            <div class="signup-confirm">
-                <span class="checkbox">
-                    <input type="checkbox" id="checkbox2" name="agreement" required>
-                    <label class="checkbox-view" for="checkbox2"></label>
-                    <span>Agree <a href="">Terms</a> & <a href="">Conditions</a> by using this website.</span>
-                </span>
-
-            </div>
-            <input class="btn btn-primary btn-lg" type="submit" value="sign in">
+    <div class="content">
+        <div class="sign-up-text">
+            Already have an account - <a href="{{ route('customer.session.index') }}">Sign In</a>
         </div>
-    </form>
 
-</div>
+        <form method="post" action="{{ route('customer.register.create') }}">
+            {{ csrf_field() }}
+
+            <div class="login-form">
+                <div class="login-text">Sign Up</div>
+
+                <div class="control-group" :class="[errors.has('first_name') ? 'has-error' : '']">
+                    <label for="email">First Name</label>
+                    <input type="text" v-validate="'required'" class="control" name="first_name">
+                    <span class="control-error" v-if="errors.has('first_name')">@{{ errors.first('first_name') }}</span>
+                </div>
+
+                <div class="control-group">
+                    <label for="email">Last Name</label>
+                    <input type="text" class="control" name="last_name">
+                </div>
+
+                <div class="control-group">
+                    <label for="email">Email</label>
+                    <input type="email" class="control" name="email">
+                </div>
+
+                <div class="control-group">
+                    <label for="email">Password</label>
+                    <input type="password" class="control" name="password">
+                </div>
+
+                <div class="control-group">
+                    <label for="email">Confirm Password</label>
+                    <input type="password" class="control" name="confirm_password">
+                </div>
+
+                <div class="signup-confirm">
+                    <span class="checkbox">
+                        <input type="checkbox" id="checkbox2" name="agreement" required>
+                        <label class="checkbox-view" for="checkbox2"></label>
+                        <span>Agree <a href="">Terms</a> & <a href="">Conditions</a> by using this website.</span>
+                    </span>
+                </div>
+                
+                <input class="btn btn-primary btn-lg" type="submit" value="sign in">
+            </div>
+
+        </form>
+
+    </div>
 @endsection
diff --git a/packages/Webkul/Ui/src/Resources/assets/images/placeholder-icon.svg b/packages/Webkul/Ui/src/Resources/assets/images/placeholder-icon.svg
new file mode 100644
index 000000000..e17d9cbc3
--- /dev/null
+++ b/packages/Webkul/Ui/src/Resources/assets/images/placeholder-icon.svg
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="160px" height="114px" viewBox="0 0 160 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50 (54983) - http://www.bohemiancoding.com/sketch -->
+    <title>placeholder-icon</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Catalog-Product-New-Variable-Product" transform="translate(-144.000000, -1457.000000)" stroke="#C7C7C7" stroke-width="2">
+            <g id="2" transform="translate(104.000000, 860.000000)">
+                <g id="Image" transform="translate(20.000000, 528.000000)">
+                    <g id="Images" transform="translate(0.000000, 26.000000)">
+                        <g id="Block">
+                            <g id="Image-Icon">
+                                <g id="placeholder-icon" transform="translate(20.000000, 43.333333)">
+                                    <rect id="Rectangle-3" x="1" y="1" width="158" height="111.333333"></rect>
+                                    <rect id="Rectangle-3" x="17.6666667" y="17.6666667" width="121.333333" height="78"></rect>
+                                    <polyline id="Path-2" points="17.9238281 78.6588542 47.7115392 48.4681532 97.1757812 95.7462565"></polyline>
+                                    <polyline id="Path-3" points="73.7011719 72.7286606 110.238697 37.3952908 139.06543 66.2701823"></polyline>
+                                    <circle id="Oval-3" cx="75" cy="41.6666667" r="8.33333333"></circle>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-item.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-item.vue
index dad64d8d5..8a15cc83d 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-item.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-item.vue
@@ -1,7 +1,13 @@
 <template>
-    <div>
-        <input type="file" :name="finalInputName" ref="imageInput"/>
-    </div>
+    <label class="image-item" :for="_uid" v-bind:class="{ 'has-image': imageData.length > 0 }">
+        <input type="hidden" :name="finalInputName"/>
+
+        <input type="file" accept="image/*" :name="finalInputName" ref="imageInput" :id="_uid" @change="addImageView($event)"/>
+
+        <img class="preview" :src="imageData" v-if="imageData.length > 0">
+
+        <label class="remove-image" @click="removeImage()">{{ removeButtonLabel }}</label>
+    </label>
 </template>
 
 <script>
@@ -13,10 +19,8 @@
                 default: 'attachments'
             },
 
-            multiple: {
-                type: [Boolean, String],
-                required: false,
-                default: true
+            removeButtonLabel: {
+                type: String,
             },
 
             image: {
@@ -26,22 +30,42 @@
             }
         },
 
+        data: function() {
+            return {
+                imageData: ''
+            }
+        },
+
         mounted () {
-            if(!this.image.id) {
-                var element = this.$refs.imageInput;
-                element.dispatchEvent(new Event("click"));
-                element.click();
+            if(this.image.id && this.image.url) {
+                this.imageData = this.image.url;
             }
         },
 
         computed: {
             finalInputName () {
-                if(this.multiple)
-                    return this.inputName + '[]';
-                
-                return this.inputName;
+                return this.inputName + '[' + this.image.id + ']';
+            }
+        },
+
+        methods: {
+            addImageView () {
+                var imageInput = this.$refs.imageInput;
+
+                if (imageInput.files && imageInput.files[0]) {
+                    var reader = new FileReader();
+
+                    reader.onload = (e) => {
+                        this.imageData = e.target.result;
+                    }
+
+                    reader.readAsDataURL(imageInput.files[0]);
+                }
+            },
+
+            removeImage () {
+                this.$emit('onRemoveImage', this.image)
             }
         }
-
     }
 </script>
\ No newline at end of file
diff --git a/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-wrapper.vue b/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-wrapper.vue
index 3d7b4f4fd..e58134539 100644
--- a/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-wrapper.vue
+++ b/packages/Webkul/Ui/src/Resources/assets/js/components/image/image-wrapper.vue
@@ -1,7 +1,14 @@
 <template>
     <div>
         <div class="image-wrapper">
-            <image-item v-for='(image, index) in images' :key='image.uid' :image="image" :input-name="inputName" :multiple="multiple" @onRemoveImage="removImage($event)"></image-item>
+            <image-item 
+                v-for='(image, index) in items' 
+                :key='image.id' 
+                :image="image" 
+                :input-name="inputName" 
+                :remove-button-label="removeButtonLabel"
+                @onRemoveImage="removeImage($event)"
+            ></image-item>
         </div>
 
         <label class="btn btn-lg btn-primary" style="display: inline-block" @click="createFileType">{{ buttonLabel }}</label>
@@ -17,18 +24,18 @@
                 default: 'Add Image'
             },
 
+            removeButtonLabel: {
+                type: String,
+                required: false,
+                default: 'Remove Image'
+            },
+
             inputName: {
                 type: String,
                 required: false,
                 default: 'attachments'
             },
 
-            multiple: {
-                type: [Boolean, String],
-                required: false,
-                default: true
-            },
-
             images: {
                 type: Array,
                 required: false,
@@ -36,9 +43,33 @@
             }
         },
 
+        data: function() {
+            return {
+                imageCount: 0,
+                items: []
+            }
+        },
+
+        created () {
+            var this_this = this;
+            
+            this.images.forEach(function(image) {
+                this_this.items.push(image)
+                this_this.imageCount++;
+            });
+        },
+
         methods: {
             createFileType () {
-                this.images.push({});
+                this.imageCount++;
+
+                this.items.push({'id': 'image_' + this.imageCount});
+            },
+
+            removeImage (image) {
+                let index = this.items.indexOf(image)
+
+                Vue.delete(this.items, index);
             }
         }
 
diff --git a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
index c26f99c8e..0a3e9cb1f 100644
--- a/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Ui/src/Resources/assets/sass/app.scss
@@ -954,7 +954,7 @@ h2 {
 
 .label {
     background: #E7E7E7;
-    border-radius: 2px;
+    @include border-radius(2px);
     padding: 8px;
     color: #000311;
     display: inline-block;
@@ -974,4 +974,55 @@ h2 {
     &.label-xl {
         padding: 14px;
     }
+}
+
+.image-wrapper {
+    margin-bottom: 20px;
+    display: inline-block;
+    width: 100%;
+
+    .image-item {
+        width: 200px;
+        height: 200px;
+        margin-right: 20px;
+        background: #F8F9FA;
+        @include border-radius(3px);
+        display: inline-block;
+        position: relative;
+        background-image: url("../images/placeholder-icon.svg");
+        background-repeat: no-repeat;
+        background-position: center;
+
+        img.preview {
+            width: 100%;
+            height: 100%;
+        }
+
+        input {
+            display: none;
+        }
+
+        .remove-image {
+            // display: none;
+            background-image: linear-gradient(-180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.24) 100%);
+            @include border-radius(0 0 4px 4px);
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            padding: 10px;
+            text-align: center;
+            color: #fff;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.24);
+            margin-right: 20px;
+            cursor: pointer;
+        }
+
+        &:hover .remove-image {
+            display: block;
+        }
+
+        &.has-image {
+            background-image: none;
+        }
+    }
 }
\ No newline at end of file