CODEWITHSUNDEEP
react-native
Mukundhan
Mukundhan

Reputation: 3457

How to upload image from react-native without using base64?

For a project we need to upload an image file which has memory above 2mb.\ which we are not able to upload through base64 conversion.

Any help could be usefull

Upvotes: 0

Views: 1893

Answers (3)

ABM
ABM

Reputation: 593

Below is what helped me.

  1. In android/app/src/main/java/com/{yourProject}/MainApplication.java comment the below line :

    initializeFlipper(this, getReactNativeHost().getReactInstanceManager())

  2. In android/app/src/debug/java/com/{yourProject}/ReactNativeFlipper.java comment in line 43 :

    builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));

  3. Code for image upload :

    var formData = new FormData();
   formData.append('UserId', '[email protected]');
   formData.append('VisitId', '28596');
   formData.append('EvidenceCapturedDate', '09/10/2019 13:28:20');
   formData.append('EvidenceCategory', 'Before');
   formData.append('EvidenceImage', {
     uri: Platform.OS === 'android' ? `file:///${path}` : path,
     type: 'image/jpeg',
     name: 'image.jpg',
   });
   axios({
     url: UrlString.BaseUrl + UrlString.imageUpload,
     method: 'POST',
     data: formData,
     headers: {
       Accept: 'application/json',
       'Content-Type': 'multipart/form-data'
     },
   })
     .then(function (response) {
       console.log('*****handle success******');
       console.log(response.data);

     })
     .catch(function (response) {
       console.log('*****handle failure******');
       console.log(response);
     });

Upvotes: 0

iuliu.net
iuliu.net

Reputation: 7145

Once you have your local image url using ImagePicker or some another solution, here's how you can send it to your server:

const formData = new FormData();
formData.append("image", { uri: imageUrl, name: 'image.jpg', type: 'multipart/form-data' })

fetch(yourUrl, {
    method: "POST", {
        'Content-Type': 'multipart/form-data',
    },
    body: formData
);

Upvotes: 2

Osman Goni Nahid
Osman Goni Nahid

Reputation: 1279

Use any request library e.g axios . Then try with form data. To pick the image from device/camera you can use react-native-image-picker. 

import ImagePicker from 'react-native-image-picker'

ImagePicker.showImagePicker(options, response => {
          console.log(response.data)

        });

Upvotes: 1

Related Questions