vinoth
/
mobile_local_restore
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Sidebar.tsx
View File

@ -168,7 +168,7 @@ class Sidebar extends React.Component<any, any> {
<View style={styles.container}>
{this.state.image && this.state.image !== '' ?
<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 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>

5
src/constants/Constants.tsx
View File

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

2
src/core/utils.tsx
View File

@ -29,7 +29,7 @@ export const passwordStrengthValidator = (password:any) => {
return 'Password cannot be empty.'
}
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 ''

4
src/screens/Attendance/AttendanceDetailView.tsx
View File

@ -102,7 +102,7 @@ class AttendanceDetailView extends React.Component<any, any>{
onPress={this.onStudentProfileCheck.bind(this, studentItem)}>
<View style={{ alignSelf: 'center', justifyContent: 'center', marginTop: 4 }}>
{(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 }}>
<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)}>
<View style={{ alignSelf: 'center', justifyContent: 'center', marginTop: 4 }}>
{(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 }}>
<Text style={[{ color: BaseColors.green }, BaseStyles.font24]}>{studentItem?.card_id || ''}</Text>

45
src/screens/Diary/DiaryCreate.tsx
View File

@ -5,7 +5,7 @@ import { Formik } from 'formik'
import * as yup from 'yup'
import { Picker } from '@react-native-picker/picker'
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 { ActionCreators } from "@actions" //NOSONAR
import PropTypes, { array } from 'prop-types'
@ -16,6 +16,7 @@ import BaseColors from "@theme/Colors" //NOSONAR
import * as ImagePicker from 'expo-image-picker'
import Constants from "expo-constants"
import RNPickerSelect from "react-native-picker-select"
import RNFS from 'react-native-fs';
const diaryValidationSchema = yup.object().shape({
diary_type: yup
@ -261,19 +262,35 @@ class DiaryCreate extends React.Component<any, any>{
quality: 1,
})
}
if (!result.cancelled) {
const fileNameURL = result.assets[0].uri
const index = fileNameURL.lastIndexOf('/')
const fileName = fileNameURL.substring(index + 1)
const fileExtensionType = fileName.split('.').pop()
const formData: any = new FormData()
formData.append('file', {
uri: result.assets[0].uri,
name: fileName,
type: `image/${fileExtensionType}`,
})
this.setState({ isImageUploaded: false })
this.props.setDiaryImage({ data: formData, token: this.token })
// if (!result.cancelled) {
// const fileNameURL = result.assets[0].uri
// const index = fileNameURL.lastIndexOf('/')
// const fileName = fileNameURL.substring(index + 1)
// const fileExtensionType = fileName.split('.').pop()
// const formData: any = new FormData()
// formData.append('file', {
// uri: result.assets[0].uri,
// name: fileName,
// type: `image/${fileExtensionType}`,
// })
// this.setState({ isImageUploaded: false })
// 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}` })
}
}

4
src/screens/Diary/DiaryView.tsx
View File

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

2
src/screens/Home.tsx
View File

@ -262,7 +262,7 @@ class Home extends React.Component<any, any> {
{
item?.profile_picture ?
<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 style={[{}, BaseStyles.alignSelfCenter, BaseStyles.justifyCenter, BaseStyles.buttonBgColor, AppStyles.listViewImage, BaseStyles.marLeft10]}>

2
src/screens/InstantFeedback/InstantFeedbackDetail.tsx
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)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}>
{(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 }}>
<Text style={[{ color: item?.color_code }, BaseStyles.font24]}>{studentItem?.card_id || '0'}</Text>

2
src/screens/InstantFeedback/InstantFeedbackDetailView.tsx
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)}>
<View style={{ alignSelf: 'center', marginTop: 4 }}>
{(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 }}>
<Text style={[{ color: item?.color_code }, BaseStyles.font24]}>{studentItem?.card_id || '0'}</Text>

4
src/screens/NoticeBoard/NoticeBoardView.tsx
View File

@ -108,7 +108,7 @@ class NoticeBoardView extends React.Component<any, any>{
onImagePreview = (data: any) => {
const images = []
if (data.url) {
images.push({ uri: `${this.imageBaseUrl + data.url}` })
images.push({ uri: `${data.url}` })
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) => (
<TouchableOpacity key={index} style={{ width: 160, height: 120, borderWidth: 1, borderColor: BaseColors.grey, borderRadius: 10, margin: 5 }}
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>
))}
</View>

6
src/screens/Quizzes/QuizSummaryDetails.tsx
View File

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

45
src/screens/Student/StudentCreate.tsx
View File

@ -3,7 +3,7 @@ import { StyleSheet, Text, View, TouchableOpacity, TextInput, ScrollView, Activi
import { AppStyles, BaseStyles } from "@theme/BaseStyles" //NOSONAR
import { Formik } from 'formik'
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 { ActionCreators } from "@actions" //NOSONAR
import PropTypes from 'prop-types'
@ -15,6 +15,7 @@ import * as ImagePicker from 'expo-image-picker'
import Constants from "expo-constants"
import { RadioButton } from 'react-native-paper'
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import RNFS from 'react-native-fs';
const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} />
@ -193,19 +194,35 @@ class StudentCreate extends React.Component<any, any>{
quality: 1,
})
}
if (!result.cancelled) {
const fileNameURL = result.assets[0].uri
const index = fileNameURL.lastIndexOf('/')
const fileName = fileNameURL.substring(index + 1)
const fileExtensionType = fileName.split('.').pop()
const formData: any = new FormData()
formData.append('file', {
uri: result.assets[0].uri,
name: fileName,
type: `image/${fileExtensionType}`,
})
this.setState({ isImageUploaded: false })
this.props.setStudentImage({ data: formData, token: this.token })
// if (!result.cancelled) {
// const fileNameURL = result.assets[0].uri
// const index = fileNameURL.lastIndexOf('/')
// const fileName = fileNameURL.substring(index + 1)
// const fileExtensionType = fileName.split('.').pop()
// const formData: any = new FormData()
// formData.append('file', {
// uri: result.assets[0].uri,
// name: fileName,
// type: `image/${fileExtensionType}`,
// })
// this.setState({ isImageUploaded: false })
// 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}` })
}
}

2
src/screens/Student/StudentProfile.tsx
View File

@ -208,7 +208,7 @@ class StudentProfile extends React.Component<any, any>{
<ScrollView style={{ marginVertical: 12, marginHorizontal: 15 }}>
<View style={[BaseStyles.padHorizontal10, AppStyles.CardView, AppStyles.studentCard]}>
{(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 }}>
<Text style={[{ color: BaseColors.lightGreen }, BaseStyles.font20]}>{studentProfile?.card_id || '0'}</Text>

48
src/screens/Student/StudentUpdate.tsx
View File

@ -3,7 +3,7 @@ import { StyleSheet, Text, View, TouchableOpacity, TextInput, ScrollView, Activi
import { AppStyles, BaseStyles } from "@theme/BaseStyles" //NOSONAR
import { Formik } from 'formik'
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 { ActionCreators } from "@actions" //NOSONAR
import PropTypes from 'prop-types'
@ -15,6 +15,7 @@ import * as ImagePicker from 'expo-image-picker'
import Constants from "expo-constants"
import { RadioButton } from 'react-native-paper'
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import RNFS from 'react-native-fs';
const Sepator = ({ style }: any) => <View style={[BaseStyles.separator, style]} />
@ -183,19 +184,36 @@ class StudentUpdate extends React.Component<any, any>{
quality: 1,
})
}
if (!result.cancelled) {
const fileNameURL = result.assets[0].uri
const index = fileNameURL.lastIndexOf('/')
const fileName = fileNameURL.substring(index + 1)
const fileExtensionType = fileName.split('.').pop()
const formData: any = new FormData()
formData.append('file', {
uri: result.assets[0].uri,
name: fileName,
type: `image/${fileExtensionType}`,
})
this.setState({ isImageUploaded: false })
this.props.setStudentImage({ data: formData, token: this.token })
// if (!result.cancelled) {
// const fileNameURL = result.assets[0].uri
// const index = fileNameURL.lastIndexOf('/')
// const fileName = fileNameURL.substring(index + 1)
// const fileExtensionType = fileName.split('.').pop()
// const formData: any = new FormData()
// formData.append('file', {
// uri: result.assets[0].uri,
// name: fileName,
// type: `image/${fileExtensionType}`,
// })
// this.setState({ isImageUploaded: false })
// 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 ?
<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]} />
}
{(!studentProfileInfo && !this.state.isImageUploaded) && <Image source={Images.avatar} style={[AppStyles.studentImage]} />}

2
src/screens/Student/StudentView.tsx
View File

@ -185,7 +185,7 @@ class StudentView extends React.Component<any, any>{
{
(this.imageBaseUrl && item?.studentclass_details?.profile_picture) ?
<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]} />
</View>
:

2
src/screens/Teacher/TeacherProfile.tsx
View File

@ -192,7 +192,7 @@ class TeacherProfile extends React.Component<any, any>{
this.state.teacherInfo?.image ?
<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 style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' },

2
src/screens/Teacher/TeacherView.tsx
View File

@ -135,7 +135,7 @@ class TeacherView extends React.Component<any, any>{
{
item?.image ?
<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 style={[{ backgroundColor: BaseColors.headerStyleBackgroundColor, alignSelf: 'center', justifyContent: 'center' }, AppStyles.listViewImage, BaseStyles.marRight10]}>