Aurora Modules

파일 첨부 모듈

게시글/1:1문의 등의 등록 폼에서 사용 중인 파일 첨부 모듈입니다.

모듈명: file-attachments원본소스

파일 첨부 모듈입니다.

사용 가능 변수

변수명	타입	기본값	설명
usesAttachment	boolean	false	이미지/파일 첨부 가능 여부
files	File[]	[]	첨부 파일 리스트
imagesList	ImagesList[]	[]	첨부 이미지 리스트

File 타입

속성명	타입	기본값	설명
originalFileName	string	-	원본 파일명
uploadedFileName	string	-	업로드 된 파일명

ImagesList 타입

속성명	타입	기본값	설명
imageUrl	string	-	이미지 경로 url
originName	string	-	이미지 명

커스텀 핸들바 더 알아보기

:query 속성 더 알아보기

<file-attach>
    <div>
        <div class="review-form__content" slot="usesAttachment">
            <ul class="article-form article-form__attachments" slot="imagesList">
                {{#each imagesList}}
                <li class="article-form__attachment">
                    {{img imageUrl 92 92 originName '' ''}}
                    <button
                        type="button"
                        class="btn btn--sm article-form__delete"
                        shopby-image-url="{{imageUrl}}"
                        shopby-action="DELETE_IMAGE_IN_LIST"
                    ></button>
                </li>
                {{/each}}
                <input
                    type="file"
                    hidden
                    multiple
                    accept="image/*"
                    shopby-attach-input="ATTACH_INPUT"
                    shopby-limit-count="5"
                    shopby-limit-mega-bytes="5"
                    shopby-on:change="ATTACH_IMAGE"
                />
                {{#if usesAttachment}}
                <button type="button" class="btn btn--line-dark article-form__attachment-input" shopby-on:click="ATTACH_IMAGE"></button>
                {{/if}}
            </ul>
            <!-- FILES -->
            <div>
                <ul class="article-form article-form__attachments-file" slot="files">
                    {{#each files}}
                    <li class="article-form__attachment-file">
                        <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                        {{originalFileName}}
                        <button
                            type="button"
                            class="btn btn--sm article-form__delete"
                            shopby-file-name="{{uploadedFileName}}"
                            shopby-action="DELETE_FILE"
                        ></button>
                    </li>
                    {{/each}}
                </ul>
            </div>
            {{#if usesAttachment}}
            <p class="board-form__notice-text">업로드 용량은 5MB 이하로만 가능 합니다.</p>
            {{/if}}
        </div>
    </div>
</file-attach>

<file-attach>
    <div>
        <div class="review-form__content" slot="usesAttachment">
            <ul class="article-form article-form__attachments" slot="imagesList">
                {{#each imagesList}}
                <li class="article-form__attachment">
                    {{img imageUrl 220 220 originName '' ''}}
                    <button
                        type="button"
                        class="btn btn--sm article-form__delete"
                        shopby-image-url="{{imageUrl}}"
                        shopby-action="DELETE_IMAGE_IN_LIST"
                    ></button>
                </li>
                {{/each}}
                <input
                    type="file"
                    hidden
                    multiple
                    accept="image/*"
                    shopby-attach-input="ATTACH_INPUT"
                    shopby-limit-count="5"
                    shopby-limit-mega-bytes="5"
                    shopby-on:change="ATTACH_IMAGE"
                />
                {{#if usesAttachment}}
                <button type="button" class="btn btn--line-dark article-form__attachment-input" shopby-on:click="ATTACH_IMAGE"></button>
                {{/if}}
            </ul>
            <!-- FILES -->
            <div>
                <ul class="article-form__attachments-files" slot="files">
                    {{#each files}}
                    <li class="article-form__attachment-file">
                        <span class="ico ico--clip-16 article-list__item-title-icon"></span>
                        {{originalFileName}}
                        <button
                            type="button"
                            class="btn btn--sm article-form__delete"
                            shopby-file-name="{{uploadedFileName}}"
                            shopby-action="DELETE_FILE"
                        ></button>
                    </li>
                    {{/each}}
                </ul>
            </div>
            {{#if usesAttachment}}
            <p class="board-form__notice-text">업로드 용량은 5MB 이하로만 가능 합니다.</p>
            {{/if}}
        </div>
    </div>
</file-attach>

/* 여기에 스타일 코드를 작성해주세요. */