ก่อนอื่นต้องขออวยซักนิดว่า react Hooks เนี่ยนะเป็นอะไรที่เข้ามาทำให้ชีวิตชาว coding มันง่ายมันดีขึ้นจริงๆ (แต่ถ้าอันไหนเขียนยากๆ หา package เอานะคะ จะได้ไม่เสียเวลา 😊) จากบทความก่อนหน้านี้ที่เราเคยเขียนวิธีการใช้ useState
นับ Character ใน input และบทความนี้ก็เช่นกันค่ะ มาดูกันเลย
อย่างที่ทราบกันดีว่าถ้าเราต้องการจะ upload file นามสกุลต่างๆ
เราจะใช้ input type=”file” ซึ่งมันก็ provide มาประมาณนึง
<input type="file" id="myfile" name="myfile">เมื่อกดเลือกไฟล์ต่างๆ นั้น tag จะแสดง ชื่อไฟล์ที่เราเลือกตามรูปแบบ default ของ browser ที่เราใช้เท่านั้น เพราะว่า tag นี้เนี่ยค่อนข้างครอบจักรวาล file ค่ะ ซึ่งถ้าเราใช้งานกับไฟล์บางประเภทเช่น รูปภาพ ก็มีโอกาสที่จะกดเลือกไฟล์ผิดเพราะชื่อไฟล์ใกล้เคียงกันบ้าง หรือว่า ชื่อไฟล์ภาพไม่สื่อบ้างค่ะ การปรับส่วนนี้ให้เป็นภาพ preview ก่อนจึงน่าจะทำให้ user ใช้งานได้ง่ายขึ้นค่ะ
มาดูตัวอย่าง code กันเลยดีกว่าเริ่มจากเขียน input type="file"แล้ว set State เริ่มต้นไว้ชื่อ selectedImage ค่ะ
แล้ววาง tag img ส่วนที่จะ preview ไว้โดยเราจะมี div class preview ครอบไว้อีกทีค่ะ
โดยที่ src ของ img นี้ก็คือ url ของภาพที่เราเลือกมา โดยที่จะให้มันไปเก็บไว้ที่ state selectedImage ก่อน แล้วใช้ URL.createObjectURL() ดึงมาวางใน dom อีกทีค่ะ แน่นอนค่ะว่าตอนที่ที่เรายังไม่ได้เลือกภาพอะไรมันจะ error นะคะ ดังนั้นเราจึงต้องเขียน if เช็คไว้ด้วยนะคะ
จากนั้นเราจะเขียน function triggered เมื่อมีการเลือก file (onChange) ในที่นี้จะตั้งชื่อ func ว่า imageChange แล้วเช็คว่าถ้าหาก file.length ไม่เท่ากับ 0 ให้ selectedImage มีค่าเท่ากับ target files [0] (ส่วนนี้เป็น array นะคะเลยเขียนเลือกตัวแรกค่ะ) โดยเรียก func เมื่อมีการ onChange นั่นเองค่ะ
เพียงเท่านี้ ก็จะสามารถแสดงภาพตัวอย่างที่เราเลือกมาได้แล้วค่ะ
จริงๆ ถึงตรงนี้ถ้าเรากดเลือกไฟล์ใหม่ภาพก็จะเปลี่ยนเป็นภาพใหม่ทันทีค่ะ แต่ถ้าเราต้องการจะลบภาพล่ะ (ไม่เอาแล้ว..ไม่ถูกใจเลยซักภาพ 😫) ให้เราสร้าง button มาหนึ่งอันเพื่อให้กดปุ่มนี้แล้วลบล้างค่าไปให้หมดสิ้นเลย เมื่อคลิ๊กแล้วจะให้ไปเรียก func (removeSelectedImage) ที่จะใช้ล้างค่าค่ะ
มาถึงตัวที่เราก็ไม่ค่อยได้ใช้จริงจังเลยค่ะ นั่นก็คือ useRefเพราะส่วนมากเคสที่เราเจอจะจบที่ useState ค่ะ เนื่องจากการที่จะ reset ค่าใน input เราจะต้องล้าง value ที่เลือกมาจึงต้องมีการอ้างอิงค่ะว่าเราจะลบ input ตัวไหน
ก่อนอื่นเลยเรียก useRefแล้วประกาศตัวแปร ref ค่ะ ต่อด้วย สร้าง func removeSelectedImage โดยใน function เราจะให้ setSelectedImage เป็น null แล้ว ให้ค่า value ของ ref เป็น null ค่ะ แล้วให้ใส่ ref={ref} ที่ input file ค่ะ
แค่นี้เมื่อเราเลือกไฟล์แล้วอยากจะลบก็แค่กดปุ่ม Remove ค่า
สุดท้ายแต่ไม่ท้ายสุดทำยังไงให้ปุ่ม browse แสดงผลเหมือนกันทุก browser ดี แล้วทำไงมันถึงจะเป็นปุ่มสวยๆ ดี อันนี้ไม่ยากค่ะ เพราะแค่ css กับ html ก็เริ่ดแล้ว เรามาดูโค้ดกันค่ะ
ใส่ label ครอบ input แล้วอ้างอิง id ด้วย for ค่ะ แล้วใส่ display: none; ที่ input เพื่อซ่อน style input เดิมไปค่ะ และหันมาตกแต่งที่ label แทนค่ะ ซึ่งตอนนี้เราใส่ style เป็นปุ่มค่ะ 😅
มาถึงตรงนี้น่าจะครบหมดแล้วสำหรับ case upload ภาพนะคะ ก็หวังว่าจะเป็นประโยชน์กับเพื่อนๆ ไม่มากก็น้อยน้าค้า code final อยู่ด้านล่างนี้ค่ะ 😇
สุดท้ายนี้ต้องขอขอบคุณบทความด้านล่างมา ณ ที่นี้ด้วยค่ะ 😊
