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 (<Image style={{width: 300, height: 300, resizeMode: 'contain'}} source={image} />

) }

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)

[AhmedAbuelenin]

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

This will not get the original file name. only get something like this "ee8cea28-432b-444a-92b4-e785ee7ec56c.jpg"

[Jamal-ReachFirst]

It must be reopened

[fragilebanana16]

always return a guid for media, postman works fine, so this is a client side issue