[Javascript]FileReader 같은 데이터 연속으로 올리기

• 3DS 파일을 웹에 올려 렌더링 → 웹 화면에서 객체 삭제(초기화) → 같은 파일 다시 올리기
• 를 하고 싶었음.
• 초기화까지는 되는데 같은 파일이 연속으로 안 올라가는 현상 발견

FileReader

...
        read3DSFiles: function(obj) {
 
            var reader = new FileReader();
 
            function readFile(index) {
 
                if (index >= obj.files.length) {
                    work3();
                    alert('업로드가 완료되었습니다.');
 
                    return;
                }
 
                var file = obj.files[index];
                var name = file.name;
                var size = file.size;
 
                reader.readAsDataURL(file);
 
                reader.onload = function(e) {
                    var data3ds = e.target.result.split(',');
                    work2(data3ds);
                    readFile(index + 1);
                };
            }
            work1();
            readFile(0);
        },
...

1. FileReader 생성자 생성 : reader
2. work1() 수행
3. readFile(index=0) 수행 
4. 파일이 끝날때까지 readFile() 재귀호출 하며 work2() 수행
5. 마지막 파일(=마지막 index)일때 work3() 수행

• 화면에서 객체 초기화 후 같은 파일을 올리면 아예 1. 번 부터 수행 안되는 것을 확인
• 파일 바이너리 확인 console.log 다 찍어보기 등등 삽질
• FileReader 생성자 구성이 궁금해졌다.

<참고 페이지>

FileReader - Web API | MDN

• 참고 페이지에 따르면, FileReader.result : 파일의 내용을 반환한다. 이 속성은 읽기가 완료 된 후에만 사용 가능 하며 데이터의 형식은 읽기 작업에 어떤 함수가 사용되었는가에 의해 정해진다.

• 파일 탐색기에서 업로드 할 파일을 선택해서 확인 버튼을 눌렀을 때 reader.result에 파일의 내용이 저장된다.
• 파일을 업로드할 때 앞의 내용과 같은 값이 들어와서 수행이 되지 않는 것이 아닐까???? 의심하게 됨.

<input type="file"> 초기화

• 같은 파일을 선택해서 업로드 시도를 하면 아예 work1() 도 수행 되지 않는 것을 확인.
• 그래서 파일을 업로드하는 단계를 뒤져보기로 했다.

<input type="file" name="3DSFileUpload" multiple="" id="3DSFileUpload" onchange="read3DSFiles(this);" text="3DS 입력" accept="*.*">
 

ㅇ

• input element의 onchange 속성이 마음에 걸렸다.
• 여기서 입력한 내용(업로드를 위해 선택한 파일들)이 사라지지 않고 앞의 내용과 비교해서 다르지않아 onchange에 도달하지 못한것이라 판단

$("#3DSFileUpload").val("");

• element 초기화를 해보기로 함. 
• 코드 상 work3() 수행 후 해당 코드 삽입 후 적용
• 같은 파일을 연속으로 업로드 가능해졌다.

<참고 페이지>

javascript - how to reset <input type = “file”>

결론

• FileReader 생성자에 대한 공부(...) 할 수 있었다.
• 파일이 올라가는 시점에 대해서도 정확하게 알 수 있었다.
• 결과가 너무 싱거운것 같다...