React-native-image-crop-picker: How to get original file name?

[Arunkumar-Precise]

How to get original file name? I want to show preview in my application. and also save same file name.

[ivpusic]

currently this is not possible.

[alainib]

i hope this will be available, i need to keep exif data of image avec crop :(

[ivpusic]

check latest release and response object.

[alainib]

i'm using the 0.14.2 version ( checked in node_modules/react-native-image-crop-picker/package.json )

my code :

pickAndCrop(cropit, circular = false) {
    ImageCropPicker.openPicker({
      width: 300,
      height: 300,
      cropping: cropit,
      cropperCircleOverlay: circular,
      compressImageMaxWidth: 640,
      compressImageMaxHeight: 480,
      compressImageQuality: 0.7,
      compressVideoPreset: "MediumQuality"
    })
      .then(image => {
        console.log("received image", image);

        this.setState({
          cropImage: {
            uri: image.path,
            width: image.width,
            height: image.height,
            mime: image.mime
          },
          librairieImagesUri: [],
          shootedImagePath: false
        });

      })
      .catch(e => {
        console.log(e);
        Alert.alert(e.message ? e.message : e);
      });
  }

in the log i have only

received image Object {
    size: 20101, mime: "image/jpeg", height: 300, width: 300, 
    path: "file:///storage/emulated/0/Pictures:f6838c6e-cca1-4c12-9cf9-cbc867aef9b2.jpg"
}

what i'm missinge please ?

[ivpusic]

currently this is ios only. are you using ios?

[alainib]

thanks for response, I'm testing on android and ios same times.
I found another solution combining your package with react-native-camera-roll-picker. I hope it will be available on both soon.

import CameraRollPicker from "react-native-camera-roll-picker";
import ImageCropPicker from "react-native-image-crop-picker";

<CameraRollPicker
    scrollRenderAheadDistance={500}
    initialListSize={1}
    pageSize={3}
    groupTypes="SavedPhotos"
    batchSize={5}
    maximum={1}            
    assetType="Photos"
    imagesPerRow={3}
    imageMargin={5}
    callback={this.getSelectedImage.bind(this)}
/>


getSelectedImage(images, current) {
    let imagesTmp = images.map(n => {
      ImageCropPicker.openCropper({
        path: n.uri,
        width: 300,
        height: 400
      }).then(image => {
        this.clnj("openCropper", image);
      });

      Exif.getExif(n.uri)
        .then(msg => this.clnj("selected images", msg))
        .catch(msg => console.log("ERROR: " + msg));
      return n.uri;
    });

    this.setState({
      librairieImagesUri: imagesTmp,
      shootedImagePath: false,
      cropImage: false
    });
    this.toggleModalLibrairieVisible();
  }

[dennymactav]

from imagepicker is posible friend you got the file image name

[dennymactav]

import React, {Component} from 'react';
import {
View, Text, StyleSheet, ScrollView, Alert,
Image, TouchableOpacity, NativeModules, Dimensions
} from 'react-native';

import real from 'realm';
var imagereal='';
let realm = new Realm({
schema:[
{
name:'pic',
// primaryKey:'id',
properties:{
// id:'string',
img:'string'

  }
  }

]

});

//import Video from 'react-native-video';

var ImagePicker = NativeModules.ImageCropPicker;

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
backgroundColor: 'blue',
marginBottom: 10
},
text: {
color: 'white',
fontSize: 20,
textAlign: 'center'
}
});
var imge='';
var pic='';
var myjson='';
var jsparse=''
var ltg=''
var x=''
var slc=''
var strsplit=''
var obj =realm.objects('pic')
export default class imagepicker extends Component {

constructor(props) {
super(props);
this.state = {
image: null,
name: '',
images:[]
};
}

pickSingleWithCamera(cropping) {
ImagePicker.openCamera({
cropping: cropping,
width: 500,
height: 500,
includeExif: true,
}).then(image => {
console.log('received image', image);
this.setState({
image: {uri: image.path, width: image.width, height: image.height},
images: []
});
}).catch(e => alert(e));
}

pickSingleBase64(cropit) {
//ImagePicker.openPicker({
imagepicker.openPicker({
width: 300,
height: 300,
cropping: cropit,
includeBase64: true,
includeExif: true,
}).then(image => {
console.log('received base64 image');
this.setState({
image: {uri: data:${image.mime};base64,+ image.data, width: image.width, height: image.height},
images: null
});
}).catch(e => alert(e));

}

cleanupImages() {
ImagePicker.clean().then(() => {
console.log('removed tmp images from tmp directory');
}).catch(e => {
alert(e);
});
}

/*componentDidMount(){
realm.write(()=>{
realm.create('pic', {img:imge})
})

}*/

cleanupSingleImage() {
let image = this.state.image || (this.state.images && this.state.images.length ? this.state.images[0] : null);
console.log('will cleanup image', image);

ImagePicker.cleanSingle(image ? image.uri : null).then(() => {
  console.log(`removed tmp image ${image.uri} from tmp directory`);
}).catch(e => {
  alert(e);
})

}

cropLast() {
if (!this.state.image) {
return Alert.alert('No image', 'Before open cropping only, please select image');
}

ImagePicker.openCropper({
  path: this.state.image.uri,
  width: 200,
  height: 200
}).then(image => {
  console.log('received cropped image', image);
  this.setState({
    image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
    images: null
  });
}).catch(e => {
  console.log(e);
  Alert.alert(e.message ? e.message : e);
});

}

pickSingle(cropit, circular=false) {
ImagePicker.openPicker({
width: 300,
height: 300,
cropping: cropit,
cropperCircleOverlay: circular,
compressImageMaxWidth: 640,
compressImageMaxHeight: 480,
compressImageQuality: 0.5,
compressVideoPreset: 'MediumQuality',
includeExif: true,
}).then(image => {
console.log('received image', image);
this.setState({
//image: {uri: image.path, width: image.width, height: image.height, mime: image.mime},
image: {uri:image.path},

    images: null
  });
}).catch(e => {
  console.log(e);
  Alert.alert(e.message ? e.message : e);
});

imge=this.state.image
myjson =JSON.stringify(imge);
ltg=myjson.length
slc = myjson.slice(8,ltg-2);
// jparse=JSON.parse(myjson);
realm.write(()=>{
realm.create('pic',{img:slc})
})
/* realm.write(()=>{

  realm.delete(obj)})*/

}

pickMultiple() {
ImagePicker.openPicker({
multiple: true,
waitAnimationEnd: false,
includeExif: true,
}).then(images => {
this.setState({
image: null,
images: images.map(i => {
console.log('received image', i);
return {uri:i.path, width: i.width, height: i.height, mime: i.mime};
})
});
}).catch(e => alert(e));
}

scaledHeight(oldW, oldH, newW) {
return (oldH / oldW) * newW;
}

renderImage(image) {
return (

)
}

renderAsset(image) {

return this.renderImage(image);

}

render() {
imge=this.state.image;
myjson=JSON.stringify(imge);
//jsparse=JSON.parse(myjson);

var rplc="file:///storage/emulated/0/Pictures"
// var tes= obj[2].img
// strsplit=myjson.split('/')
// imagereal=obj.map((obj)=>obj.img)
ltg=myjson.length
x= obj.length-1
imagereal=obj[x].img
//strsplit=imagereal.slice(8,x-2)
var lng=imagereal.length
//slc = myjson.slice(20,ltg-3);
strslice=imagereal.slice(8,lng-2)//this the truth source
return (

  <TouchableOpacity onPress={() => this.pickSingle(false)} >
    {this.state.image ? this.renderAsset(imge) : null} 
    {this.state.images ? this.state.images.map(i => <View key={i.uri}>{this.renderAsset(i)}</View>) : null}
    <Text>uri:{x} </Text>
   <Text>{imagereal} </Text>
   < Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={{uri:imagereal}} />
  </TouchableOpacity>



  <TouchableOpacity onPress={() => this.pickSingleWithCamera(false)} style={styles.button}>
    <Text style={styles.text}>Select Single With Camera</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.pickSingleWithCamera(true)} >
    <Text style={styles.text}>Select Single With Camera With Cropping</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.pickSingle(false)} style={styles.button}>
    <Text style={styles.text}>Select Single</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.cropLast()} style={styles.button}>
    <Text style={styles.text}>Crop Last Selected Image</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.pickSingleBase64(false)} >
    <Text style={styles.text}>Select Single Returning Base64</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.pickSingle(true)} >
    <Text style={styles.text}>Select Single With Cropping</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={() => this.pickSingle(true, true)} style={styles.button}>
    <Text style={styles.text}>Select Single With Circular Cropping</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={this.pickMultiple.bind(this)} style={styles.button}>
    <Text style={styles.text}>Select Multiple</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={this.cleanupImages.bind(this)} style={styles.button}>
    <Text style={styles.text}>Cleanup All Images</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress={this.cleanupSingleImage.bind(this)} style={styles.button}>
    <Text style={styles.text}>Cleanup Single Image</Text>
  </TouchableOpacity>
</View>);

}
}

[dennymactav]

here to get name file imge=this.state.image
myjson =JSON.stringify(imge); convert to json

[basha777]

you can get using the path
let filename = path.substring(path.lastIndexOf('/') + 1, path.length)