๐ŸŒŸ <input type="file" /> ๋ชจ์–‘ ๋ฐ”๊พธ๊ธฐ

summereuna๐Ÿฅยท2022๋…„ 6์›” 20์ผ

๐ŸŒŸ Twinkle (React, Firebase)

๋ชฉ๋ก ๋ณด๊ธฐ
28/42

<input type="file" />์˜ ๋ชจ์–‘์€ ๊ฐ ๋ธŒ๋ผ์šฐ์ € ๋ณ„๋กœ ์ •ํ•ด์ ธ ์žˆ์–ด์„œ ๋ฐ”๊ฟ€ ์ˆ˜๊ฐ€ ์—†๋‹ค.
์ด๋Ÿด ๋•Œ label ํƒœ๊ทธ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ฝ๊ฐ„์˜ ๊ผผ์ˆ˜์•„๋‹Œ ๊ผผ์ˆ˜๋ฅผ ๋ถ€๋ ค๋ณผ ์ˆ˜ ์žˆ๋‹ค.

  1. css์—์„œ hidden ํด๋ž˜์Šค๋ฅผ ๋งŒ๋“ ๋‹ค.
.hidden {
  display: none;
}
  1. input์— label๊ณผ ์—ฐ๊ฒฐํ•  id๋ฅผ ์ฃผ๊ณ  class๋ช…์— hidden์„ ์ž…๋ ฅํ•œ๋‹ค.
<input
  name="file"
  type="file"
  accept="image/*"
  onChange={onFileChange}
  ref={fileInput}
  id="files"
  className="hidden"
  />
  1. label์˜ for์— ์—ฐ๊ฒฐํ•˜๊ณ ์žํ•˜๋Š” input์˜ id๋ฅผ ์ž‘์„ฑํ•˜๊ณ , value์— ์›ํ•˜๋Š” ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ๋Š”๋‹ค.
<label for="files">
  <FontAwesomeIcon icon={faImage} size="2x" />
</label>

๐ŸŒŸ ์™„์„ฑ! ๐ŸŒŸ

profile
Always have hope๐Ÿ€ & constant passion๐Ÿ”ฅ

0๊ฐœ์˜ ๋Œ“๊ธ€