Ajoute la gestion primaire des images

Pour #4
This commit is contained in:
Clement Desmidt 2020-03-05 17:40:24 +01:00
parent 9a30d17fe0
commit ac5afa42e3
5 changed files with 99 additions and 7 deletions

View File

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

View File

@ -36,4 +36,26 @@ class User extends Authenticatable
protected $casts = [ protected $casts = [
'email_verified_at' => 'datetime', '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));
}
} }

21
resources/js/app.js vendored
View File

@ -28,6 +28,7 @@ window.Vue = require('vue');
*/ */
import App from './components/App.vue'; import App from './components/App.vue';
Vue.config.productionTip = false; Vue.config.productionTip = false;
/** Function for collapse card */ /** 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({ const app = new Vue({
render: h => h(App), render: h => h(App),
}).$mount('#app'); }).$mount('#app');

View File

@ -12,3 +12,36 @@ h1, h2, h3, h4 {
color: #6e7687; 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;
}
}

View File

@ -88,7 +88,7 @@
<h3 class="card-title">{{ strftime('%B %G', $today->format('U')) }}</h3> <h3 class="card-title">{{ strftime('%B %G', $today->format('U')) }}</h3>
</div> </div>
<div class="card-body"> <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 @csrf
<div class="contact-form"> <div class="contact-form">
<div class="form-group"> <div class="form-group">
@ -96,6 +96,11 @@
<div class="col-sm-10"> <div class="col-sm-10">
<div id="app"></div> <div id="app"></div>
<span class="text-danger">{{ $errors->first('message') }}</span> <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> </div>
<div class="form-group"> <div class="form-group">
@ -128,6 +133,7 @@
</div> </div>
</div> </div>
<div class="card-body @if($today->format('Y-m-d') === \Carbon\Carbon::instance($post->date_post)->format('Y-m-d')) already @endif "> <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) !!} {!! $tag_detector->linkTagFrom($post->content) !!}
</div> </div>
<div class="card-footer"> <div class="card-footer">