Do i have convert local phone image url into base64 before sending to server to upload to S3 using multer?

Question

Here is the url i am getting from the local phone storage

"file:///storage/emulated/0/Pictures/1548694153266.jpg"

Should i really have to convert this to base64 to upload to s3. If so is there any good library out there to convert the local url from react native to base64

why is it important to convert this to base64?

What is the best way to go about it.

I can easily send images from local computer through postman. from postman i can select the image directly from computer as an image object. but in this case the url is not an image object?

exports.uploadProduct = async (req, res) => {

      const uploads = await uploadMulti();

      uploads(req, res, function (err) {
            let imageFiles = req.files;
            const productImages = new Array();
            for (var i = 0; i < imageFiles.length; i++) {
                  fileLocation = imageFiles[i].location;
                  productImages.push(fileLocation)
            }
            console.log(productImages);
      })
};

check the answer below hope it helps. – Diksha235 Mar 26 '19 at 06:18 — Diksha235, Mar 26 '19 at 06:18

score 0 · Answer 1 · answered Mar 25 '19 at 08:40

I am using react-native-image-picker this library it gives you both base64 string and local URL it depends on you which approach best for you.

const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images'
  },
  mediaType: 'photo',
  quality: 0.01
}
const pickImage = onUri => {
  ImagePicker.showImagePicker(options, response => {


    let fileName = response.fileName
    if (
      Platform.OS === 'ios' &&
      (fileName.endsWith('.heic') || fileName.endsWith('.HEIC'))
    ) {
      fileName = `${fileName.split('.')[0]}.JPG`
    }
    let source = { uri: response.uri, fileName }

    const file = {
      uri: response.uri,
      name: response.fileName,
      type: 'image/jpeg'
    }

    console.log('File Object ', file)

    // var source = { uri: 'data:image/jpeg;base64,' + response.data, isStatic: true };
    onUri(response.data, response.uri, response.type, fileName, file)
  })

}

Diksha235 · Answer 2 · 2019-03-25T11:24:17.490

You can do this through these following steps :

Step 1: Install this package to convert it file url into base64. Here is the link for a good library to convert the local url from react native to base64

Step 2: Then in your code

import ImgToBase64 from 'react-native-image-base64';

Step 3: Make a function to convert your Image to base64

_convertImageToBaseSixFour() { 

    ImgToBase64.getBase64String('YOUR_IMAGE_PATH') // path to your image from local storage
  .then((base64String) => {
        // Do your stuff with base64String
        })
  .catch(err => Alert.alert('Error' + err));

}

Step 4 : Call this function on a button press . You can do this accordingly.

// *** BUTTON *** //

     <View style={styles.buttonContainer}>
           <Button onPress={this._convertImageToBaseSixFour} title="Change to Base" color="#FFFFFF" accessibilityLabel="Tap"/> //Call on press
     </View>

// *** STYLESHEET for Button *** //

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 10,
    shadowOpacity: 0.25
  }
})

Here you can find why is it important to convert this to base64

Sir, can i clear up one more question? I'm using a different image library which only gives me local url for the file: So what i want to do is to upload those image url to s3 via json. im trying to send those image url to s3 in the request body of the action. { "productImages": [ "images": "file:///storage/emulated/0/Pictures/1548694153266.jpg", "images": "file:///storage/emulated/0/Pictures/1548694153266.jpg" ] }. Using post man i can send those as "form-data". select local image and it works — bee321, Mar 26 '19 at 16:57
@bee321 This might be helpful checkout : https://stackoverflow.com/questions/30737226/react-native-upload-image-to-amazons-s3 — Diksha235, Mar 27 '19 at 04:56

Do i have convert local phone image url into base64 before sending to server to upload to S3 using multer?

2 Answers2