פיתוח טופס העלאת קבצים מותאם אישית לאתרים

בניית טפסי העלאת קבצים שלא נשברים

אנו מפתחים טפסי העלאת קבצים שמטפלים בקבצים גדולים, מספקים משוב בזמן אמת, ולעולם לא מאבדים נתונים בשגיאות רשת. לדוגמה, העלאת וידאו 4K בגודל 2 GB אינה בעיה: פס ההתקדמות מציג אחוזים אמיתיים, והעלאה מפוצלת מאפשרת חידוש מהנקודה שבה נכשלה. הגישה שלנו משתמשת בפרוטוקולים מודרניים כמו tus להעלאות הניתנות לחידוש ומאמתת את סוג ה-MIME בשרת במקום לסמוך על הסיומת. הטפסים שלנו מעבדים קבצים בכל גודל וסוג תוך שמירה על חוויית משתמש חלקה.

יישום נכון משלב צד שרת אמין עם חוויית משתמש קדמית מחושבת. בלעדיו, משתמשים רואים מסך לבן או מקבלים "שגיאה 500" ללא הסבר. אנו גם מאמתים גודל קבצים ומספרם כדי למנוע עומס על השרת. הלקוחות מקבלים תהליך שקוף והודעות שגיאה ברורות.

עברנו עשרות פרויקטים ואספנו שיטות עבודה מומלצות שחוסכות זמן ועצבים. הטפסים שלנו תומכים בגרירה ושחרור, תצוגות מקדימות של תמונות, ביטול העלאה, וניסיון חוזר בשגיאות. בשרת, אנו משתמשים באחסון תואם S3 עם כתובות URL חתומות מראש לאספקה מאובטחת. זה מכסה 90% מהתרחישים האופייניים.

למה אימות סוג MIME חשוב?

מפתחים רבים בודקים רק את סיומת הקובץ. תוקף יכול בקלות לשנות שם של סקריפט ל-.jpg ולעקוף זאת. אנו תמיד בודקים את סוג ה-MIME לפי תוכן הקובץ באמצעות mime_content_type() או finfo. זה סוגר 80% מהתקפות העלאת קוד שרירותי. ב-Laravel, ניתן להוסיף כלל מותאם אישית שאפילו דוחה סיומות כפולות כמו file.php.jpg.

מה כלול ביישום

צד לקוח:

• אזור גרירה ושחרור + כפתור "בחירת קובץ"
• תצוגות מקדימות של תמונות (באמצעות FileReader או URL.createObjectURL)
• פס התקדמות העלאה עם אחוזים אמיתיים
• אימות: סוג קובץ, גודל, כמות
• טיפול בשגיאות עם הודעות קריאות
• ביטול העלאה באמצעות AbortController

צד שרת:

• העלאה מרובת חלקים עם תמיכה בקבצים גדולים (העלאה מפוצלת בעת הצורך)
• אימות סוג MIME לפי תוכן הקובץ, לא רק סיומת
• סריקת אנטי-וירוס באמצעות ClamAV או API של צד שלישי (אופציונלי)
• אחסון: מקומי, תואם S3 (MinIO, AWS S3, Cloudflare R2)
• שמות קבצים ייחודיים, בידוד משתמשים

מחסנית טכנית

דוגמה: העלאה בסיסית עם התקדמות

function uploadFile(file, onProgress) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('file', file); xhr.upload.addEventListener('progress', (e) => { if (e.lengthComputable) { onProgress(Math.round((e.loaded / e.total) * 100)); } }); xhr.addEventListener('load', () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error(`Upload failed: ${xhr.status}`)); } }); xhr.addEventListener('error', () => reject(new Error('Network error'))); xhr.open('POST', '/api/upload'); xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content); xhr.send(formData); }); } 

העלאה מפוצלת לקבצים גדולים

עבור קבצים מעל 100 MB, אנו מפצלים לחלקים. התקן דה-פקטו הוא פרוטוקול tus; עבור S3, ממשק ה-API של Multipart Upload. העלאה מפוצלת עולה על העלאה רגילה פי 3 בחיבורים לא יציבים, עם פחות שידורים חוזרים.

// tus-js-client import { Upload } from 'tus-js-client'; const upload = new Upload(file, { endpoint: '/api/upload/tus', chunkSize: 5 * 1024 * 1024, // 5 MB chunks retryDelays: [0, 1000, 3000, 5000], metadata: { filename: file.name, filetype: file.type }, onProgress(bytesUploaded, bytesTotal) { const pct = ((bytesUploaded / bytesTotal) * 100).toFixed(1); console.log(`${pct}%`); }, onSuccess() { console.log('Done:', upload.url); }, }); upload.start(); 

בשרת Laravel, אנו משתמשים בחבילת function uploadFile(file, onProgress) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('file', file); xhr.upload.addEventListener('progress', (e) => { if (e.lengthComputable) { onProgress(Math.round((e.loaded / e.total) * 100)); } }); xhr.addEventListener('load', () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.responseText)); } else { reject(new Error(`Upload failed: ${xhr.status}`)); } }); xhr.addEventListener('error', () => reject(new Error('Network error'))); xhr.open('POST', '/api/upload'); xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').content); xhr.send(formData); }); } או ביישום מותאם אישית עם // tus-js-client import { Upload } from 'tus-js-client'; const upload = new Upload(file, { endpoint: '/api/upload/tus', chunkSize: 5 * 1024 * 1024, // 5 MB chunks retryDelays: [0, 1000, 3000, 5000], metadata: { filename: file.name, filetype: file.type }, onProgress(bytesUploaded, bytesTotal) { const pct = ((bytesUploaded / bytesTotal) * 100).toFixed(1); console.log(`${pct}%`); }, onSuccess() { console.log('Done:', upload.url); }, }); upload.start(); .

אימות בצד השרת (Laravel)

$request->validate([ 'file' => [ 'required', 'file', 'max:102400', // 100 MB 'mimes:jpg,jpeg,png,pdf,docx', function ($attribute, $value, $fail) { $mime = mime_content_type($value->getRealPath()); $allowed = ['image/jpeg', 'image/png', 'application/pdf']; if (!in_array($mime, $allowed)) { $fail('Тип файла не разрешён.'); } }, ], ]); 

אבטחה

• לעולם אל תסמוך על ankurk91/laravel-tus-upload — רק על tus-php או $request->validate([ 'file' => [ 'required', 'file', 'max:102400', // 100 MB 'mimes:jpg,jpeg,png,pdf,docx', function ($attribute, $value, $fail) { $mime = mime_content_type($value->getRealPath()); $allowed = ['image/jpeg', 'image/png', 'application/pdf']; if (!in_array($mime, $allowed)) { $fail('Тип файла не разрешён.'); } }, ], ]);
• אחסן קבצים מחוץ ל-$_FILES['type'] או ב-bucket S3 נפרד ללא גישה ציבורית
• הגש קבצים באמצעות כתובות URL חתומות מראש (S3 Presigned URLs) עם TTL
• הגבל קצב (Rate-limit) את נקודת הקצה של ההעלאה
• סרוק ארכיונים (הגנה מפני zip bomb): בדוק יחס דחיסה

טעויות נפוצות בפיתוח טפסי העלאה

איך אנו בודקים טפסי העלאה?

אנו יוצרים בדיקות אוטומטיות לכל תרחיש: העלאה מוצלחת, חריגה ממגבלת גודל, סוג לא חוקי, ניתוק חיבור, העלאה בו-זמנית של 10 קבצים. לסימולציית שגיאות רשת, אנו משתמשים ב-mime_content_type() או finfo עם יירוט בקשות. יש לנו ניסיון של למעלה מ-5 שנים בבניית טפסים מורכבים ואנו מבטיחים יציבות.

תהליך העבודה שלנו

1. ניתוח — איסוף דרישות: סוגי קבצים, נפחים, צרכי אבטחה.
2. עיצוב — בחירת מחסנית טכנית, יצירת מוקאפים ל-UX/UI.
3. יישום — כתיבת קוד, הגדרת אחסון.
4. בדיקות — בדיקות עומס, מקרי קצה, רשתות סלולריות.
5. פריסה — הגדרת ניטור והתראות.

לוחות זמנים ותמחור

טופס בסיסי עם גרירה ושחרור, פס התקדמות ואחסון S3 לוקח 3–4 ימי עסקים. העלאה מפוצלת עם חידוש, סריקת אנטי-וירוס וממשק ניהול לוקחת 7–10 ימים. התמחור נקבע באופן אישי לאחר ניתוח הדרישות שלך. אנו יכולים להעריך את הפרויקט שלך תוך יום אחד. לייעוץ, צור קשר.

הזמן פיתוח טופס העלאת קבצים — אנו משתמשים בפתרונות מוכחים ומספקים אחריות על הקוד.