laravel 이미지업로드 컴포넌트 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

php | laravel 이미지업로드 컴포넌트

본문

 

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 }}')"

    class='flex flex-col border-4 border-dashed w-full h-32 hover:bg-gray-100 hover:border-purple-300 group box-content'

    style="width: 400px; height: 300px;">

    <div x-show="previewUrl === ''" class='flex flex-col items-center justify-center h-full'>

        <div class="flex flex-col justify-center items-center">

            <svg class="w-10 h-10 text-purple-400 group-hover:text-purple-600" 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 class='lowercase text-sm text-gray-400 group-hover:text-purple-600 pt-1 tracking-wider'>

                Select a photo

            </p>

        </div>

    </div>

    <div x-show="previewUrl !== ''" class="h-full">

        <img :src="previewUrl" style="width: 400px; height: 300px;" />

    </div>


    <input type='file' name="{{ $field }}" id="{{ $id }}" class="hidden" @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" id="upfile_1"></x-uploadfile>

...

[/code]

 

결과

1.PNG

댓글 0개

등록된 댓글이 없습니다.

Menu