add dropzone to test result form

app/Http/Controllers/TestResultController.php

@@ -12,6 +12,7 @@ use App\MedicalCenter;
 use App\TestType;
 use App\Gallery;
 use App\Uploadable;
+use App\Media;
 use Intervention\Image\ImageManagerStatic as Image;
 use Intervention\Image\ImageManager;
 use Illuminate\Support\Facades\Storage;
@@ -113,14 +114,12 @@ class TestResultController extends Controller
 
     public function store(StoreTestResultRequest $request)
     {
-        // dd($request->result);
         try {
             $return_value = \DB::transaction(function () use ($request) {
 
                 $TestResult = [
                     'user_id' => auth('api')->user()->id,
                     'cycle_number' => $request->cycle_number,
-                    // 'device_id' => $request->device_id,
                     'date' => $request->date,
                     'test_type_id' => $request->test_type_id,
                     'result' => $request->result,
@@ -174,25 +173,18 @@ class TestResultController extends Controller
                  }
                  ///////////////////////////////////////////////////////////////////////////Inputs
                  ///////////////////////////////////////////////////////////////////////////Images
-                 if ($request->imgs != null) {
+                 $Images = Media::whereNull('model_id')->where('batch_id', $request->file_batch_id)->get();
-
+                 if($Images){
-                     foreach ($request->imgs as $key => $img) {
+                   foreach ($Images as $Image) {
-                         $Image = $img;
+                       $NewPath = 'media'.'/TestResults'.'/'.$TestResultObj->id .'/'.$Image->file_name;
-                         $Manager = new ImageManager(array('driver' => 'imagick'));
+                       Storage::disk('public')->makeDirectory('TestResults'.'/'.$TestResultObj->id);
-                         $InterventionImage = $Manager->make($Image);
+                       if (\File::exists(public_path($Image->path))) {
-
+                         \File::move(public_path($Image->path), public_path($NewPath));
-                         // $InterventionImage = Image::make($Image);
+                       }
-                         $Mime = explode('/', $InterventionImage->mime());
+                       $Image->model_id = $TestResultObj->id;
-
+                       $Image->path = $NewPath;
-                         $ImageName = time().$key.'.'.$Mime[1];
+                       $Image->save();
-                         $Path = 'uploads'.'/TestResults'.'/'.$TestResultObj->id .'/'.$ImageName;
+                   }
-
-                         Storage::disk('public')->makeDirectory('TestResults'.'/'.$TestResultObj->id);
-                         $InterventionImage->save(public_path($Path));
-
-                         $GalleryObj = Gallery::create(['user_id' => auth('api')->user()->id, 'path' => $Path]);
-                         $Uploadable = Uploadable::create(['uploadable_id' => $TestResultObj->id, 'uploadable_type' => 'App\TestResult', 'gallery_id' => $GalleryObj->id, 'image_role' => 'TitleImage']);
-                     }
                  }
                  ///////////////////////////////////////////////////////////////////////////Images
 
@@ -252,13 +244,12 @@ class TestResultController extends Controller
         }
 
         $ImagesPath = [];
-        if (count($TestResult->TitleImage)) {
+        if (count($TestResult->images)) {
-            foreach ($TestResult->TitleImage as $Key => $TitleImage) {
+            foreach ($TestResult->images as $Key => $Image) {
-                $ImagesPath[] = $TitleImage->path;
+                $ImagesPath[] = $Image->path;
             }
             $TestResult['imagesPath'] = $ImagesPath;
         }
-        // dd($TestResult->test_type()->device_label);
         $TestResult['device_label'] =  $TestResult->test_type->device_label;
         return \MessageResponse::data($TestResult);
     }
@@ -282,9 +273,10 @@ class TestResultController extends Controller
         }
 
         $ImagesPath = [];
-        if (count($TestResult->TitleImage)) {
+
-            foreach ($TestResult->TitleImage as $Key => $TitleImage) {
+        if (count($TestResult->images)) {
-                $ImagesPath[] = $TitleImage->path;
+            foreach ($TestResult->images as $Key => $Image) {
+                $ImagesPath[] = $Image;
             }
             $TestResult['imagesPath'] = $ImagesPath;
         }
@@ -297,8 +289,8 @@ class TestResultController extends Controller
 
     public static function storage_path($path)
     {
-        if (starts_with($path, 'uploads/')) {
+        if (starts_with($path, 'media/')) {
-            $path = substr($path, 8);
+            $path = substr($path, 6);
         }
         return $path;
     }
@@ -306,9 +298,7 @@ class TestResultController extends Controller
     public function update(StoreTestResultRequest $request, TestResult $TestResult)
     {
         $TestResultData = [
-            // 'autoclave_id' => $request->autoclave_id,
             'cycle_number' => $request->cycle_number,
-            // 'device_id' => $request->device_id,
             'date' => $request->date,
             'test_type_id' => $request->test_type_id,
             'result' => $request->result,
@@ -363,71 +353,6 @@ class TestResultController extends Controller
              }
          }
          /////////////////////////////////////////////////////////////////////Images
-            $images = '';
-            $imageExist = [];
-            $imagesDeleted = [];
-            if (count($TestResult->TitleImage))
-            {
-                $images = $TestResult->TitleImage;
-                foreach ($images as $key => $image) {
-
-                    $imageExist[] = '/'.$image->path;
-                    if (!in_array('/'.$image->path, $request->imgs)) {
-                        $imagesDeleted[] = $image->path;
-                    }
-                }
-
-            }
-
-            if ($request->imgs != null) {
-                $request_imgs = array_diff($request->imgs, $imageExist);
-
-               foreach ($request_imgs as $key => $img) {//
-
-                   if (strrpos($img, "base64") !== false) {
-
-                       $Image = $img;
-                       $Manager = new ImageManager(array('driver' => 'imagick'));
-                       $InterventionImage = $Manager->make($Image);
-                       // $InterventionImage = Image::make($Image);
-                       $Mime = explode('/', $InterventionImage->mime());
-
-                       $ImageName = time().$key.'.'.$Mime[1];
-                       $Path = 'uploads'.'/TestResults'.'/'.$TestResult->id .'/'.$ImageName;
-
-                       Storage::disk('public')->makeDirectory('TestResults'.'/'.$TestResult->id);
-                       $InterventionImage->save(public_path($Path));
-
-                       //--------------------------------------------------------
-                       $GalleryObj = Gallery::create(['user_id' => auth('api')->user()->id, 'path' => $Path]);
-                       $Uploadable = Uploadable::create(['uploadable_id' => $TestResult->id, 'uploadable_type' => 'App\TestResult', 'gallery_id' => $GalleryObj->id, 'image_role' => 'TitleImage']);
-                       //--------------------------------------------------------
-                   }
-           }
-
-           // if (count($imagesDeleted)) {
-           //     foreach ($imagesDeleted as $key => $imageDeleted) {
-           //         $Gallery =  Gallery::where('path',  $imageDeleted)->first();
-           //         if ($Gallery) {
-           //             Storage::disk('public')->delete(static::storage_path($imageDeleted));
-           //             Uploadable::where('gallery_id', $Gallery->id)->where('uploadable_id', $TestResult->id)->where('uploadable_type', get_class($TestResult))->delete();
-           //             $Gallery->delete();
-           //         }
-           //     }
-           // }
-
-        }
-        if (count($imagesDeleted)) {
-            foreach ($imagesDeleted as $key => $imageDeleted) {
-                $Gallery =  Gallery::where('path',  $imageDeleted)->first();
-                if ($Gallery) {
-                    Storage::disk('public')->delete(static::storage_path($imageDeleted));
-                    Uploadable::where('gallery_id', $Gallery->id)->where('uploadable_id', $TestResult->id)->where('uploadable_type', get_class($TestResult))->delete();
-                    $Gallery->delete();
-                }
-            }
-        }
-
          return \MessageResponse::success(null,trans('messages.update'));
     }
 
@@ -439,11 +364,10 @@ class TestResultController extends Controller
         if (count($TestResult->input_values)) {
             InputValue::where('test_result_id', $TestResult->id)->get()->each->delete();
         }
-        if (count($TestResult->TitleImage)){
+        if (count($TestResult->images)){
-            foreach ($TestResult->TitleImage as $image) {
+            foreach ($TestResult->images as $image) {
                 Storage::disk('public')->delete(static::storage_path($image->path));
-                Uploadable::where('gallery_id', $image->id)->where('uploadable_id', $TestResult->id)->where('uploadable_type', get_class($TestResult))->delete();
+                Media::where('id',  $image->id)->delete();
-                Gallery::where('id',  $image->id)->delete();
             }
         }
         $TestResult->delete();

app/Http/Controllers/UploadController.php

@@ -0,0 +1,92 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Intervention\Image\ImageManager;
+use Illuminate\Support\Facades\Storage;
+use App\Media;
+
+class UploadController extends Controller
+{
+    public function uploadImage(Request $request)
+    {
+        $rules = [
+            'image' => 'required|image|mimes:jpeg,png,jpg|max:2048',
+        ];
+        $this->validate($request, $rules);
+
+        if ($request->model_id !== null && is_numeric($request->model_id)) {
+            $Model = 'App\\'.$request->model_type;
+            $Object = $Model::findOrFail($request->model_id);
+            if ($Object) {
+                $Image = $request->file('image');
+                $Manager = new ImageManager(array('driver' => 'imagick'));
+                $InterventionImage = $Manager->make($Image);
+                $Mime = explode('/', $InterventionImage->mime());
+
+                $ImageName = time().'.'.$Mime[1];
+                $Path = 'media'.'/TestResults'.'/'.$Object->id .'/'.$ImageName;
+
+                Storage::disk('public')->makeDirectory('TestResults'.'/'.$Object->id);
+                $InterventionImage->save(public_path($Path));
+
+                $MediaData = [
+                  'model_id' => $Object->id,
+                  'batch_id' => $request->batch_id,
+                  'model_type' => 'App\\'.$request->model_type,
+                  'path' => $Path,
+                  'user_id' => auth('api')->user()->id,
+                  'file_name' => $ImageName
+                ];
+                $Media = Media::create($MediaData);
+            }
+        }
+        else {
+            $Image = $request->file('image');
+            $Manager = new ImageManager(array('driver' => 'imagick'));
+            $InterventionImage = $Manager->make($Image);
+            $Mime = explode('/', $InterventionImage->mime());
+
+            $ImageName = time().'.'.$Mime[1];
+            $Path = 'media'.'/Temp'.'/'.$request->batch_id .'/'.$ImageName;
+
+            Storage::disk('public')->makeDirectory('Temp'.'/'.$request->batch_id);
+            $InterventionImage->save(public_path($Path));
+
+            $MediaData = [
+              'model_id' => null,
+              'batch_id' => $request->batch_id,
+              'model_type' => 'App\\'.$request->model_type,
+              'path' => $Path,
+              'user_id' => auth('api')->user()->id,
+              'file_name' => $ImageName
+            ];
+            $Media = Media::create($MediaData);
+        }
+        return \MessageResponse::success(trans('messages.success_message'), null, $Media);
+    }
+
+    public function deleteImage(Request $request)
+    {
+      if ($request->model_id != null && is_numeric($request->model_id)) {
+          $Media = Media::findOrFail($request->media_id);
+          if($Media){
+              if (\File::exists(public_path($Media->path))) {
+                  \File::delete(public_path($Media->path));
+              }
+              $Media->delete();
+          }
+      }
+      else {
+          $Media = Media::findOrFail($request->media_id);
+          if($Media){
+              if(\File::exists(public_path($Media->path))){
+                \File::delete(public_path($Media->path));
+              }
+              $Media->delete();
+          }
+      }
+      return \MessageResponse::success(trans('messages.success_message'));
+  }
+}

app/Media.php

@@ -0,0 +1,22 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Media extends Model
+{
+
+    protected $fillable = ['model_id', 'model_type', 'user_id', 'batch_id', 'path', 'file_name'];
+    public $timestamps = true;
+
+    public function user()
+    {
+        return $this->belongsTo('App\User');
+    }
+    public function model()
+    {
+        return $this->morphTo();
+    }
+
+}

app/TestResult.php

@@ -19,6 +19,10 @@ class TestResult extends Model
     {
         return $this->hasMany('App\InputValue');
     }
+    public function images()
+    {
+        return $this->morphMany('App\Media', 'model');
+    }
     public function TitleImage()
     {
         return $this->morphToMany('App\Gallery', 'uploadable')->wherePivot('image_role', 'TitleImage');

app/Uploadable.php

@@ -7,7 +7,7 @@ use Illuminate\Database\Eloquent\Model;
 class Uploadable extends Model
 {
 
-    protected $fillable = ['uploadable_id', 'uploadable_type', 'gallery_id', 'image_role'];
+    protected $fillable = ['uploadable_id', 'uploadable_type', 'gallery_id', 'image_role', 'batch_id'];
     public $timestamps = false;
 
     public function gallery()

config/filesystems.php

@@ -50,7 +50,7 @@ return [
 
         'public' => [
             'driver' => 'local',
-            'root' => public_path('uploads'),
+            'root' => public_path('media'),
             // 'url' => env('APP_URL') . '/storage',
             'visibility' => 'public',
         ],

resources/js/vue/components/core/Dropzone.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="">
+      <vue-dropzone id="customdropzone02"
+          ref="myVueDropzone"
+          :options="dropzoneOptions"
+          :useCustomSlot="true"
+          @vdropzone-sending = "sending"
+          @vdropzone-success = "success"
+          @vdropzone-removed-file = "afterRemove"
+          @vdropzone-error = "error"
+          class="WM-Relative" >
+        <div class="dropzone-custom-content">
+          <!-- <h3 class="dropzone-custom-title">فایل مورد نظر خود را در این قسمت آپلود کنید</h3> -->
+          <div class="subtitle">Upload images here</div>
+        </div>
+      </vue-dropzone>
+  </div>
+</template>
+
+<script>
+    import vue2Dropzone from 'vue2-dropzone'
+    import 'vue2-dropzone/dist/vue2Dropzone.min.css'
+    import { TokenService } from '@/services/auth/storage.service';
+    import { ApiService } from "@/services";
+    import { urls } from "@/config/urls";
+    import toast from "@/services/global/toast.service";
+    import { mapGetters } from 'vuex'
+
+    export default {
+        props: ['ModelID', 'Images', 'BatchID', 'ModelType'],
+        components : {
+            vueDropzone: vue2Dropzone
+        },
+        data: () => ({
+            dropzoneOptions: {
+            url: '/api/UploadImage',
+            thumbnailWidth: 150,
+            maxFilesize: 2,
+            headers: { "Authorization": `Bearer ${TokenService.getToken()}` },
+            addRemoveLinks: true
+            },
+        }),
+        mounted() {
+            this.loadImages();
+        },
+        methods: {
+            loadImages(){
+                let vm = this;
+                if (vm.Images != null) {
+                    vm.Images.forEach(function(image, key){
+                        var file = { name: image.file_name, size:'1024', type: 'jpg', id: image.id};
+                        vm.$refs.myVueDropzone.manuallyAddFile(file, '/'+image.path);
+                    });
+                }
+            },
+            success(file, response){
+                file.id = response.data.id;
+                if(typeof response.message !== 'undefined') {
+                    toast.success(response.message, response.title);
+                }
+            },
+            error(file, message, xhr){
+                if(typeof message.errors !== 'undefined') {
+                    for (const key in message.errors) {
+                        if (message.errors.hasOwnProperty(key)) {
+                            toast.error(message.errors[key], 'خطا');
+                        }
+                    }
+                }
+            },
+            sending(file, xhr, form_data) {
+                form_data.append('image', file);
+                form_data.append('model_id', this.ModelID);
+                form_data.append('model_type', this.ModelType);
+                form_data.append('batch_id', this.BatchID);
+            },
+            async afterRemove( file, error, xhr) {
+                let status = null;
+                if (this.$refs.myVueDropzone.dropzone.disabled !== undefined) {
+                    status = this.$refs.myVueDropzone.dropzone.disabled;
+                }
+
+                if (status !== true) {
+                    let formdata = new FormData();
+                    formdata.append('media_id', file.id);
+                    formdata.append('name', file.name);
+                    formdata.append('model_id', this.ModelID);
+                    formdata.append('model_type', this.ModelType);
+                    formdata.append('batch_id', this.BatchID);
+                    let result = await ApiService.post(urls.deleteImage,formdata);
+                }
+            },
+        }
+    }
+</script>

resources/js/vue/components/modal/testresult/Show.vue

@@ -139,7 +139,7 @@
                     <hr class="v-divider theme--light" />
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6 v-for="(img, key) in data.title_image" :key="key">
+                    <v-flex xs12 md6 sm6 v-for="(img, key) in data.images" :key="key">
                         <img :src="'/'+img.path" style="width: 100%" />
                     </v-flex>
                 </v-layout>

resources/js/vue/config/urls.js

@@ -19,6 +19,7 @@ const urls = {
     sendVerifyCode: `/password/verifyCode`,
     changePassword: `/password/reset`,
     storeMessages: `/Messages`,
+    deleteImage: `/DeleteImage`,
     listMessages: function(page) {
         return `/Messages?page=${page}`;
     },
@@ -173,7 +174,7 @@ const urls = {
         return `/Item/Verify/${id}`;
     },
     Barcode: function(code, type) {
-        
+
         return `/BarCode/${code}/${type}`;
     },
     packageBarcode: function(code) {

resources/js/vue/views/TestResult/AddEdit.vue

@@ -85,23 +85,15 @@
 						<v-switch color="light-green accent-3" v-model="result" :label="'Result: ' + formData.result"></v-switch>
 					</v-flex>
 					<v-spacer></v-spacer>
-					<v-flex xs12 sm2 md2>
+					<v-flex xs12 sm12 md12>
-						<div  class="WM-Align-R" style="position:relative">
+
-							<input type="file" class="inputfile" @change="onFileChange" multiple style="position:absolute;left:0;height:100px"/>
+						<template v-if="galleryDataLoaded">
-							<label for="file">
+							<wm-Dropzone :Images="galleries" :BatchID="file_batch_id" :ModelID="$route.params.testResult" ModelType="TestResult"></wm-Dropzone>
-								<v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file
+						</template>
-							</label>
+
-						</div>
 					</v-flex>
 					</v-layout>
-					<v-layout wrap class="mt-4 px-5">
+
-						<v-flex v-for="(img, key) in images" :key="key" xs12 sm6 md1 class="WM-Border WM-Border-LightGray WM-Padding-10 WM-Align-C WM-Relative" style="margin:15px">
-							<img :src="img" width="120px" height="auto"/>
-							<v-btn class="mx-2" absolute right top fab dark small color="pink" style="top:-28px;right:-28px" @click.native.stop="removeImage(key)">
-								<v-icon>close</v-icon>
-					    </v-btn>
-						</v-flex>
-					</v-layout>
 
 					<!--______________________  DynamicComponent :: Began  _______________________-->
 
@@ -422,10 +414,17 @@
 	</v-form>
 </template>
 <script>
+import Dropzone from '@/components/core/Dropzone'
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 export default {
+	components : {
+    'wm-Dropzone' : Dropzone,
+  },
 	data: () => ({
+		galleryDataLoaded: false,
+		galleries: [],
+		file_batch_id: Math.floor(Math.random() * 9000000000) + 1000000000,
 		testTypeNames: [],
 		testTypeNameSelected: "",
 		searchInput: "",
@@ -466,6 +465,9 @@ export default {
 			this.filter.test_result_id = this.$route.params.testResult;
 			this.selectTestType();
 		}
+		else{
+			this.galleryDataLoaded= true;
+		}
 		this.load();
 	},
 	methods: {
@@ -543,20 +545,21 @@ export default {
 					if (result && result.status == 200) {
 						this.formData = result.data.data;
 						for (const key in result.data.data.imagesPath) {
-							if (
+							if (result.data.data.imagesPath.hasOwnProperty(key)) {
-								result.data.data.imagesPath.hasOwnProperty(key)
-							) {
 								result.data.data.imagesPath[key] =
-									"/" + result.data.data.imagesPath[key];
+									result.data.data.imagesPath[key];
 							}
 						}
-						this.images = result.data.data.imagesPath;
+						// this.images = result.data.data.imagesPath;
+						this.galleries = result.data.data.imagesPath;
+						this.galleryDataLoaded = true;
 					}
 				}
 			}
 		},
 		async submitForm() {
 			let result;
+			this.formData['file_batch_id'] = this.file_batch_id;
 			if (this.$route.params.testResult) {
 				result = await ApiService.put(
 					urls.updateTestResult(this.$route.params.testResult),

routes/api.php

@@ -63,6 +63,9 @@ Route::middleware('auth:api')->group(function () {
     Route::resource('Cycles', 'CycleController');
 
     Route::get('TestTypes/AllArchivedTestTypes', 'TestTypeController@allArchivedTestTypes');
+
+    Route::post('UploadImage', 'UploadController@uploadImage');
+    Route::post('DeleteImage', 'UploadController@deleteImage');
 });
 Route::post('/BarCode/{Code}/{Type?}', 'BarCodeController@generateBarcode');
 Route::post('Package/Barcode/{Code}', 'BarCodeController@generatePackageBarcode');