✨ Ajoute la gestion primaire des images

Pour #4

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">