Barkirvanê pelê

Şêwazên Çalakiya Şewitandina Pelan li Material UI

Material UI (MUI) seva populer e ji bo pêşkeftina UI di serlêdanên React de. Lê, dema ku fûnksiyonê şewitandina pelan hatine çêkirin, hinek çewtiyên giştî an pirsgirêkan gihîjîdî dikin. Di vê gotarê de, em ê li ser çewtiyên giştî yên şewitandina pelan bi Material UI û çareseriyên wan şirove bikin.

1. Pêwîstiya pelan pêş veha çewtiya nîşan didin

Heke hûn bi React Hook Form re girêdan in, piştî hilbijartina pelan nirxên formulê nîz dikin dûr dikin, û çewtiya têkildar jî ma dike.

Çareser: bi setValue fûnksiyona neteweyê nirxê piştrast bikin.

import { useForm } from 'react-hook-form';

const { register, setValue, handleSubmit, formState: { errors } } = useForm();

const handleFileChange = (event) => {
  const file = event.target.files[0];
  setValue('uploadFile', file);
};

2. Düğmek şewitandin nake

Çareser: bi Button komponenta component="label" yê binavkirin.

<Button variant="contained" component="label">
  Pelan hilbijêre
  <input type="file" hidden onChange={handleFileChange} />
</Button>

3. accept taybetmendiyek di nihêr de nayê gîhandin

Çareser: ya xwerû input eleman bi kar bînin an taybetmendiyek li ser rûniye.

<input type="file" accept=".jpg,.png" onChange={handleFileChange} />

4. Validasyonê mezinahiya pelan an beamperên

Çareser: bi JavaScript re validasyonê zêde bikin.

const handleFileChange = (event) => {
  const file = event.target.files[0];
  const maxSize = 2 * 1024 * 1024; // 2MB
  const allowedExtensions = ['jpg', 'png'];
  const fileExtension = file.name.split('.').pop().toLowerCase();

  if (file.size > maxSize) {
    alert('Mezinahiya pelan zêde ye.');
    return;
  }

  if (!allowedExtensions.includes(fileExtension)) {
    alert('Forma pelan ne qebûl e.');
    return;
  }

  // Heke pelan şertên diyar bikin, ev çalakî bike
};

5. Lîsteya Çareseriyên Çewtiyan

• ✔️ Heke MuiFileInput tê bikaranîn, bi setValue nirxên formulate nû bikin
• ✔️ Heke Button bi component="label" yê binavkirin
• ✔️ Heke taybetmendiyê input ya accept rast bi kar dibe
• ✔️ Heke validate ya mezinhiyan an beamperên tê de çalak e
• ✔️ Heke mesajan çewtiyan bi manera hêsan ji bo bikarhêneran nîşan dide

6. Aletên bîkêşanê yên baş li şewitandina pelan

Ji bo test û demo yên fûnksiyonê şewitandina pelan, UploadF heye.

• Bi PC û telefonên zîrek re rêveber dike
• Bi drag-and-drop re rêveber dike
• Bi temamî bela

Têstinê UploadF

---

De di çêkirina fûnksiyona şewitandina pelan bi Material UI de hinek çewtiyên din têne dîtin, lê şîroveya vê gotarê ji bo rast çalakirinê hûn dikarin serhildan vekin.

Serkeftin   Alîkarî   Têkilî   🏳️Language