1. 파일 업로드 - FE (2)

2) file upload의 확장자 검사 및 썸네일 노출

이미지 파일 확장자 유효성 검사

• 파일에 제한을 둬서 서버에서 쉽게 처리할 수 있도록 또는 어떤 UX 적인 이유로 사용자에게 이런 이미지만 보여줘야 하는 경우 파일의 확장자를 제한할 수 있습니다.
• file의 확장자 검사는 HTML input 태그의 accept 속성으로 쉽게 필터링할 수 있습니다.

<input type="file" name="reviewImg" id="reviewImageFileOpenInput" accept="image/png, image/jpeg">

 

• 이렇게 하면, file선택 창에서 지정한 확장자 파일만 선택할 수 있도록 자동으로 브라우저가 돕습니다. 그런데, accept 속성의 브라우저 지원상황이 깔끔한 상태가 아니므로, 아래에서 더 많은 브라우저에서 동작하는 코드에 대해 알아보겠습니다.
• file을 업로드 하면, change 이벤트를 통해서 input type의 변화를 감지할 수 있습니다. 그리고 change 이벤트를 통해 file객체를 얻을 수 있습니다. file 객체는 event 객체의 target으로부터 얻을 수 있습니다.

const elImage = document.querySelector("#reviewImageFileOpenInput"); elImage.addEventListener("change", (evt) => { //파일 선택 시 구현됨            const image = evt.target.files[0];            if(!validImageType(image)) {                       console.warn("invalid image file type");                       return;            } })

 

• 그리고 나서 다음과 같이, validImageType메서드를 만들고, 확장자 검사를 하면 됩니다.

function validImageType(image) {            const result = ([ 'image/jpeg',                                   'image/png',                                   'image/jpg' ].indexOf(image.type) > -1);            return result; }

 

위와 같이 구현하면 이미지 파일말고 다른 형식의 파일을 넣을 때 메시지가 출력되는 것을 볼 수 있습니다. 

 

cf)
업로드하여 생성된 파일 객체의 정보를 이용하여 업로드를 막을 수도 있습니다. 예를 들면 파일 객체의 size를 제한해서 업로드를 막을 수도 있습니다.

이미지 썸네일 노출

• 이미지를 올리고 나면, 썸네일 이미지가 노출되곤 합니다. 사용자가 올린 이미지가 어떤 것인지 썸네일로 인식시켜주는 것이죠. 원래는 Ajax로 image와 같은 파일을 먼저 서버로 올린 후, 잘 올라갔으면 어떤 응답 값을 받습니다. 예를 들어 썸네일이미지 주소를 받을 수 있을 겁니다. 그 정보를 받아서 화면에 썸네일이미지를 노출하는 것이 일반적인 과정입니다.
• 여기서는 편의상 서버로 이미지를 실제로 올리기도 전에, 서버와의 통신 없이 createObjectURL를 사용한 썸네일 노출 방법을 알아보겠습니다. createObjectURL 라는 URL에 있는 정보를 활용해서 image 정보를 화면에 넣어볼 겁니다.

const elImage = document.querySelector("#reviewImageFileOpenInput");         elImage.addEventListener("change", (evt) => {             const image = evt.target.files[0];             if(!valideImageType(image)) {                 console.warn("invalide image file type");                 return;             }             //이렇게 넣으면 이미지 정보가 화면에 노출됩니다.             const elImage = document.querySelector(".thumb_img");             elImage.style.display = "inline-block";             elImage.src = window.URL.createObjectURL(image); //window 객체 안에 URL 객체를 이용하면 createObjectURL이라고 해가지고 어떤 객체 URL을 만들 수가 있습니다. 만약 파일을 넣으면 그 파일에 접근할 수 있는 url을 만들어줍니다.         })

 

 

• 이걸 통해서 굉장히 빠르게 썸네일을 노출할 수 있다는 장점이 있어요. 되게 UX에 좋은 코딩 기법이라고 할 수 있습니다.
• 'thumb_img' 클래스를 가진 image 엘리먼트에 속성으로 image객체를 추가하면 됩니다.

참고 자료

[참고링크] file input 처리하는 방식 설명

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

[참고링크] file 을 처리하는 다양한 방법들

http://chris.improbable.org/2011/1/5/how-to-develop-a-html5-image-uploader/

[참고링크] createObjectURL

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL