tui.file-uploader
tui.file-uploader copied to clipboard
nhn
TypeError: undefined is not an object (evaluating 'data.name') 에러
Version
3.1.3
Development Environment
Mac OS X, Safari
Current Behavior
console에 아래와 같은 에러가 발생합니다.
TypeError: undefined is not an object (evaluating 'data.name')
Expected Behavior
서버 환경은 Spring boot를 사용하며, 사내 내부 서비스 개발에서 파일 업로드를 사용하려고 적용 해보려 했습니다. 기본적인 예제인 샘플을 참고 했구요. 기본 01 이거를 참고하여 코드는 따로 수정하지 않고 적용하였습니다. 아래는 제가 적용한 코드입니다.
$(document).ready(function() {
let uploader = new tui.FileUploader($('#uploader'), {
url: {
send: "/files/upload/temp",
},
isMultiple: false,
listUI: {
type: 'simple'
}
});
uploader.on('success', function(evt) {
alert(evt.success + ' files uploaded');
});
});
<div id="uploader" class="tui-file-uploader">
<label class="tui-btn tui-btn-upload">
<span class="tui-btn-txt">Add files</span>
<input type="file" name="userfile[]" class="tui-input-file">
</label>
<div class="tui-js-file-uploader-list"></div>
</div>
jQuery 버전은 3.3.1을 사용하고 아래와 같은 js를 로딩했습니다.
<script th:src="@{/webjars/jquery/dist/jquery.min.js}"></script>
<script th:src="@{/static/lib/tui/code-snippet-1.5.0/tui-code-snippet.min.js}"></script>
<script src="https://uicdn.toast.com/tui.file-uploader/latest/tui-file-uploader.js"></script>
아무리 방법을 찾아봐도 아래와 같은 콘솔 에러만 발생하고 동작이 되지 않습니다..
TypeError: undefined is not an object (evaluating 'data.name')
이 문제에 대해 해결책이 있다면 알려주시면 감사하겠습니다.
@dexbymhlab
- https://codesandbox.io/embed/0373149npl
작성해주신 코드를 실행해봤는데 해당 타입에러가 발생하지 않네요. 실행 화면과 구체적인 코드 에러 부분을 알 수 있을까요?
넵 일단 개발하고 있는 페이지에서 바로 붙이진 않고 따로 테스트페이지를 통해서 개발을 진행하였습니다. 혹시 몰라서 풀 코드를 첨부드립니다. (혹시 몰라서 Back-end 단도 첨부 드립니다.) 서버측은 Spring Boot 2.1을 사용중이고 Thymeleaf를 사용하고 있습니다.
<!—HTML —>
<!-- -->
<!--<link rel="stylesheet" th:href="@{/static/lib/tui/file-uploader-3.1.2/tui-file-uploader.css}"/>-->
<link rel="stylesheet" href="https://uicdn.toast.com/tui.file-uploader/latest/tui-file-uploader.css" />
<!— test.js —>
/**
- Created by MHLab on 2019-03-25.. */
$(document).ready(function() { let uploader = new tui.FileUploader($('#uploader'), { url: { send: "/files/upload/temp", }, isMultiple: false, listUI: { type: 'simple' } });
uploader.on('success', function(evt) {
alert(evt.success + ' files uploaded');
});
});
<!— Java (Controller) —>
@Slf4j @Controller @RequestMapping("files/*") public class FileController {
@Autowired private FileDataService fileDataService;
@Autowired private ExcelParserService excelParserService;
@PostMapping("upload/temp")
public ResponseEntity postUploadTempFil1e(HttpServletRequest request, @ModelAttribute List<MultipartFile> filelist) {
filelist.forEach(file -> log.info("file = " + file.getOriginalFilename()));
//excelParserService.parseData4ExcelFile(fileDataService.fileUpload2Local(request.getSession(), filelist));
return ResponseEntity.ok(fileDataService.fileUpload2Local(request.getSession(), filelist));
}
}
<!— 문제 Gif —> GIF라서 화질이 좋지 않습니다. 필요하시다면 동영상으로 드리겠습니다.
정확한 원인을 못찾아서 이렇게 이슈 메일까지 작성드리게 되었네요 ^^;; 해결 방법이 있다면 부탁드리겠습니다.
감사합니다!
- 오전 9:36, 한정 [email protected] 작성:
https://codesandbox.io/embed/0373149npl https://codesandbox.io/embed/0373149npl 작성해주신 코드를 실행해봤는데 해당 타입에러가 발생하지 않네요. 실행 화면과 구체적인 코드 에러 부분을 알 수 있을까요? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/nhnent/tui.file-uploader/issues/30#issuecomment-476018628, or mute the thread https://github.com/notifications/unsubscribe-auth/AroQ5OXn5iUnnqPUT1JMcN7wxWyJeJ8gks5vaBoYgaJpZM4cFmjA.
@dexbymhlab 안녕하세요! 올려주신 gif 사진이 안보이네요.. 혹시 크롬 개발자도구에서 에러가 발생하는 부분의 자바스크립트 코드 부분을 캡쳐해서 같이 올려주실수 있나요?
메일 회신을 하니 여기서 안보이네용 ^^; 직접 글을 작성하겠습니다.
먼저 요청하신 스크립트 코드 부분에 대한 gif 스크린샷입니다.
확인 부탁드리겠습니다.
@dexbymhlab 서버측에서 응답에 name을 넣어주지 않는것 같은데요! 간단한 노드 서버 코드가 있는데 이 코드로 한번 확인 부탁드립니다!
- https://github.com/nhnent/tui.file-uploader/blob/master/server/app.js