20220327

요즘 dropzone을 이용하여 파일 업로드를 만들려고 노력중이다

그런데 거기서 드래그 앤 드롭 방식을 제외하고 준비된 버튼을 클릭하면 파일 업로드 창이 뜨는 방식을 말이다.

드래그 앤 드롭 상태를 그대로 가져와 사용하는 것은 그렇게 어렵지 않았지만 그중 일부분만 원하는 식으로 사용할려고 하니 훨씬 어렵게 느껴졌다.

 

지금은 php로 드롭존을 이용하는 영상을 보는 중인데 php라도 돌아가는 건 비슷하지 않을까 싶다.

 

<form id = "dropzoneForm" class="dropzone" action="{{ route('dropzone.upload')}}">
	@crsf
</form>
<button type="button" class"btn btn-info" id="sumbit-all">upload</button>

<script type="text/javascript">
	Dropzone.options.dropzoneForm = {
    	autoProccessQueue : false, //자동 업로드 false
        acceptedFiles : ".png , .jpg", //허용 확장자
        
        init: functon(){
        	var submitButton = document.querySelector("submit-all"); //document.querySelector() 해당되는 첫번째 요소를 반환
            myDropzone = this;
            submitButton.addEventListener('click',function(){
            	myDropzone.processQueue();
                //autoProccessQueue가 false일 경우 processQueue()를 호출해야 업로드가 된다
            });
            this.on("complete",function(){//callback function
            	if(this.getQueuedFiles().length == 0 && this.getUploadedFiles().length == 0){
                	var _this = this;
                    _this.removeAllfiles();
                    //dropzone영역에 아무것도 없으면 서버에 있는 모든 파일을 삭제하는 문구인듯
                }
            })
        }
    };
</script>

 

<input type="file" name="name[]" multiple="multiple">

[]를 붙이면 getUploadedFiles() 가 두개 이상의 파일을 표시한다고 한다. 그런데 getUploadedFiles()는 php의 방식인 것 같아 나는 다른 방식으로 바꿔야할 것 같다.

 

 

참고영상: https://youtu.be/PrvbPp6W7S4

참고 글: https://velog.io/@xedni/JavaScript-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-FormData

JavaScript | 파일 업로드 (FormData)

file 파일추가 버튼 감추기 :https://doolyit.tistory.com/204

이미지변경시 input file 은 감추고, 이미지 클릭시 파일선택 창 바로 띄우기 / javascript

https://darrengwon.tistory.com/650 

 <input type="file" id="file" name="file" style="display:none;" >

visibility: "hidden"이 아니라 display: "none"을 써야 파일 선택이라는 버튼을 가릴 수 있는 듯 싶다.

visibility를 사용하면 버튼이 가려지기는 하나 그 공간을 차지하기 때문에 css에서 계속 수정을 해줘야한다는 단점이 존재