@lumir-company/editor 0.4.9 → 0.4.10

package/README.md

@@ -18,6 +18,7 @@
   - [파일명 커스터마이징](#파일명-커스터마이징)
   - [커스텀 업로더](#2-커스텀-업로더)
 - [동영상 업로드 및 임베딩](#동영상-업로드-및-임베딩)
+  - [업로드 진행률 표시](#업로드-진행률-표시-이미지동영상-공통)
 - [이미지·동영상 업로드 상세 가이드](#이미지동영상-업로드-상세-가이드)
 - [이미지·비디오 삭제](#이미지비디오-삭제)
 - [HTML 미리보기](#html-미리보기)
@@ -457,6 +458,29 @@ const imageUrl = await s3Uploader(imageFile);
 - **지원 형식**: MP4, WebM, OGG
 - **삽입 경로**: 붙여넣기, 드래그 앤 드롭, 슬래시 메뉴("Video"), FloatingMenu 이미지/동영상 버튼
 
+### 업로드 진행률 표시 (이미지·동영상 공통)
+
+S3 업로드 시 `s3Upload.onProgress` 콜백을 지정하면 업로드 진행률(0~100%)을 받을 수 있습니다. 에디터는 내부적으로 이 값을 사용해 업로드 중 툴바에 **"n%"** 를 표시합니다. 동영상처럼 대용량 파일은 브라우저가 `progress` 이벤트를 자주 보내지 않을 수 있어, 내부적으로 **보간 로직**을 적용해 0→100만 보이지 않고 중간 진행률이 부드럽게 갱신되도록 했습니다.
+
+```tsx
+<LumirEditor
+  allowVideoUpload={true}
+  s3Upload={{
+    apiEndpoint: "/api/s3/presigned",
+    env: "production",
+    path: "videos",
+    appendUUID: true,
+    onProgress: (percent) => {
+      console.log(`업로드 진행률: ${percent}%`);
+      // 에디터 기본 UI에 이미 표시되며, 필요 시 자체 프로그레스 바 등에 연동 가능
+    },
+  }}
+/>
+```
+
+- **동작**: S3 PUT 요청 시에만 호출됩니다. Presigned URL 요청 단계에서는 호출되지 않습니다.
+- **표시**: `onProgress`를 넘기면 에디터 툴바에 `n%`가 자동 표시되며, 업로드 완료 시 숨겨집니다.
+
 ### 데이터 내부 동영상 임베딩
 
 동영상 블록은 `initialContent` / `onContentChange`에 포함됩니다. 저장 시 `{ type: "video", props: { url: "..." } }` 형태로 블록이 유지됩니다.
@@ -1087,6 +1111,11 @@ interface S3UploaderConfig {
   fileNameTransform?: (nameWithoutExt: string, file: File) => string; // 확장자 제외한 이름 변환
   appendUUID?: boolean; // true: 파일명 뒤에 UUID 추가 (확장자 앞에 삽입)
   preserveExtension?: boolean; // false: 확장자를 붙이지 않음 (기본: true)
+
+  // 선택 (업로드 동작)
+  onProgress?: (percent: number) => void; // 업로드 진행률 0~100 콜백 (S3 PUT 시만 호출, 중간 진행률 보간 지원)
+  uploadTimeoutMs?: number; // PUT 타임아웃(ms). 미설정 시 120000(120초). 대용량 동영상 시 연장 권장
+  maxRetries?: number; // PUT 실패 시 재시도 횟수. 기본 2(최대 3회 시도)
 }
 ```
 
@@ -1109,6 +1138,9 @@ interface LumirEditorProps {
     fileNameTransform?: (nameWithoutExt: string, file: File) => string; // 확장자 제외한 이름 변환
     appendUUID?: boolean; // UUID 자동 추가 (확장자 앞)
     preserveExtension?: boolean; // 확장자 자동 붙이기 (기본: true)
+    onProgress?: (percent: number) => void; // 업로드 진행률 0~100 (이미지·동영상 공통, 중간 진행률 보간)
+    uploadTimeoutMs?: number; // PUT 타임아웃(ms). 기본 120000
+    maxRetries?: number; // PUT 재시도 횟수. 기본 2
   };
 
   // === 콜백 ===
@@ -1352,6 +1384,15 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### v0.4.10
+
+- **동영상·이미지 업로드 진행률 표시**
+  - S3 업로드 시 진행률이 0만 보이다가 100으로 바로 완료되던 문제 개선
+  - `xhr.upload.onprogress`와 **보간 타이머**를 함께 사용해 중간 진행률(0→…→100)이 부드럽게 갱신되도록 변경
+  - 업로드 시작 직후 `onProgress(0)` 호출, 완료 시 `onProgress(100)` 보장
+  - README: `s3Upload.onProgress` 설명 및 업로드 진행률 표시 섹션 추가
+  - README: `S3UploaderConfig`에 `onProgress`, `uploadTimeoutMs`, `maxRetries` 문서화
+
 ### v0.4.9
 
 - **업로드 용량·타임아웃 사용자 설정**

package/dist/index.js

@@ -188,19 +188,54 @@ var createS3Uploader = (config) => {
             await new Promise((resolve, reject) => {
               const xhr = new XMLHttpRequest();
               xhr.timeout = uploadTimeoutMs;
+              let lastReported = -1;
+              const REPORT_INTERVAL_MS = 100;
+              const simulatedCap = 90;
+              let simulatedPercent = 0;
+              const simId = setInterval(() => {
+                if (simulatedPercent >= simulatedCap) return;
+                simulatedPercent = Math.min(simulatedCap, simulatedPercent + 3);
+                const p = Math.min(100, simulatedPercent);
+                if (p > lastReported) {
+                  lastReported = p;
+                  onProgress(p);
+                }
+              }, REPORT_INTERVAL_MS);
+              const clearSim = () => {
+                clearInterval(simId);
+              };
               xhr.upload.onprogress = (e) => {
                 if (e.lengthComputable) {
-                  onProgress(Math.min(100, Math.round(e.loaded / e.total * 100)));
+                  const p = Math.min(100, Math.round(e.loaded / e.total * 100));
+                  if (p >= simulatedCap) clearSim();
+                  const toReport = Math.max(p, simulatedPercent);
+                  if (toReport > lastReported) {
+                    lastReported = toReport;
+                    onProgress(toReport);
+                  }
                 }
               };
               xhr.onload = () => {
-                if (xhr.status >= 200 && xhr.status < 300) resolve();
-                else reject(new Error(`Failed to upload file: ${xhr.statusText}`));
+                clearSim();
+                if (xhr.status >= 200 && xhr.status < 300) {
+                  if (lastReported < 100) onProgress(100);
+                  resolve();
+                } else {
+                  reject(new Error(`Failed to upload file: ${xhr.statusText}`));
+                }
+              };
+              xhr.onerror = () => {
+                clearSim();
+                reject(new Error("Upload failed"));
+              };
+              xhr.ontimeout = () => {
+                clearSim();
+                reject(new Error("Upload timeout"));
               };
-              xhr.onerror = () => reject(new Error("Upload failed"));
-              xhr.ontimeout = () => reject(new Error("Upload timeout"));
               xhr.open("PUT", validatedPresignedUrl);
               xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+              onProgress(0);
+              lastReported = 0;
               xhr.send(file);
             });
           } else {