الصور والفيديو
{/* رفع الصورة */}
{
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
и React-dropzone . Я не знаю, в чем проблема, или как это исправить.>
{ 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 [/code] и React-dropzone . Я не знаю, в чем проблема, или как это исправить.>