input type file

<input type="file" />

저번에 만들었던 모달 안에 게시글 등록 폼을 작성할 예정

일단 img파일을 넣기 위해서  type=file인 Input 태그를 사용할 예정임

 

import { useRef } from "react";
import { TiPlus } from "react-icons/ti";
import NewBoardForm from "./BoardForm";

function NewBoardBtn() {
  const dialogRef = useRef<HTMLDialogElement>(null);
  const Open = () => {
	dialogRef.current?.showModal();
  };
  const Close = () => {
	dialogRef.current?.close();
  };
  
  return(
	<>
	  <button onClick={Open} className="fixed bottom-20 right-6 border-4 rounded-full hover:bg-accent hover:text-white hover:border-accent p-2">
		<TiPlus size={32} />
	  </button>
	  <dialog ref={dialogRef} className="w-full p-0 rounded-lg shadow-lg">
		<form method="dialog" className="flex flex-col relative p-10 rounded-lg shadow-lg text-neutral-600modal-box">
		  <button type="button" onClick={onClick} className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
			<GrClose />
		  </button>
		  <label htmlFor="photo" className="flex justify-center w-full h-96 items-center border-2 mb-10 cursor-pointer">
			<TiPlus size={32} />
		  </label>
		  <input type="file" id="photo" className="hidden" />
		  <button type="submit">등록</button>
		</form>
	  </dialog>
	</>
  )

 

뭔가 애매하다... ui좀 바꿔야 할 것 같아서 Ui 바꿈

본문내용을 위에 넣고 사진은 그냥 아래서 추가하는 모양으로 바꿔놨다.

그리고 사진은 3개까지만 가능하게 했는데 3개를 초과하면 

'사진은 3개만 선택가능합니다'라는 모달을 띄우려 했음 이것도 dialog로 했는데 오류가 떴다.....

validateDOMNesting(...): <form> cannot appear as a descendant of <form>.

form태그 안에 form태그가 또 들어가면 안 된다고...

알았다리...

 

<form id="newBoardDialog" onSubmit={() => console.log("hi")} method="dialog" className="flex flex-col relative p-10 rounded-lg shadow-lg text-neutral-600modal-box">
  <button type="button" onClick={onClick} className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
	<GrClose />
  </button>
  <input type="file" multiple={true} id="photo" ref={fileInputRef} onChange={uploadImg} className="hidden"/>
  <div className="flex flex-wrap justify-start mb-12">
  	<label htmlFor="photo" className="relative w-20 h-20 cursor-pointer border ml-1 mr-1">
	  <div className="relative w-20 h-20 flex items-center justify-center border">
		<MdPhotoCamera size={32} />
		<TiPlus className="border rounded-full absolute top-10 left-12 bg-red-600 text-white" size={16} />
	  </div>
	  <span className="absolute top-2/3 text-xs left-1/3 right-1/3">
		{showImage.length}/3
	  </span>
	</label>
	{showImage.map((image, id) => (
	  <div className="w-20 h-20 border relative ml-1 mr-1" key={id}>
		<img src={image} alt={`${image} - ${id}`} className="p-2" />
		<button type="button" onClick={() => handleDeleteImg(id)} className="absolute top-1 right-1 hover:text-lg">
		  X
		</button>
	  </div>
	))}
	<dialog ref={dialogRef}>
	  <form method="dialog" className="flex justify-center items-center">
		<div>사진 선택은 3개까지 가능합니다.</div>
	  </form>
	</dialog>
	<button type="submit">등록</button>
</form>

 

다른 모달창을 만드려고 했는데 생각해 보니까 form만 지우면 될 것 같았음

그래서 다시 form만 지우고 다듬어서 만들어 봄

 

<form id="newBoardDialog" onSubmit={() => console.log("hi")} method="dialog" className="flex flex-col relative p-10 rounded-lg shadow-lg text-neutral-600modal-box">
  <button type="button" onClick={onClick} className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
	<GrClose />
  </button>
  
  //새 글 작성 코드 생략
  
  <input type="file" multiple={true} id="photo" ref={fileInputRef} onChange={uploadImg} className="hidden"/>
  <div className="flex flex-wrap justify-start mb-12">
	<label htmlFor="photo" className="relative w-20 h-20 cursor-pointer border ml-1 mr-1">
	  <div className="relative w-20 h-20 flex items-center justify-center border">
		<MdPhotoCamera size={32} />
		<TiPlus lassName="border rounded-full absolute top-10 left-12 bg-red-600 text-white" ize={16} >
	  </div>
	  <span className="absolute top-2/3 text-xs left-1/3 right-1/3">
		{showImage.length}/3
	  </span>
	</label>
	{showImage.map((image, id) => (
	  <div className="w-20 h-20 border relative ml-1 mr-1" key={id}>
		<img src={image} alt={`${image} - ${id}`} className="p-2" />
		<button type="button" onClick={() => handleDeleteImg(id)} className="absolute top-1 right-1 hover:text-lg">
			X
		</button>
	  </div>
	))}
	<dialog ref={dialogRef} className="w-10/12 py-20 rounded-lg bg-light-color shadow-lg text-neutral-600 outline-none z-[999]">
	  <div className="flex justify-center items-center">
		<div>사진 선택은 3개까지 가능합니다. </div>
	  </div>
	</dialog>
  </div>
  <button type="submit">등록</button>
</form>

 

textarea 적용 관련은 내일 등록하는 기능 만들면서 적어볼 예정임