React-native-image-crop-picker: Can't upload image

Created on 12 Nov 2019  路  1Comment  路  Source: ivpusic/react-native-image-crop-picker

I can't upload image to the laravel but sometimes success. it says filename cannot be empty but it has a filename.

var data= new FormData();

  data.append('image',{uri:item.uri,name:item.names,type:item.type}); // append image in formdata
      value.data.map(i=>{



  data.append('ReportID',i.ReportID);
  })
  data.append('UserIDSession',this.state.UserIDSession);


    axios.post('http://'+appConfig._api+'/ClickIT/public/UploadFile',data) //UPLOAD IMAGE 
    .then(function (response) {


    }).catch((er)=>console.warn(er));

Most helpful comment

FormData

IF you Use Camera then that time you are not getting filename so for that you have to pass one name.

I am doing like this

 pickSingleWithCamera(cropit, circular = false, mediaType = 'photo') {
        ImagePicker.openCamera({
            width: 500,
            height: 500,
            includeExif: true,
            cropping: cropit,
            cropperCircleOverlay: circular,
            compressImageMaxWidth: 1000,
            compressImageMaxHeight: 1000,
            mediaType,
        }).then(image => {
            this.RBSheet.close()
            console.log('received image', image);
            this.setState({
                ImageData: {
                    name: 'input_img.jpeg',
                    uri: image.path,
                    type: image.mime,

                },
                profile_image: image.path,
            })
        }).catch(e => {
            this.RBSheet.close()
            console.log(e);
        });
    }
  const data = new FormData();
        data.append('uid', loginid);
        data.append('email', email);
        data.append('name', Fullname);
        if (pic != null) {
            console.log('image data',pic)
            data.append('input_img', {
                uri: pic.uri,
                type: pic.type,
                name: pic.name,
            });
        }

        fetch(uploadUrl, {
            method: 'post',
            body: data
        }).then((response) => response.json())
            .then((responseJson) => {
                ........................
            });

>All comments

FormData

IF you Use Camera then that time you are not getting filename so for that you have to pass one name.

I am doing like this

 pickSingleWithCamera(cropit, circular = false, mediaType = 'photo') {
        ImagePicker.openCamera({
            width: 500,
            height: 500,
            includeExif: true,
            cropping: cropit,
            cropperCircleOverlay: circular,
            compressImageMaxWidth: 1000,
            compressImageMaxHeight: 1000,
            mediaType,
        }).then(image => {
            this.RBSheet.close()
            console.log('received image', image);
            this.setState({
                ImageData: {
                    name: 'input_img.jpeg',
                    uri: image.path,
                    type: image.mime,

                },
                profile_image: image.path,
            })
        }).catch(e => {
            this.RBSheet.close()
            console.log(e);
        });
    }
  const data = new FormData();
        data.append('uid', loginid);
        data.append('email', email);
        data.append('name', Fullname);
        if (pic != null) {
            console.log('image data',pic)
            data.append('input_img', {
                uri: pic.uri,
                type: pic.type,
                name: pic.name,
            });
        }

        fetch(uploadUrl, {
            method: 'post',
            body: data
        }).then((response) => response.json())
            .then((responseJson) => {
                ........................
            });
Was this page helpful?
0 / 5 - 0 ratings