✨ Ajoute la gestion primaire des images

Pour #4

app/Http/Controllers/HomeController.php

@@ -7,6 +7,7 @@ use App\PostsTag;
 use App\Services\TagDetectorService;
 use App\Tag;
 use DateTime;
+use Illuminate\Http\UploadedFile;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Redirect;
 
@@ -121,18 +122,27 @@ class HomeController extends Controller
 
     public function store(TagDetectorService $tag_detector)
     {
-        $today = new DateTime();
+        $user_id = Auth::user()->getAuthIdentifier();
 
-        $data = request()->validate([
-            'message' => 'required'
+        $validated_data = request()->validate([
+            'message' => 'required',
+            'file' => 'file|mimes:jpeg,png,jpg,gif,svg',
         ]);
 
         $data = [
-            'user_id'   => Auth::user()->getAuthIdentifier(),
-            'date_post' => new DateTime(), // Take back the date from the form ?
-            'content'   => $data['message'],
+            'user_id'   => $user_id,
+            'date_post' => new DateTime(),
+            'content'   => $validated_data['message'],
         ];
 
+        if (!empty($validated_data['file'])) {
+            /** @var UploadedFile $uploaded_document */
+            $uploaded_document = $validated_data['file'];
+            $file_name = $uploaded_document->getClientOriginalName();
+            $uploaded_document->storeAs(Auth::user()->getFolder(), $file_name);
+            $data['image'] = $file_name;
+        }
+
         $tags = $tag_detector->detectFrom($data['content']);
 
         $check = Post::create($data);

app/User.php

@@ -36,4 +36,26 @@ class User extends Authenticatable
     protected $casts = [
         'email_verified_at' => 'datetime',
     ];
+
+    public function getFolder()
+    {
+        $arrayHash = str_split(strtolower(md5($this->id)));
+        return sprintf('%s/%s', $arrayHash[0], $arrayHash[1]);
+    }
+
+    public function getImageData(Post $post)
+    {
+        if (empty($post->image)) {
+            return '';
+        }
+
+        $path = sprintf('%s/%s/%s', storage_path('app'), $this->getFolder(), $post->image);
+
+        if (!is_readable($path)) {
+            return '';
+        }
+        $type = pathinfo($path, PATHINFO_EXTENSION);
+        $data = file_get_contents($path);
+        return sprintf('data:image/%s;base64,%s', $type, base64_encode($data));
+    }
 }

resources/js/app.js

@@ -28,6 +28,7 @@ window.Vue = require('vue');
  */
 
 import App from './components/App.vue';
+
 Vue.config.productionTip = false;
 
 /** Function for collapse card */
@@ -41,6 +42,26 @@ document.querySelectorAll('[data-toggle="card-collapse"]').forEach(function(card
     });
 });
 
+let fileNameChanged = function(element, label) {
+    let labelVal = label.innerText;
+    let fileName = '';
+    if (element.value) {
+        fileName = element.value.split('\\').pop();
+    }
+    if (fileName) {
+        label.firstChild.nextSibling.classList = "fe fe-check";
+        label.querySelector('.js-fileName').innerHTML = fileName;
+    } else {
+        label.firstChild.nextSibling.classList = "fe fe-upload";
+        label.querySelector('.js-fileName').innerHTML = labelVal;
+    }
+};
+let inputFiles = document.querySelectorAll(".input-file");
+for (let i = 0, l = inputFiles.length; i < l; i++) {
+    inputFiles[i].onchange = fileNameChanged.bind(null, inputFiles[i], inputFiles[i].nextSibling.nextSibling);
+}
+
+// new Vue();
 const app = new Vue({
     render: h => h(App),
 }).$mount('#app');

resources/sass/_general.scss

@@ -12,3 +12,36 @@ h1, h2, h3, h4 {
         color: #6e7687;
     }
 }
+
+.btn-tertiary {
+    color: #555;
+    padding: 0;
+    line-height: 40px;
+    width: 300px;
+    margin: auto;
+    display: block;
+    border: 2px solid #555;
+    &:hover,
+    &:focus {
+        color: lighten(#555, 20%);
+        border-color: lighten(#555, 20%);
+    }
+}
+
+/* input file style */
+
+.input-file {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+    + .js-labelFile {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding: 0 10px;
+        cursor: pointer;
+    }
+}

resources/views/home.blade.php

@@ -88,7 +88,7 @@
                             <h3 class="card-title">{{ strftime('%B %G', $today->format('U')) }}</h3>
                         </div>
                         <div class="card-body">
-                            <form action="@if($already) {{ url('edit') }}@else{{ url('store') }}@endif" method="post" accept-charset="utf-8">
+                            <form action="@if($already) {{ url('edit') }}@else{{ url('store') }}@endif" method="post" accept-charset="utf-8" enctype="multipart/form-data">
                                 @csrf
                                 <div class="contact-form">
                                     <div class="form-group">
@@ -96,6 +96,11 @@
                                         <div class="col-sm-10">
                                             <div id="app"></div>
                                             <span class="text-danger">{{ $errors->first('message') }}</span>
+                                            <input type="file" name="file" id="file" class="input-file">
+                                            <label for="file" class="btn btn-tertiary js-labelFile">
+                                                <i class="fe fe-upload"></i>
+                                                <span class="js-fileName">Choose a file</span>
+                                            </label>
                                         </div>
                                     </div>
                                     <div class="form-group">
@@ -128,6 +133,7 @@
                         </div>
                     </div>
                     <div class="card-body @if($today->format('Y-m-d') === \Carbon\Carbon::instance($post->date_post)->format('Y-m-d')) already @endif ">
+                        @if($post->image != '')<p><img src="{{ Auth::user()->getImageData($post) }}"/></p>@endif
                         {!! $tag_detector->linkTagFrom($post->content) !!}
                     </div>
                     <div class="card-footer">