app/View/Component/Uploadfile.php
[code]
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Uploadfile extends Component
{
public $field = ”;
public $id = ”;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct($field, $id)
{
$this->field = $field;
$this->id = $id;
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view(‘components.uploadfile’);
}
}
[/code]
/resources/views/components/uploadfile.blade.php
[code]
<label x-data=”uploadImageData(‘{{ $field }}’, ‘{{ $id }}’)”
>
<div x-show=”previewUrl === ””>
<div>
<svg fill=”none” stroke=”currentColor”
viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″
d=”M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z”>
</path>
</svg>
<p>
Select a photo
</p>
</div>
</div>
<div x-show=”previewUrl !== ””>
<img :src=”previewUrl” />
</div>
<input type=’file’ name=”{{ $field }}” @change=”updatePreview()” />
</label>
@once
@push(‘botStack’)
<script type=”text/javascript”>
function uploadImageData(field, id) {
return {
field: field,
id: id,
previewUrl: “”,
updatePreview() {
var photo = document.getElementById(id).files[0];
if (!photo.type.match(‘image.gif|image.png|image.jpeg|image.jpg’)) {
$.alert(‘이미지 파일만 업로드 가능합니다’)
return
}
var reader = new FileReader();
reader.onload = e => {
this.previewUrl = e.target.result;
};
reader.readAsDataURL(photo);
},
clearPreview() {
document.getElementById(id).value = null;
this.previewUrl = “”;
}
};
}
</script>
@endpush
@endonce
[/code]
사용방법
[code]
…
<x-uploadfile field=”upfile”></x-uploadfile>
…
[/code]
결과
포스트 탐색
