이 섹션에서는 사용자가 파일 및 이미지를 업로드할 수 있는 element(요소)를 다룹니다.
파일 업로드 element(요소)를 사용하면 사용자가 모든 종류의 파일을 Bubble 서버에 업로드할 수 있습니다.
Bubble에는 파일 업로드를 위한 두 가지 element(요소)가 있습니다.
- 하나는 일반 파일 업로드용이고 다른 하나는 이미지 전용입니다.
(1) 데이터베이스에 파일 저장 원리
Bubble 데이터 유형 편집기에서 두 가지 유형의 파일 업로드 필드를 추가할 수 있습니다.
- File
- Image
Bubble 데이터베이스에 파일을 업로드할 때 데이터베이스에는 실제로 파일 자체를 저장하지 않습니다.
파일 업로드는 실제로 두 가지 과정을 거칩니다.
- 먼저 Bubble이 파일을 *AWS 서버에 업로드한 다음 URL을 데이터베이스의 파일에 저장합니다.
- 즉, 데이터베이스의 파일 및 이미지 필드에는 파일 자체가 아니라 파일을 가리키는 URL만 포함됩니다.
- 성능 관점에서 이것은 데이터베이스가 짧은 텍스트 값(파일의 URL)만 보유하고 파일이 필요할 때까지 다운로드되지 않음을 의미합니다.
*참고 1: AWS
Amazon Web Services의 약자로 데이터베이스, 파일 및 기타 많은 기술 자원의 호스팅을 제공하는 클라우드 서비스 플랫폼입니다. Bubble은 데이터베이스 및 파일 업로드에 AWS를 사용합니다.
(2) 업로드된 파일 삭제 방법
파일 저장소 및 데이터베이스에 대한 위의 글에서 살펴본 것처럼 데이터베이스는 실제로 파일을 저장하지 않고 파일에 대한 URL만 저장합니다.
결과적으로 데이터베이스에서 이미지 필드의 내용을 삭제하면 URL이 제거되지만 파일 자체는 삭제되지 않습니다.
실제로 서버에서 파일을 삭제하려면 워크플로에서 업로드된 파일 삭제 작업을 사용해야 합니다.
먼저 삭제할 파일의 URL이 필요합니다. 따라서 파일자체를 삭제하려면 데이터베이스에서 URL을 지우기 전에 먼저 파일을 삭제해야 합니다.
- 업로드된 파일은 기본적으로 공개되어 URL이 있는 모든 사용자가 액세스 할 수 있습니다.
- 파일을 안전하게 비공개로 설정하려면 업로더 element(요소)에서 이 파일을 비공개로 설정을 선택하고 개인정보 보호 규칙을 올바르게 설정해야 합니다. 이는 이미지와 기타 파일 모두에 적용됩니다.
(3) File Uploader (파일 업로더)
파일 업로더 element(요소)는 이미지가 아닌 파일을 업로드하는 데 사용됩니다.
- 파일 업로더 element(요소)는 사용자가 업로드할 파일을 선택한 후 파일 이름을 표시합니다.
- 업로드된 파일의 최대 크기를 설정할 수 있습니다.
- 파일 업로더 요소에는 진행 중인 업로드를 취소할 수 있는 새로운 Action이 도입되었습니다.
- 이미지 파일 유형 업로드도 지원하지만 이미지 업로더 element(요소)는 이를 위한 몇 가지 추가 기능을 제공합니다.
(4) Image Uploader (이미지 업로더)
- 이미지 업로더 element(요소)는 이미지 업로드에 사용되며 업로드 후 이미지 미리보기를 제공합니다.
- 이미지를 초기 콘텐츠로 설정한 경우 해당 이미지도 표시되므로 프로필 사진과 같이 때때로 업데이트되는 이미지에 유용합니다.
(5) Multi-FileUploader(Drag and Drop 영역 포함)
Multi-FileUploader는 일반 파일 업로더와 유사하지만 두 가지 주요 차이점이 있습니다.
- 여러 파일을 업로드할 수 있습니다.
- 사용자가 파일을 드래그 앤 드롭할 수 있는 영역을 설정할 수 있습니다.
업로드할 최대 파일 수와 페이지 로드시 표시할 초기 파일 목록을 설정할 수 있습니다.
Multi-FileUploader element(요소)는 추가 Plugin(플러그인)입니다.
Bubble에서 만들었지만 사용하기 전에 앱에 설치해야 합니다. 플러그인 스토어에서 Multi-FileUploader를 검색하여 설치합니다.
