한국형 게시판 서비스와 연동작업시 multi file 영역이 변경되었는지 체크할 필요가 생겼습니다.
상황을 설명하기가 조금 애매한 부분이 있는데, 정리해서 얘기하자면, 이미지 업로드와 이미지외 POST를 분리처리하는 형태입니다.
기존 업로드된 파일에 변경이 없는 경우는 이미지 파일을 제외하고 업로드하고,
이미지 파일이 변경된 이미지를 먼저 업로드하고, 정상처리된 상태면, 나머지 필드에 대해 POST 전송을 처리하는 방식입니다.
pintura + filepond 를 사용시, 멀티 파일 이미지 편집뿐만 아니라 추가, 삭제, 이미지 순서변경(reorder) 등을 사용할수 있습니다.
멀티 파일이 변경되었는지를 체크하고, 변경된 경우만 서버쪽 이미지 저장 페이지를 호출하는데, 멀티 파일 변경을 체크하는게 쉽지가 않습니다.
filepond에서 이를 api 로 제공하면 좋겠지만, filepond는 server api 를 제공함으로써, 변경시 서버와 동기화 시키는 방식을 사용합니다.
(이 경우, 수정 액션을 모두 취소할수 없는 상황이 될수 있습니다. 따라서, 사용자가 최종 저장 버튼을 누를때만 처리하는것이 바람직합니다.)
멀티파일 업로드에서 filepond가 관리하는 파일이 수정되는지 확인하기 위해 두가지 로직을 추가합니다.
1. 기존에 저장된 이미지 파일은 처음 로딩시에 meta데이타에 특정 값을 추가합니다.(코드에선 {'preload' : true} 를 추가함)
2. 파일이 추가될때, 파일 사이즈를 저장합니다. 이때 file.filesize는 원본에 대한 사이즈임으로 이미지 편집을 하더라도 변경이 되지 않습니다. endcodedDataSize 를 meta에 저장합니다.
이제 파일이 변경되었는지를 체크하기 위해 다음의 로직을 추가합니다.(변경의 기준은 서버에 업로드를 다시 해야 할 상황임)
1. 이미지 파일 순서가 변경되면, 변경
2. 신규파일이 추가되면, 변경
3. 파일이 삭제되면, 변경
4. 이미지가 preparefile 될때, endcodedDataSize 메타가 존재하고(신규 파일 추가될때 저장), endcodedDataSize 다른 경우면 변경
이를 처리하기 위해 filepond callback event 를 추가합니다. 코드는 아래와 같습니다.
var uploadImages = {
['source' => '서버의 이미지 url 주소',
'options' => ['metadata' =>['preload' => 'yes']
],
...
}
var isUploadImageChanged = false;
var detailImages = FilePond.create(document.querySelector('.my-pond'),{
....
});
detailImages.on('init',() => {
console.log('--------- Filepond init -----------');
});
detailImages.on('addfile', (error, file) => {
if (error) {
return;
}
console.log('add file filename=', file.filename);
if(!file.getMetadata('preload')) {
console.warn('uploadImageChanged');
isUploadImageChanged = true;
}
file.setMetadata('encodedDataSize', file.getFileEncodeDataURL().length);
});
detailImages.on('processfilestart', (error, file) => {
if (error) {
return;
}
console.log('processfilestart');
});
detailImages.on('preparefile', ( file, output) => {
if(!file.getMetadata('encodedDataSize')) {
} else {
if(file.getMetadata('encodedDataSize') != file.getFileEncodeDataURL().length) {
console.warn('uploadImageChanged encodedDataSize=%d, file.getFileEncodeDataURL().length=%d ', file.getMetadata('encodedDataSize'), file.getFileEncodeDataURL().length);
isUploadImageChanged = true;
}
}
});
detailImages.on('updatefiles', (files) => {
});
detailImages.on('removefile', (error, file) => {
if (error) {
return;
}
console.warn('removefile');
isUploadImageChanged = true;
});
detailImages.on('reorderfiles', (files, origin, target) => {
console.warn('reorderfiles');
isUploadImageChanged = true;
});
//if(isUploadImageChanged == true) {
// var formData = new FormData();
// formData.append("mode", "modify_upload_images" );
// detailImages.getFiles().forEach(file => {
// ...
// formData.append("upload_images[]", newImage);
// ...
// }
// ajax 파일 업로드 실행
//
//}