[Oracle APEX] 사용자 이미지 업로드 및 삭제하기

이번 포스트에서는 사용자 관리 테이블에 이미지를 업로드하고 APEX 화면에서 이미지를 표시하는 방법을 소개합니다.

1. 테이블에 컬럼 추가 및 페이지 아이템으로 동기화

앞선 포스트에서 APEX_USERS 라는 테이블을 생성했습니다. 이 테이블에 세 컬럼을 추가합니다.

사용자 관리 폼 페이지 (페이지 11, P11)에서 Synchronize Page Items 를 클릭해서 테이블에 새로 추가한 세 컬럼을 불러옵니다.

세 컬럼이 동기화되는데 IMG_FILENAME과 IMG_MIMETYPE은 사용자에게 보여줄 필요는 없으니 HIDDEN 처리합니다.

2. 이미지 업로드 아이템 설정

이미지를 업로드 하기 위해 페이지 아이템을 하나 추가합니다.

IMG_BLOB 을 복제하면 편리합니다. 왜냐하면 이미지 업로드는 SOURCE 로 BLOB 컬럼이 지정되어야 하기 때문입니다. 복제한 컬럼의 이름은 P11_IMAGE_UPLOAD 로 설정하겠습니다. TYPE은 Image Upload로 합니다.

Display As 는 이미지 업로드 부분의 모양을 결정합니다.

Storage에서 Type은 BLOB cloumn specified in Item Source attribute를 선택하고, MIME Type Column에는 IMG_MIMETYPE을 Filename Column에는 IMG_FILENAME을, BLOB Last Updated Column에는 UPDATED_AT 을 지정합니다. 이 컬럼들은 APEX_USERS에 정의되어 있는 컬럼들입니다.

추가 세팅으로 크롭을 허용할 수도 있고, 리사이즈도 제공합니다.

📄이미지 업로드 디스플레이 5종류

Display As 에서 선택할 수 있는 5 종류의 형태가 있습니다. 원하는 것을 사용하면 됩니다.

1. Inline File Browse

2. Icon Dropzone

3. Inline Dropzone

4. Block Dropzone

5. Native File Browse

3. 이미지 표시 아이템 설정

이미지를 업로드하면 그것을 표시할 아이템을 설정해주어야 합니다. P11_IMG_BLOB 아이템에 설정하면 됩니다.

Type을 Display Image 로 설정합니다.

Settings에 Based On은 BLOB Column specified in Item Source를 선택하고, Filename, MIME Type, Last Updated를 설정합니다.

그리고 이미지가 없을 때는 아이템을 표시하지 않도록 Server-side Condition을 다음과 같이 설정해줍니다.

Expression > SQL 로 설정하고 SQL Expression 을 입력합니다.

💡쉽게 생각하면 Item is NOT NULL 조건을 선택하고 IMG_BLOB을 선택하면 동작할 것으로 생각되지만, 실제로는 그렇게 동작을 하지 않기 때문에 SQL로 설정하는 것입니다.

4. 이미지 업로드 테스트

이제 사용자 관리 폼으로 들어가서 이미지 업로드를 테스트 해봅시다.

이미지를 선택하면, 크롭 옵션이 표시됩니다.

크롭을 적용하면 다음과 같이 이미지 업로드 섹션에 업로드할 이미지가 작게 표시 됩니다. 하지만 이걸로 끝이 아닙니다. 여기서 취소를 하고 창을 닫으면 이미지는 업로드 되지 않습니다. Apply Changes 를 눌러서 업로드를 진행해야 합니다.

그러면 이제 업로드한 이미지가 표시됩니다.

5. 이미지 삭제 버튼 넣기

이미지 업로드를 다시 하면 다른 이미지로 교체가 됩니다. 하지만 이미지를 삭제하려면 어떻게 해야할까요? 별도로 버튼을 추가하고 Dynamic Action으로 처리해야 합니다.

다음과 같이 버튼을 추가하겠습니다. 버튼을 클릭했을 때, Execute Server-side Code를 실행하도록 해줍니다. 앞에 Confirm이 있으면 유용하겠지요. 뒤에 Submit Page를 해서 이미지를 지워준 다음 창을 새로고침합니다.

Server-side Code는 다음과 같습니다.

이제 화면에서 구현된 것을 확인해볼까요?

이미지 삭제 버튼을 클릭하면, Confirm 메시지 후에 이미지가 삭제되고, 이미지가 없는 화면을 표시하게 됩니다.

이번 포스트는 여기까지 입니다.