بارکەرەوەی پەڕگە

چاره‌سه‌ری هەڵەی بارکردنی پەڕگە لە Material UI

Material UI (MUI) پەیوەندیداری خۆشەویستیە لە پەرەپێدانی UI لە ئاپلیکەیشنە کانی React. بەڵام، کاتێکی بارکردنی تایبەتی پەڕگە بەرزکردنەوەیە، دەتوانرێت چەند هەڵە یان کەسەندنی گشتی پەخش بکرێت. ئەم ب Article دادەربەردنەوەدا باسی هەڵەکان و چاره‌سه‌ری هەڵەکان دروست بەرەو بازنیدا دەکەین.

1. هەڵەی پەیامەکی ڕووناکیش سەر بەرزە

کاتێکی کە هەوڵدانە تێکەڵەی React Hook Form، پەیامێکی ڕووناکی بەرز/بەرز نەبە، کە مەناچی ئیشی بەرزەکان بێت.

چاره‌سه‌ری: setValue پەیوەندینەکان بەرەوپێش کۆمەڵگای داگرتن.

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. دوگمەی بارکردن ڕاکردنەتەوە

چاره‌سه‌ری: Button بەرز شێوەی component="label" داخران.

<Button variant="contained" component="label">
  پەڕگەی هەلبژێرە
  <input type="file" hidden onChange={handleFileChange} />
</Button>

3. accept پەیوەندیداری پەیدا نابێت

چاره‌سه‌ری: پێویستە پەیوەندیدارێکی نەتەوەیی input بەکارببە.

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

4. وەزارەتی بەرز بوو کردنی پەڕگە و بەرچاوکردن

چاره‌سه‌ری: لە JavaScript دا وەزارەتی بەرز بوو نیوە.

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('قەبارەی پەڕگە زۆرە.');
    return;
  }

  if (!allowedExtensions.includes(fileExtension)) {
    alert('فۆرمی پەڕگەی پەیوەندیدەرانە نییە.');
    return;
  }

  // پەڕگە پێشکەشکردنی
};

5. چێکی چاره‌سه‌ری هەڵەکان

• ✔️ MuiFileInput بەکاربردنی setValue بنەماکان لە کۆمەڵگای دانراوتەوە
• ✔️ Button بەرز شێوەی component="label" داخران.
• ✔️ input پەیوەندیداری accept خۆماوانەە کە کاردەکات.
• ✔️ پەڕگە و فۆرمی بەرز بوو نیوەرە.
• ✔️ پەیامەکا گەرەتیی بیانی با تایبەتی بەرگەی تاقی جەرهە قیبەی دابەش بەرزکراوەتەوە.

6. بەرز بەرزانی بارکردنی پەڕگە

بەرزکردنی هەواڵی بارکردنی پەڕگە و دیمو یەکەکان، UploadF هەیە.

• پەیوەندیداری کاربەر و موبایل
• بەرز بەرزانی بارکردن
• بەلایەنی بەرهەمی گشتی

تاقی کردنەوەی UploadF

---

لە کاتی پێشکەشکردن، هەندێکی هەڵە هەیە بەرز بەرز کە دەبێت بەرز ببرن، بەڵام گرینگە ئەم ب Article تیکینی ویجە دێتەوە بۆ بەرز جێبەجێ بکەینەوە.

سەرەکی   یارمەتی   پەیوەندیکردن   🏳️Language