Код: Выделить всё
الصور والفيديو
{/* رفع الصورة */}
{
setSelectedImage(file);
// Update react-hook-form
const fileList = new DataTransfer();
fileList.items.add(file);
const fileListObj = fileList.files;
register('imageFile').onChange({ target: { files: fileListObj } });
toast.success('تم اختيار الصورة بنجاح');
}}
selectedFile={selectedImage}
onFileRemove={() => {
setSelectedImage(null);
register('imageFile').onChange({ target: { files: null } });
}}
accept="image/*"
maxSize={5 * 1024 * 1024} // 5MB
fileType="image"
label="الصورة الرئيسية"
required={true}
error={errors.imageFile?.message}
/>
{/* Hidden input for react-hook-form compatibility */}
{
if (!selectedImage) {
return 'الصورة مطلوبة';
}
return true;
},
fileSize: () => {
if (selectedImage && selectedImage.size > 5 * 1024 * 1024) {
return 'حجم الصورة يجب أن يكون أقل من 5 ميجابايت';
}
return true;
},
fileType: () => {
if (selectedImage) {
const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'];
if (!validTypes.includes(selectedImage.type.toLowerCase())) {
return 'نوع الملف غير مدعوم. يرجى اختيار صورة (JPG, PNG, GIF, WebP)';
}
}
return true;
}
}
})}
/>
{/* رفع الفيديو */}
{
setSelectedVideo(file);
// Update react-hook-form
const fileList = new DataTransfer();
fileList.items.add(file);
const fileListObj = fileList.files;
register('videoFile').onChange({ target: { files: fileListObj } });
toast.success('تم اختيار الفيديو بنجاح');
}}
selectedFile={selectedVideo}
onFileRemove={() => {
setSelectedVideo(null);
register('videoFile').onChange({ target: { files: null } });
}}
accept="video/*"
maxSize={50 * 1024 * 1024} // 50MB
fileType="video"
label="فيديو الشقة (اختياري)"
required={false}
error={errors.videoFile?.message}
/>
{/* Hidden input for react-hook-form compatibility */}
{
if (selectedVideo && selectedVideo.size > 50 * 1024 * 1024) {
return 'حجم الفيديو يجب أن يكون أقل من 50 ميجابايت';
}
return true;
},
fileType: () => {
if (selectedVideo) {
const validTypes = ['video/mp4', 'video/avi', 'video/mov', 'video/wmv', 'video/flv', 'video/webm'];
if (!validTypes.includes(selectedVideo.type.toLowerCase())) {
return 'نوع الملف غير مدعوم. يرجى اختيار فيديو (MP4, AVI, MOV, WMV, FLV, WebM)';
}
}
return true;
}
}
})}
/>
< /code>
Я сделал веб -сайт с использованием React и загрузил веб -сайт на Vercel, но у меня есть проблема. На веб -сайте у меня есть ввод файла, который принимает изображения и видеофайлы. Он работал и загружал файлы легко на компьютере, но на мобильном телефоне (у меня Android) изображение и видео, которые я выбрал из галереи, не загружали. Я использую React-hook-form Подробнее здесь: https://stackoverflow.com/questions/797 ... -hook-form