image to base64 view and student, teacher, dairy

This commit is contained in:
vinoth 2024-12-19 10:54:37 +05:30
parent 7c8ca5a70d
commit e2cf625ae7
17 changed files with 118 additions and 61 deletions

View File

@ -168,7 +168,7 @@ class Sidebar extends React.Component<any, any> {
<View style={styles.container}> <View style={styles.container}>
{this.state.image && this.state.image !== '' ? {this.state.image && this.state.image !== '' ?
<View style={[styles.profileImgView]}> <View style={[styles.profileImgView]}>
<Image source={{ uri: `${this.imageBaseUrl + this.state.image}` }} style={[styles.profileImg]} /> <Image source={{ uri: `${this.state.image}` }} style={[styles.profileImg]} />
</View> : </View> :
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, BaseStyles.marRight10, styles.profileImgView]}> <View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, BaseStyles.marRight10, styles.profileImgView]}>
<Text style={{ fontSize: 32, color: BaseColors.white, textAlign: 'center' }}>{this.state.name && this.state.name.charAt(0)}</Text> <Text style={{ fontSize: 32, color: BaseColors.white, textAlign: 'center' }}>{this.state.name && this.state.name.charAt(0)}</Text>

View File

@ -155,3 +155,8 @@ export const MONTHLIST = [
address: /^\S+(?: \S+)*$/, //NOSONAR address: /^\S+(?: \S+)*$/, //NOSONAR
} }
export const imageFormat: any = {
MAX_FILE_SIZE: 6 * 1024 * 1024,
SUPPORTED_FORMATS: ['image/png', 'image/jpeg', 'image/jpg']
}

View File

@ -29,7 +29,7 @@ export const passwordStrengthValidator = (password:any) => {
return 'Password cannot be empty.' return 'Password cannot be empty.'
} }
if (!re.test(password)) { if (!re.test(password)) {
return 'Password atleast 8 character,one upper case, one lower case, one number and one special characters.' return 'Password should be 8 to 12 characters with at least one upper case, one lower case, one number and one special character.'
} }
return '' return ''

View File

@ -102,7 +102,7 @@ class AttendanceDetailView extends React.Component<any, any>{
onPress={this.onStudentProfileCheck.bind(this, studentItem)}> onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', justifyContent: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', justifyContent: 'center', marginTop: 4 }}>
{(studentItem.profile_picture !== '') ? {(studentItem.profile_picture !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} /> <Image source={{ uri: `${studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} />
: :
<View style={{ borderWidth: 1, borderColor: attendanceDetail?.present_details?.color_code, borderRadius: 40, padding: 20, margin: 6 }}> <View style={{ borderWidth: 1, borderColor: attendanceDetail?.present_details?.color_code, borderRadius: 40, padding: 20, margin: 6 }}>
<Text style={[{ color: attendanceDetail?.present_details?.color_code }, BaseStyles.font20]}>{studentItem?.card_id || '0'}</Text> <Text style={[{ color: attendanceDetail?.present_details?.color_code }, BaseStyles.font20]}>{studentItem?.card_id || '0'}</Text>
@ -134,7 +134,7 @@ class AttendanceDetailView extends React.Component<any, any>{
<TouchableOpacity key={studentIndex} style={[styles.studentCard, { width: 100 }]} activeOpacity={0.8} onPress={this.onStudentProfileCheck.bind(this, studentItem)}> <TouchableOpacity key={studentIndex} style={[styles.studentCard, { width: 100 }]} activeOpacity={0.8} onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', justifyContent: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', justifyContent: 'center', marginTop: 4 }}>
{(studentItem.profile_picture !== '') ? {(studentItem.profile_picture !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} /> <Image source={{ uri: `${studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} />
: :
<View style={{ borderWidth: 1, borderColor: BaseColors.green, borderRadius: 40, padding: 24 }}> <View style={{ borderWidth: 1, borderColor: BaseColors.green, borderRadius: 40, padding: 24 }}>
<Text style={[{ color: BaseColors.green }, BaseStyles.font24]}>{studentItem?.card_id || ''}</Text> <Text style={[{ color: BaseColors.green }, BaseStyles.font24]}>{studentItem?.card_id || ''}</Text>

View File

@ -5,7 +5,7 @@ import { Formik } from 'formik'
import * as yup from 'yup' import * as yup from 'yup'
import { Picker } from '@react-native-picker/picker' import { Picker } from '@react-native-picker/picker'
import AsyncStorage from "@react-native-async-storage/async-storage" import AsyncStorage from "@react-native-async-storage/async-storage"
import { currentYear, UserRoles, currentAcademicYear, fetchBaseUrl } from '@constants/Constants' //NOSONAR import { currentYear, UserRoles, currentAcademicYear, fetchBaseUrl, imageFormat } from '@constants/Constants' //NOSONAR
import { connect } from "react-redux" import { connect } from "react-redux"
import { ActionCreators } from "@actions" //NOSONAR import { ActionCreators } from "@actions" //NOSONAR
import PropTypes, { array } from 'prop-types' import PropTypes, { array } from 'prop-types'
@ -16,6 +16,7 @@ import BaseColors from "@theme/Colors" //NOSONAR
import * as ImagePicker from 'expo-image-picker' import * as ImagePicker from 'expo-image-picker'
import Constants from "expo-constants" import Constants from "expo-constants"
import RNPickerSelect from "react-native-picker-select" import RNPickerSelect from "react-native-picker-select"
import RNFS from 'react-native-fs';
const diaryValidationSchema = yup.object().shape({ const diaryValidationSchema = yup.object().shape({
diary_type: yup diary_type: yup
@ -261,19 +262,35 @@ class DiaryCreate extends React.Component<any, any>{
quality: 1, quality: 1,
}) })
} }
if (!result.cancelled) { // if (!result.cancelled) {
const fileNameURL = result.assets[0].uri // const fileNameURL = result.assets[0].uri
const index = fileNameURL.lastIndexOf('/') // const index = fileNameURL.lastIndexOf('/')
const fileName = fileNameURL.substring(index + 1) // const fileName = fileNameURL.substring(index + 1)
const fileExtensionType = fileName.split('.').pop() // const fileExtensionType = fileName.split('.').pop()
const formData: any = new FormData() // const formData: any = new FormData()
formData.append('file', { // formData.append('file', {
uri: result.assets[0].uri, // uri: result.assets[0].uri,
name: fileName, // name: fileName,
type: `image/${fileExtensionType}`, // type: `image/${fileExtensionType}`,
}) // })
this.setState({ isImageUploaded: false }) // this.setState({ isImageUploaded: false })
this.props.setDiaryImage({ data: formData, token: this.token }) // this.props.setDiaryImage({ data: formData, token: this.token })
// }
if (!result.canceled && result.assets && result.assets[0].uri) {
const fileUri = result.assets[0].uri;
const fileType = result.assets[0].mimeType; // MIME type
const fileStat = await RNFS.stat(fileUri);
const fileSize = fileStat.size; // File size in bytes
if (fileSize > imageFormat.MAX_FILE_SIZE) {
Alert.alert('Error', 'File size exceeds 6 MB.');
return;
}
if (!imageFormat.SUPPORTED_FORMATS.includes(fileType)) {
Alert.alert('Error', 'Only PNG, JPEG, and JPG formats are allowed.');
return;
}
const base64 = await RNFS.readFile(fileUri, 'base64');
this.setState({ isImageUploaded: true, image: `data:image/jpeg;base64,${base64}`, imagePreviewURL: `data:image/jpeg;base64,${base64}` })
} }
} }

View File

@ -134,7 +134,7 @@ class DiaryView extends React.PureComponent<any, any> {
const images = [] const images = []
if (data) { if (data) {
images.push({ uri: `${this.imageBaseUrl + data}` }) images.push({ uri: `${data}` })
this.setState({ isVisible: true, images: images }) this.setState({ isVisible: true, images: images })
} }
} }
@ -284,7 +284,7 @@ class DiaryView extends React.PureComponent<any, any> {
<View style={[BaseStyles.marBottom5, BaseStyles.padHorizontal10]}> <View style={[BaseStyles.marBottom5, BaseStyles.padHorizontal10]}>
{item?.images !== '' && this.imageBaseUrl !== '' && <TouchableOpacity style={{ width: 160, height: 120, borderWidth: 1, borderColor: BaseColors.grey, borderRadius: 10 }} {item?.images !== '' && this.imageBaseUrl !== '' && <TouchableOpacity style={{ width: 160, height: 120, borderWidth: 1, borderColor: BaseColors.grey, borderRadius: 10 }}
onPress={this.onImagePreview.bind(this, item?.images)}> onPress={this.onImagePreview.bind(this, item?.images)}>
<Image source={{ uri: `${this.imageBaseUrl + item?.images}` }} style={[AppStyles.diaryViewImage]} /> <Image source={{ uri: `${item?.images}` }} style={[AppStyles.diaryViewImage]} />
</TouchableOpacity>} </TouchableOpacity>}
</View> </View>
<Sepator /> <Sepator />

View File

@ -262,7 +262,7 @@ class Home extends React.Component<any, any> {
{ {
item?.profile_picture ? item?.profile_picture ?
<View style={[BaseStyles.alignSelfCenter, BaseStyles.justifyCenter]}> <View style={[BaseStyles.alignSelfCenter, BaseStyles.justifyCenter]}>
<Image source={{ uri: `${this.imageBaseUrl + item?.profile_picture}` }} style={[AppStyles.listViewImage, BaseStyles.marLeft10]} /> <Image source={{ uri: `${item?.profile_picture}` }} style={[AppStyles.listViewImage, BaseStyles.marLeft10]} />
</View> </View>
: :
<View style={[{}, BaseStyles.alignSelfCenter, BaseStyles.justifyCenter, BaseStyles.buttonBgColor, AppStyles.listViewImage, BaseStyles.marLeft10]}> <View style={[{}, BaseStyles.alignSelfCenter, BaseStyles.justifyCenter, BaseStyles.buttonBgColor, AppStyles.listViewImage, BaseStyles.marLeft10]}>

View File

@ -87,7 +87,7 @@ class InstantFeedbackDetail extends React.Component<any, any>{
<TouchableOpacity key={studentIndex} style={[styles.studentCard, { width: 100 }]} activeOpacity={0.8} onPress={this.onStudentProfileCheck.bind(this, studentItem)}> <TouchableOpacity key={studentIndex} style={[styles.studentCard, { width: 100 }]} activeOpacity={0.8} onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', marginTop: 4 }}>
{(studentItem.profile_picture !== '') ? {(studentItem.profile_picture !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} /> <Image source={{ uri: `${studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} />
: :
<View style={{ borderWidth: 1, borderColor: item?.color_code, borderRadius: 40, padding: 24 }}> <View style={{ borderWidth: 1, borderColor: item?.color_code, borderRadius: 40, padding: 24 }}>
<Text style={[{ color: item?.color_code }, BaseStyles.font24]}>{studentItem?.card_id || '0'}</Text> <Text style={[{ color: item?.color_code }, BaseStyles.font24]}>{studentItem?.card_id || '0'}</Text>

View File

@ -88,7 +88,7 @@ class InstantFeedbackDetailView extends React.Component<any, any>{
<TouchableOpacity key={studentIndex} style={[styles.studentCard, { width: 100 }]} activeOpacity={0.8} onPress={this.onStudentProfileCheck.bind(this, studentItem)}> <TouchableOpacity key={studentIndex} style={[styles.studentCard, { width: 100 }]} activeOpacity={0.8} onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', marginTop: 4 }}>
{(studentItem.profile_picture !== '') ? {(studentItem.profile_picture !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} /> <Image source={{ uri: `${studentItem?.profile_picture}` }} style={[AppStyles.detailViewImage, { borderRadius: 16 }]} />
: :
<View style={{ borderWidth: 1, borderColor: item?.color_code, borderRadius: 40, padding: 24 }}> <View style={{ borderWidth: 1, borderColor: item?.color_code, borderRadius: 40, padding: 24 }}>
<Text style={[{ color: item?.color_code }, BaseStyles.font24]}>{studentItem?.card_id || '0'}</Text> <Text style={[{ color: item?.color_code }, BaseStyles.font24]}>{studentItem?.card_id || '0'}</Text>

View File

@ -108,7 +108,7 @@ class NoticeBoardView extends React.Component<any, any>{
onImagePreview = (data: any) => { onImagePreview = (data: any) => {
const images = [] const images = []
if (data.url) { if (data.url) {
images.push({ uri: `${this.imageBaseUrl + data.url}` }) images.push({ uri: `${data.url}` })
this.setState({ isVisible: true, images: images }) this.setState({ isVisible: true, images: images })
} }
} }
@ -217,7 +217,7 @@ class NoticeBoardView extends React.Component<any, any>{
{item?.image && this.imageBaseUrl && item?.image.map((imageInfo: any, index: any) => ( {item?.image && this.imageBaseUrl && item?.image.map((imageInfo: any, index: any) => (
<TouchableOpacity key={index} style={{ width: 160, height: 120, borderWidth: 1, borderColor: BaseColors.grey, borderRadius: 10, margin: 5 }} <TouchableOpacity key={index} style={{ width: 160, height: 120, borderWidth: 1, borderColor: BaseColors.grey, borderRadius: 10, margin: 5 }}
onPress={this.onImagePreview.bind(this, imageInfo)}> onPress={this.onImagePreview.bind(this, imageInfo)}>
<Image source={{ uri: `${this.imageBaseUrl + imageInfo?.url}` }} style={[AppStyles.diaryViewImage]} /> <Image source={{ uri: `${imageInfo?.url}` }} style={[AppStyles.diaryViewImage]} />
</TouchableOpacity> </TouchableOpacity>
))} ))}
</View> </View>

View File

@ -326,7 +326,7 @@ class QuizSummaryDetails extends React.Component<any, any>{
onPress={this.onStudentProfileCheck.bind(this, studentItem)}> onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', marginTop: 4 }}>
{(studentItem.profile !== '') ? {(studentItem.profile !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile}` }} style={[AppStyles.detailViewImage, { <Image source={{ uri: `${studentItem?.profile}` }} style={[AppStyles.detailViewImage, {
width: 50, width: 50,
height: 50, borderRadius: 16 height: 50, borderRadius: 16
}]} /> }]} />
@ -374,7 +374,7 @@ class QuizSummaryDetails extends React.Component<any, any>{
onPress={this.onStudentProfileCheck.bind(this, studentItem)}> onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', marginTop: 4 }}>
{(studentItem.profile !== '') ? {(studentItem.profile !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile}` }} style={[AppStyles.detailViewImage, { <Image source={{ uri: `${studentItem?.profile}` }} style={[AppStyles.detailViewImage, {
width: 50, width: 50,
height: 50, borderRadius: 16 height: 50, borderRadius: 16
}]} /> }]} />
@ -422,7 +422,7 @@ class QuizSummaryDetails extends React.Component<any, any>{
onPress={this.onStudentProfileCheck.bind(this, studentItem)}> onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}> <View style={{ alignSelf: 'center', marginTop: 4 }}>
{(studentItem.profile !== '') ? {(studentItem.profile !== '') ?
<Image source={{ uri: `${this.imageBaseUrl + studentItem?.profile}` }} style={[AppStyles.detailViewImage, { <Image source={{ uri: `${studentItem?.profile}` }} style={[AppStyles.detailViewImage, {
width: 50, width: 50,
height: 50, borderRadius: 16 height: 50, borderRadius: 16
}]} /> }]} />

View File

@ -3,7 +3,7 @@ import { StyleSheet, Text, View, TouchableOpacity, TextInput, ScrollView, Activi
import { AppStyles, BaseStyles } from "@theme/BaseStyles" //NOSONAR import { AppStyles, BaseStyles } from "@theme/BaseStyles" //NOSONAR
import { Formik } from 'formik' import { Formik } from 'formik'
import * as yup from 'yup' import * as yup from 'yup'
import { formValidationPatten, currentYear, UserRoles, currentAcademicYear, fetchBaseUrl } from '@constants/Constants' //NOSONAR import { formValidationPatten, currentYear, UserRoles, currentAcademicYear, fetchBaseUrl, imageFormat } from '@constants/Constants' //NOSONAR
import { connect } from "react-redux" import { connect } from "react-redux"
import { ActionCreators } from "@actions" //NOSONAR import { ActionCreators } from "@actions" //NOSONAR
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
@ -15,6 +15,7 @@ import * as ImagePicker from 'expo-image-picker'
import Constants from "expo-constants" import Constants from "expo-constants"
import { RadioButton } from 'react-native-paper' import { RadioButton } from 'react-native-paper'
import DateTimePickerModal from 'react-native-modal-datetime-picker'; import DateTimePickerModal from 'react-native-modal-datetime-picker';
import RNFS from 'react-native-fs';
const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} /> const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} />
@ -193,19 +194,35 @@ class StudentCreate extends React.Component<any, any>{
quality: 1, quality: 1,
}) })
} }
if (!result.cancelled) { // if (!result.cancelled) {
const fileNameURL = result.assets[0].uri // const fileNameURL = result.assets[0].uri
const index = fileNameURL.lastIndexOf('/') // const index = fileNameURL.lastIndexOf('/')
const fileName = fileNameURL.substring(index + 1) // const fileName = fileNameURL.substring(index + 1)
const fileExtensionType = fileName.split('.').pop() // const fileExtensionType = fileName.split('.').pop()
const formData: any = new FormData() // const formData: any = new FormData()
formData.append('file', { // formData.append('file', {
uri: result.assets[0].uri, // uri: result.assets[0].uri,
name: fileName, // name: fileName,
type: `image/${fileExtensionType}`, // type: `image/${fileExtensionType}`,
}) // })
this.setState({ isImageUploaded: false }) // this.setState({ isImageUploaded: false })
this.props.setStudentImage({ data: formData, token: this.token }) // this.props.setStudentImage({ data: formData, token: this.token })
// }
if (!result.canceled && result.assets && result.assets[0].uri) {
const fileUri = result.assets[0].uri;
const fileType = result.assets[0].mimeType; // MIME type
const fileStat = await RNFS.stat(fileUri);
const fileSize = fileStat.size; // File size in bytes
if (fileSize > imageFormat.MAX_FILE_SIZE) {
Alert.alert('Error', 'File size exceeds 6 MB.');
return;
}
if (!imageFormat.SUPPORTED_FORMATS.includes(fileType)) {
Alert.alert('Error', 'Only PNG, JPEG, and JPG formats are allowed.');
return;
}
const base64 = await RNFS.readFile(fileUri, 'base64');
this.setState({ isImageUploaded: true, image: `data:image/jpeg;base64,${base64}`, imagePreviewURL: `data:image/jpeg;base64,${base64}` })
} }
} }

View File

@ -208,7 +208,7 @@ class StudentProfile extends React.Component<any, any>{
<ScrollView style={{ marginVertical: 12, marginHorizontal: 15 }}> <ScrollView style={{ marginVertical: 12, marginHorizontal: 15 }}>
<View style={[BaseStyles.padHorizontal10, AppStyles.CardView, AppStyles.studentCard]}> <View style={[BaseStyles.padHorizontal10, AppStyles.CardView, AppStyles.studentCard]}>
{(studentProfile?.profile_picture !== '') ? {(studentProfile?.profile_picture !== '') ?
<Image defaultSource={Images.avatar} source={{ uri: `${this.imageBaseUrl + studentProfile?.profile_picture}` }} style={[AppStyles.studentImage, BaseStyles.marRight20]} /> <Image defaultSource={Images.avatar} source={{ uri: `${studentProfile?.profile_picture}` }} style={[AppStyles.studentImage, BaseStyles.marRight20]} />
: :
<View style={{ borderWidth: 1, borderColor: BaseColors.lightGreen, borderRadius: 40, padding: 20, margin: 6 }}> <View style={{ borderWidth: 1, borderColor: BaseColors.lightGreen, borderRadius: 40, padding: 20, margin: 6 }}>
<Text style={[{ color: BaseColors.lightGreen }, BaseStyles.font20]}>{studentProfile?.card_id || '0'}</Text> <Text style={[{ color: BaseColors.lightGreen }, BaseStyles.font20]}>{studentProfile?.card_id || '0'}</Text>

View File

@ -3,7 +3,7 @@ import { StyleSheet, Text, View, TouchableOpacity, TextInput, ScrollView, Activi
import { AppStyles, BaseStyles } from "@theme/BaseStyles" //NOSONAR import { AppStyles, BaseStyles } from "@theme/BaseStyles" //NOSONAR
import { Formik } from 'formik' import { Formik } from 'formik'
import * as yup from 'yup' import * as yup from 'yup'
import { formValidationPatten, currentYear, currentAcademicYear, fetchBaseUrl } from '@constants/Constants' //NOSONAR import { formValidationPatten, currentYear, currentAcademicYear, fetchBaseUrl, imageFormat } from '@constants/Constants' //NOSONAR
import { connect } from "react-redux" import { connect } from "react-redux"
import { ActionCreators } from "@actions" //NOSONAR import { ActionCreators } from "@actions" //NOSONAR
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
@ -15,6 +15,7 @@ import * as ImagePicker from 'expo-image-picker'
import Constants from "expo-constants" import Constants from "expo-constants"
import { RadioButton } from 'react-native-paper' import { RadioButton } from 'react-native-paper'
import DateTimePickerModal from 'react-native-modal-datetime-picker'; import DateTimePickerModal from 'react-native-modal-datetime-picker';
import RNFS from 'react-native-fs';
const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} /> const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} />
@ -183,19 +184,36 @@ class StudentUpdate extends React.Component<any, any>{
quality: 1, quality: 1,
}) })
} }
if (!result.cancelled) { // if (!result.cancelled) {
const fileNameURL = result.assets[0].uri // const fileNameURL = result.assets[0].uri
const index = fileNameURL.lastIndexOf('/') // const index = fileNameURL.lastIndexOf('/')
const fileName = fileNameURL.substring(index + 1) // const fileName = fileNameURL.substring(index + 1)
const fileExtensionType = fileName.split('.').pop() // const fileExtensionType = fileName.split('.').pop()
const formData: any = new FormData() // const formData: any = new FormData()
formData.append('file', { // formData.append('file', {
uri: result.assets[0].uri, // uri: result.assets[0].uri,
name: fileName, // name: fileName,
type: `image/${fileExtensionType}`, // type: `image/${fileExtensionType}`,
}) // })
this.setState({ isImageUploaded: false }) // this.setState({ isImageUploaded: false })
this.props.setStudentImage({ data: formData, token: this.token }) // this.props.setStudentImage({ data: formData, token: this.token })
// }
if (!result.canceled && result.assets && result.assets[0].uri) {
const fileUri = result.assets[0].uri;
const fileType = result.assets[0].mimeType; // MIME type
const fileStat = await RNFS.stat(fileUri);
const fileSize = fileStat.size; // File size in bytes
if (fileSize > imageFormat.MAX_FILE_SIZE) {
Alert.alert('Error', 'File size exceeds 6 MB.');
return;
}
if (!imageFormat.SUPPORTED_FORMATS.includes(fileType)) {
Alert.alert('Error', 'Only PNG, JPEG, and JPG formats are allowed.');
return;
}
const base64 = await RNFS.readFile(fileUri, 'base64');
this.setState({ isImageUploaded: true, image: `data:image/jpeg;base64,${base64}`, imagePreviewURL: `data:image/jpeg;base64,${base64}` })
} }
} }
@ -251,7 +269,7 @@ class StudentUpdate extends React.Component<any, any>{
{this.state.isImageUploaded ? {this.state.isImageUploaded ?
<Image source={{ uri: this.state.imagePreviewURL }} style={[AppStyles.studentImage]} /> <Image source={{ uri: this.state.imagePreviewURL }} style={[AppStyles.studentImage]} />
: :
studentProfileInfo && <Image source={{ uri: `${this.imageBaseUrl + studentInfo?.studentclass_details?.profile_picture}` }} studentProfileInfo && <Image source={{ uri: `${studentInfo?.studentclass_details?.profile_picture}` }}
style={[AppStyles.studentImage]} /> style={[AppStyles.studentImage]} />
} }
{(!studentProfileInfo && !this.state.isImageUploaded) && <Image source={Images.avatar} style={[AppStyles.studentImage]} />} {(!studentProfileInfo && !this.state.isImageUploaded) && <Image source={Images.avatar} style={[AppStyles.studentImage]} />}

View File

@ -185,7 +185,7 @@ class StudentView extends React.Component<any, any>{
{ {
(this.imageBaseUrl && item?.studentclass_details?.profile_picture) ? (this.imageBaseUrl && item?.studentclass_details?.profile_picture) ?
<View style={[{ alignSelf: 'center', justifyContent: 'center' }]}> <View style={[{ alignSelf: 'center', justifyContent: 'center' }]}>
<Image defaultSource={Images.avatar} source={{ uri: `${this.imageBaseUrl + item?.studentclass_details?.profile_picture}` }} <Image defaultSource={Images.avatar} source={{ uri: `${item?.studentclass_details?.profile_picture}` }}
style={[AppStyles.listViewImage, BaseStyles.marRight10]} /> style={[AppStyles.listViewImage, BaseStyles.marRight10]} />
</View> </View>
: :

View File

@ -192,7 +192,7 @@ class TeacherProfile extends React.Component<any, any>{
this.state.teacherInfo?.image ? this.state.teacherInfo?.image ?
<View style={[{ alignSelf: 'center', justifyContent: 'center' }]}> <View style={[{ alignSelf: 'center', justifyContent: 'center' }]}>
<Image source={{ uri: `${this.imageBaseUrl + this.state.teacherInfo?.image}` }} style={[AppStyles.listViewImage]} /> <Image source={{ uri: `${this.state.teacherInfo?.image}` }} style={[AppStyles.listViewImage]} />
</View> </View>
: :
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, <View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' },

View File

@ -135,7 +135,7 @@ class TeacherView extends React.Component<any, any>{
{ {
item?.image ? item?.image ?
<View style={[{ alignSelf: 'center', justifyContent: 'center' }]}> <View style={[{ alignSelf: 'center', justifyContent: 'center' }]}>
<Image defaultSource={Images.avatar} source={{ uri: `${this.imageBaseUrl + item?.image}` }} style={[AppStyles.listViewImage, BaseStyles.marRight10]} /> <Image defaultSource={Images.avatar} source={{ uri: `${item?.image}` }} style={[AppStyles.listViewImage, BaseStyles.marRight10]} />
</View> </View>
: :
<View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, AppStyles.listViewImage, BaseStyles.marRight10]}> <View style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, AppStyles.listViewImage, BaseStyles.marRight10]}>