Replies: 9 comments 3 replies
-
|
React Native has its own limitations and differences compared to traditional web development. It uses native components instead of HTML and runs JavaScript in a separate context. To make
In summary, |
Beta Was this translation helpful? Give feedback.
-
|
@wb-ts thank you for this detailed explanation. I will choose between your suggested options |
Beta Was this translation helpful? Give feedback.
-
|
I faced some issue in react native. when we pressed upload image, the error message shows: import React, { useState } from 'react' const options ={ const Request = () => { return ( const styles = StyleSheet.create({ when we pressed upload button, the error message shows: Possible Unhandled Promise Rejection (id: 1): I create API: const file = req.files.image; |
Beta Was this translation helpful? Give feedback.
-
|
To call the API and store the uploaded image in MongoDB, you can make some changes to your React Native code and use a library like axios to send the image data to your backend. First, make sure you have axios installed in your project by running the following command: Then, update your React Native code as follows: import React, { useState } from 'react';
import { Alert, Button, View, StyleSheet } from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import axios from 'axios';
const options = {
title: 'Select Image',
type: 'library',
options: {
maxHeight: 200,
maxWidth: 200,
selectionLimit: 1,
mediaType: 'photo',
includeBase64: false,
},
};
const Request = () => {
const [imageData, setImageData] = useState(null);
const opengallery = async () => {
const image = await ImagePicker.launchImageLibrary(options);
console.log(image);
setImageData(image);
};
const uploadImage = () => {
if (imageData) {
const formData = new FormData();
formData.append('image', {
name: imageData.fileName,
type: imageData.type,
uri: imageData.uri,
});
axios
.post('http://your-api-endpoint/finerequest', formData)
.then((response) => {
console.log(response.data);
// Handle success response here
})
.catch((error) => {
console.error(error);
// Handle error response here
});
}
};
return (
<View style={styles.container}>
<Button title="Open Gallery" onPress={opengallery} />
<Button title="Upload Image" onPress={uploadImage} />
</View>
);
};
export default Request;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});In the above code:
On the backend side, you can use Multer middleware or any other library to handle file uploads and save the image to MongoDB. The example you provided seems to use Cloudinary for image uploading, so make sure you have the necessary setup for Cloudinary in your backend code. Make sure to adjust the implementation on the backend side based on your requirements and the specific libraries you are using. |
Beta Was this translation helpful? Give feedback.
-
|
when we use this code, it shows error message
Possible Unhandled Promise Rejection (id: 1):
TypeError: Cannot read property 'launchImageLibrary' of null
TypeError: Cannot read property 'launchImageLibrary' of null
…On Mon, Jul 17, 2023 at 12:12 AM The All-in-One Web Wizard < ***@***.***> wrote:
To call the API and store the uploaded image in MongoDB, you can make some
changes to your React Native code and use a library like axios to send the
image data to your backend.
First, make sure you have axios installed in your project by running the
following command:
npm install axios
Then, update your React Native code as follows:
import React, { useState } from 'react';import { Alert, Button, View, StyleSheet } from 'react-native';import * as ImagePicker from 'react-native-image-picker';import axios from 'axios';
const options = {
title: 'Select Image',
type: 'library',
options: {
maxHeight: 200,
maxWidth: 200,
selectionLimit: 1,
mediaType: 'photo',
includeBase64: false,
},};
const Request = () => {
const [imageData, setImageData] = useState(null);
const opengallery = async () => {
const image = await ImagePicker.launchImageLibrary(options);
console.log(image);
setImageData(image);
};
const uploadImage = () => {
if (imageData) {
const formData = new FormData();
formData.append('image', {
name: imageData.fileName,
type: imageData.type,
uri: imageData.uri,
});
axios
.post('http://your-api-endpoint/finerequest', formData)
.then((response) => {
console.log(response.data);
// Handle success response here
})
.catch((error) => {
console.error(error);
// Handle error response here
});
}
};
return (
<View style={styles.container}>
<Button title="Open Gallery" onPress={opengallery} />
<Button title="Upload Image" onPress={uploadImage} />
</View>
);};
export default Request;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},});
In the above code:
- We added a new state variable imageData using useState(null) to
store the selected image data.
- In the opengallery function, we updated setImageData(image) to set
the selected image data in the state.
- The uploadImage function is called when the "Upload Image" button is
pressed. It checks if imageData is not null, creates a FormData
object, and appends the image details to it. Then, an axios POST request is
sent to your API endpoint along with the form data containing the image.
- Replace 'http://your-api-endpoint/finerequest' with the actual URL
of your API endpoint.
On the backend side, you can use Multer middleware or any other library to
handle file uploads and save the image to MongoDB. The example you provided
seems to use Cloudinary for image uploading, so make sure you have the
necessary setup for Cloudinary in your backend code.
Make sure to adjust the implementation on the backend side based on your
requirements and the specific libraries you are using.
—
Reply to this email directly, view it on GitHub
<#206 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A6W6U3EXGA24VYGYAA2TS7LXQQ4JLANCNFSM6AAAAAA2IS7RTM>
.
You are receiving this because you commented.Message ID:
***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
|
Please make sure that you installed the |
Beta Was this translation helpful? Give feedback.
-
|
And, please confirm the availability of the
|
Beta Was this translation helpful? Give feedback.
-
|
I faced some issue in react native. when we pressed upload image, the error
message shows:
How to call this API, when we upload image in front end side, the image
will be stored in mongodb
I create API:
app.post('/finerequest', (req, res, next) => {
const file = req.files.image;
cloudinary.uploader.upload(file.tempFilePath, (err, result) => {
console.log(result)
const requestId = req.body.request_id
const fine = new Fine({
_id: new mongoose.Types.ObjectId,
request_id: requestId,
image: result.url
})
fine.save()
.then(result => {
res.status(200).json({
message: "Fine and Vehicle Repair Request added",
response: result
})
})
.catch(err => {
res.status(500).json({
message: "Fine and Vehicle request not added",
error: err
})
})
})
})
CODE:
import React, { useState } from 'react'
import { Alert, Button, View,StyleSheet } from 'react-native'
import * as ImagePicker from 'react-native-image-picker'
import {launchImageLibrary} from 'react-native-image-picker'
const options ={
title: 'Select Image',
type: 'library',
options: {
maxHeight:200,
maxWidth:200,
selectionLimit: 1,
mediaType: 'photo',
includeBase64: false,
}
}
const Request = () => {
const opengallery = async()=>{
const image = await ImagePicker.launchImageLibrary(options);
console.log(image)
}
return (
)
}
export default Request;
const styles = StyleSheet.create({
container:{
flex:1,
alignItems:'center',
justifyContent:'center'
}
})
when we pressed upload button, the error message shows:
Possible Unhandled Promise Rejection (id: 1):
TypeError: Cannot read property 'launchImageLibrary' of null
TypeError: Cannot read property 'launchImageLibrary' of null
Again and again same error show, we Image picker library, I think it has
been deprecated
…On Mon, Jul 17, 2023 at 12:22 AM The All-in-One Web Wizard < ***@***.***> wrote:
And, please confirm the availability of the launchImageLibrary function:
- Check the version of the react-native-image-picker package you have
installed. Starting from version 4.0.0, the launchImageLibrary
function is deprecated, so you should use launchImageLibrary instead.
- Make sure you are using the correct function name according to the
version of the library you have installed.
—
Reply to this email directly, view it on GitHub
<#206 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A6W6U3FYYLMKC6XJQOB25FDXQQ5ONANCNFSM6AAAAAA2IS7RTM>
.
You are receiving this because you commented.Message ID:
***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
import React from 'react';
import { Alert, Button, View, StyleSheet } from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
const options = {
title: 'Select Image',
mediaType: 'photo',
maxHeight: 200,
maxWidth: 200,
selectionLimit: 1,
includeBase64: false,
};
const Request = () => {
const openGallery = async () => {
ImagePicker.launchImageLibrary(options, (response) => {
console.log(response);
});
};
return (
<View style={styles.container}>
<Button onPress={openGallery} title="Upload Image" />
</View>
);
};
export default Request;
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
}); |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
In Package.json: we use "react-native-image-picker": "^5.6.0", |
Beta Was this translation helpful? Give feedback.
-
|
import { StatusBar } from 'expo-status-bar'; const CustomDrawer = props => { return ( ); function DrawerRoutes() { return ( ); export default function App() { </Stack.Navigator> ); }When we log in to the App, then navigate into the Home Screen. Then we have not visible Drawer navigation |
Beta Was this translation helpful? Give feedback.
-
Is this library supported in react native? If no, how can I make it compatible with react native?
Beta Was this translation helpful? Give feedback.
All reactions