Question 214836 in React native Question posted in
The official React Native documentation can be found here.

Send the image to the server (React Native)

I have my own server (https://myserverforimg/upload) where the photo is converted to url. For example, any photo is sent there and we get its address:

enter image description here

Response: https://myserverforimg/public/3d5d9d74-b539-4ef5-8948-9d2121532a25

This address can be used like:

<Image style={styles.logo}  source={{uri: ‘https://myserverforimg/public/3d5d9d74-b539-4ef5-8948-9d2121532a25‘, }} />

In my program, I am using the ImagePicker from expo-image-picker. And I’m trying to send a photo to the server, but it doesn’t work … Please help me solve the problem

This is how I’m trying to implement it:

const [image, setImage] = useState(null);

  const pickImageProfile = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [3, 4],
      quality: 1,
      base64: true,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
      fdata.client_image = result.assets[0].uri
      const file = result.assets[0].base64;

      const formData = new FormData();
    formData.append('file', file);

      axios.post("https://lis.4dev.kz/upload", formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
        .then((response) => {
          console.log('response created')
          console.log(response)
        }).catch((error) => {
          console.log(error);

        });

    }
  };
Tags:

2

Answers


  1. 0

    For mimeType of file, you need to install mime using npm i mime

    import mime from "mime";

const [image, setImage] = useState(null);

  const pickImageProfile = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [3, 4],
      quality: 1,
      base64: true,
    });

    if (!result.canceled) {
      setImage(result.assets[0].uri);
      fdata.client_image = result.assets[0].uri
      const file = result.assets[0].base64;

      const formData = new FormData();
      formData.append('file', {
            name: 'file-name-here',
            type: mime.getType(result.assets[0].uri),
            uri: result.assets[0].uri
        })

      axios({
        url:"https://lis.4dev.kz/upload",
        method:"post",
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
        .then((response) => {
          console.log('response created')
          console.log(response)
        }).catch((error) => {
          console.log(error);

        });

    }
  };
    Login or Signup to reply.
  2. 0

    A file object for FormData consists of three parts: uri, type and name. No need to use base64 in options as uri is used. Something like this should work:

    const result = await ImagePicker.launchImageLibraryAsync({
  allowsEditing: true,
  quality: 1,
});

if (!result.canceled) {
  const formData = new FormData();
  formData.append('file', {
    uri: result.assets[0].uri,
    type: 'image/jpeg',
    name: 'image.jpeg',
  });
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search