Initial commit for rider image upload, add FileUploader service

config/routes/rider.yaml

@@ -7,6 +7,11 @@ rider_rows:
     controller: App\Controller\RiderController::rows
     methods: [POST]
 
+rider_upload_image:
+    path: /riders/upload
+    controller: App\Controller\RiderController::uploadImage
+    methods: [POST]
+
 rider_create:
     path: /riders/create
     controller: App\Controller\RiderController::addForm
@@ -31,4 +36,3 @@ rider_delete:
     path: /riders/{id}
     controller: App\Controller\RiderController::destroy
     methods: [DELETE]
-

config/services.yaml

@@ -5,6 +5,7 @@ parameters:
     map_default:
         latitude: 14.6091
         longitude: 121.0223
+    image_upload_directory: '%kernel.project_dir%/public/uploads'
 
 services:
     # default configuration for services in *this* file
@@ -45,3 +46,7 @@ services:
         arguments:
             $acl_gen: "@App\\Access\\Generator"
         tags: ['security.voter']
+
+    App\Service\FileUploader:
+        arguments:
+            $target_dir: '%image_upload_directory%'

public/assets/css/style.css

@@ -48,6 +48,24 @@ span.has-danger,
 	margin: 6px 0 0 8px;
 }
 
+.portrait-box {
+	border: 2px solid #5867DD;
+	background-size: 100%;
+	background-repeat: no-repeat;
+    background-position: 50% 50%;
+	width: 150px;
+	height: 150px;
+}
+
+.user-portrait-sm {
+	width: 40px;
+	height: 40px;
+	background-size: 100%;
+	background-repeat: no-repeat;
+    background-position: 50% 50%;
+    border-radius: 100%;
+}
+
 @media (min-width: 995px) {
 	.modal-lg {
 		max-width: 1024px;

src/Controller/RiderController.php

@@ -5,6 +5,7 @@ namespace App\Controller;
 use App\Ramcar\BaseController;
 use App\Entity\Rider;
 use App\Entity\Hub;
+use App\Service\FileUploader;
 
 use Doctrine\ORM\Query;
 use Symfony\Component\HttpFoundation\Request;
@@ -88,6 +89,7 @@ class RiderController extends BaseController
         foreach ($obj_rows as $orow) {
             // add row data
             $row['id'] = $orow[0]->getID();
+            $row['image_file'] = $orow[0]->getImageFile();
             $row['first_name'] = $orow[0]->getFirstName();
             $row['last_name'] = $orow[0]->getLastName();
             $row['contact_num'] = $orow[0]->getContactNumber();
@@ -143,7 +145,8 @@ class RiderController extends BaseController
         // set and save values
         $row->setFirstName($req->request->get('first_name'))
             ->setLastName($req->request->get('last_name'))
-            ->setContactNumber($req->request->get('contact_no'));
+            ->setContactNumber($req->request->get('contact_no'))
+            ->setImageFile($req->request->get('image_file'));
 
         // initialize error list
         $error_array = [];
@@ -188,7 +191,7 @@ class RiderController extends BaseController
         }  
     }
 
-    public function updateForm($id)
+    public function updateForm(FileUploader $uploader, $id)
     {
         $this->denyAccessUnlessGranted('rider.update', null, 'No access.');
 
@@ -210,6 +213,12 @@ class RiderController extends BaseController
 
         $params['obj'] = $row;
 
+        // get file params if present
+        if (!empty($row->getImageFile())) {
+            $file = $uploader->getTargetDir() . '/' . $row->getImageFile();
+            $params['filesize'] = filesize($file);
+        }
+
         // response
         return $this->render('rider/form.html.twig', $params);
     }
@@ -229,7 +238,8 @@ class RiderController extends BaseController
         // set and save values
         $row->setFirstName($req->request->get('first_name'))
             ->setLastName($req->request->get('last_name'))
-            ->setContactNumber($req->request->get('contact_no'));
+            ->setContactNumber($req->request->get('contact_no'))
+            ->setImageFile($req->request->get('image_file'));
 
         // initialize error list
         $error_array = [];
@@ -298,6 +308,21 @@ class RiderController extends BaseController
         $response->send();
     }
 
+    public function uploadImage(Request $req, FileUploader $uploader)
+    {
+        // retrieve temporary info for file
+        $file = $req->files->get('image_file');
+
+        // upload the file
+        $filename = $uploader->upload($file);
+
+        // return response
+        return $this->json([
+            'success' => true,
+            'filename' => $filename
+        ]);
+    }
+
     // check if datatable filter is present and append to query
     protected function setQueryFilters($datatable, &$query) {
         if (isset($datatable['query']['data-rows-search']) && !empty($datatable['query']['data-rows-search'])) {

src/Entity/Rider.php

@@ -50,6 +50,11 @@ class Rider
      */
     protected $job_orders;
 
+    /**
+     * @ORM\Column(type="string", nullable=true)
+     */
+    protected $image_file;
+
     public function __construct()
     {
         $this->job_orders = new ArrayCollection();
@@ -109,4 +114,15 @@ class Rider
         $this->hub = null;
         return $this;
     }
+
+    public function setImageFile($image_file)
+    {
+        $this->image_file = $image_file;
+        return $this;
+    }
+
+    public function getImageFile()
+    {
+        return $this->image_file;
+    }
 }

src/Service/FileUploader.php

@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Service;
+
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+class FileUploader
+{
+    private $target_dir;
+
+    public function __construct($target_dir)
+    {
+        $this->target_dir = $target_dir;
+    }
+
+    public function upload(UploadedFile $file)
+    {
+        $filename = md5(uniqid()) . '.' . $file->guessExtension();
+
+        $file->move($this->getTargetDir(), $filename);
+
+        return $filename;
+    }
+
+    public function getTargetDir()
+    {
+        return $this->target_dir;
+    }
+}

templates/rider/form.html.twig

@@ -33,7 +33,6 @@
 						</div>
 					</div>
                     <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed" method="post" action="{{ mode == 'update' ? url('rider_update_submit', {'id': obj.getId()}) : url('rider_create_submit') }}">
-
 						<div class="m-portlet__body">
 							<div class="form-group m-form__group row no-border">
 								<label class="col-lg-2 col-form-label" data-field="first_name">
@@ -73,12 +72,41 @@
 								</div>
 							</div>
 							<div class="form-group m-form__group row">
+								<label class="col-lg-2 col-form-label" data-field="image_file">
+									{% if mode == 'update' %}
+										Replace Portrait:
+									{% else %}
+										Portrait:
+									{% endif %}
+								</label>
+								<div class="col-lg-6">
+									<div class="m-dropzone dropzone m-dropzone--primary" action="{{ url('rider_upload_image') }}" id="image-file">
+										<div class="m-dropzone__msg dz-message needsclick">
+											<h3 class="m-dropzone__msg-title">
+												Drop files here or click to upload.
+											</h3>
+											<span class="m-dropzone__msg-desc">
+												Upload only valid PNG, GIF, or JPEG images
+											</span>
+										</div>
+									</div>
+									{% if mode == 'update' %}
+										<span class="m-form__help">Leave blank for unchanged</span>
+									{% endif %}
+									<div class="form-control-feedback hide" data-field="image_file"></div>
+								</div>
+								{% if mode == 'update' %}
+									<div class="col-lg-4">
+										<div class="portrait-box" style="background-image: url('{{ obj.getImageFile() ? '/uploads/' ~ obj.getImageFile() : '/assets/images/user.gif' }}');"></div>
+									</div>
+								{% endif %}
 							</div>
 						</div>
 			            <div class="m-portlet__foot m-portlet__foot--fit">
 							<div class="m-form__actions m-form__actions--solid m-form__actions--right">
 								<div class="row">
 									<div class="col-lg-12">
+										<input type="hidden" name="image_file" value="{{ obj.getImageFile() }}">
 										<button type="submit" class="btn btn-success">Submit</button>
 										<a href="{{ url('rider_list') }}" class="btn btn-secondary">Cancel</a>
 									</div>
@@ -94,6 +122,45 @@
 
 {% block scripts %}
 	<script>
+		// image upload
+		Dropzone.options.imageFile = {
+            paramName: "image_file", // The name that will be used to transfer the file
+            maxFiles: 1,
+            uploadMultiple: false,
+            maxFilesize: 5, // MB
+            addRemoveLinks: true,
+            acceptedFiles: "image/*",
+            accept: function(file, done) {
+                done(); 
+            },
+            init: function() {
+				this.on("maxfilesexceeded", function(file) {
+					// limit to one file, overwrite old one
+					this.removeAllFiles();
+        			this.addFile(file);
+				});
+
+				{% if obj.getImageFile() %}
+				/*
+					dz = this;
+
+					var mockFile = { name: "{{ obj.getImageFile() }}", size: {{ filesize }} };
+
+					dz.emit("addedfile", mockFile);
+                    dz.options.thumbnail.call(dz, mockFile, '/uploads/' + mockFile.name);
+
+                    // Make sure that there is no progress bar, etc...
+                    dz.emit("complete", mockFile);
+                */
+				{% endif %}
+			},
+			success: function(file, response) {
+				if (response.success) {
+					$("input[name='image_file']").val(response.filename);
+				}
+			}
+        };
+
 		$(function() {
 			$("#row-form").submit(function(e) {
 				var form = $(this);

templates/rider/list.html.twig

@@ -80,6 +80,17 @@
 						title: 'ID',
 						width: 30
 					},
+					{
+						field: 'image_file',
+						title: '',
+						sortable: false,
+						width: 40,
+						template: function (row, index, datatable) {
+							var html = '<div class="user-portrait-sm" style="background-image: url(\'' + (row.image_file ? "/uploads/" + row.image_file : "/assets/images/user.gif") + '\');"></div>';
+
+							return html;
+						}
+					},
 					{
 						field: 'first_name',
 						title: 'First Name'