วิธีการกำหนด File Upload ให้เลือกรับเฉพาะ image หรือ pdf และวิธีกำหนดขนาดไฟล์

React.js Jul 16, 2023

เวลาที่เราใช้ Input file เราสามารถที่จะเลือกได้ว่าจะให้ User ทำการอัพโหลดไฟล์ชนิดใดเข้ามา หรือทำการกำหนด ขนาด size ของรูปภาพได้ ว่าห้ามเกินเท่าไหร่ๆ วันนี้จะมาลองยกตัวอย่างง่ายๆ ในการทำ file upload ของ React.js กันนะครับ

จากโค๊ดตัวอย่าง การใช้ input แบบ file เราสามารถใช้ attributes accept ได้เลย

<input type="file" accept="image/png" />

หน้าเว็บ เวลาเรากดเลือก file เราจะไม่สามารถเลือก file ที่นอกเหนือจาก png ได้

ตัวอย่าง ลองกดด้านล่าง รับเฉพาะไฟล์ png

ตัวอย่าง ลองกดด้านล่าง รับเฉพาะไฟล์ pdf โดยใช้ application/pdf

ตัวอย่างไฟล์ต่างๆ เช่น

application/pdf หรือ .pdf - สำหรับ pdf
image/* - เป็นแบบ image ทั้งหมด ไม่สนใจว่าเป็น นามสกุลอะไร
.csv - รับเฉพาะ ไฟล์ CSV
text/plain - รับเฉพาะไฟล์ text ธรรมดา .txt
video/* - ไฟล์ video ต่างๆ
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet - สำหรับไฟล์ Excel (.xlsx)

การกำหนดขนาดไฟล์ size ด้วยการใช้ onChange

  const Form = () => {
      const handleChange = (event) => {
        const file = event.target.files[0]
        const size = file.size // แสดงเป็น bytes

        console.log(`size`, size)

        // กำหนดให้ size ใหญ่ไม่เกิน 1Mb
        if (size / 1024 > 1000) {
          alert("ไฟล์ขนาดใหญ่เกิน 1 Mb")
          return
        }
        setSelectedFile(event.target.files[0])
      }
      
      return (
        <input type="file" accept="image/*" onChange={handleChange} />
      )
  }

ไฟล์แบบเต็มๆคือ

import React, { useState } from 'react'

const Form = () => {
  const [selectedFile, setSelectedFile] = useState(null)

  const handleChange = (event) => {
    const file = event.target.files[0]
    const size = file.size // แสดงเป็น bytes

    console.log(`size`, size)

    // กำหนดให้ size ใหญ่ไม่เกิน 1Mb
    if (size / 1024 > 1000) {
      alert('ไฟล์ขนาดใหญ่เกิน 1 Mb')
      return
    }
    setSelectedFile(event.target.files[0])
  }

  console.log('selected file', selectedFile)

  return (
    <>
      <h1>Example</h1>
      <input type="file" accept="image/png" onChange={handleChange} />
    </>
  )
}

export default Form

สรุป

บทความนี้ก็เป็นบทความพื้นฐานง่ายๆ ในการ handle File ว่าจะให้รับ accept ไฟล์นามสกุลอะไร? ตัวอย่าง ยกเป็นเคส React มาให้ดูครับ เพื่อให้เห็นภาพ แต่จริงๆ แล้ว เราสามารถใช้แบบ HTML ธรรมดาก็ได้เช่นกัน

Happy Coding ❤️