joltup / rn-fetch-blob

A project committed to making file access and data transfer easier, efficient for React Native developers.
MIT License
2.81k stars 772 forks source link

How to customize form data content #607

Open goalbased opened 4 years ago

goalbased commented 4 years ago

my form data will look like this

    const formData = new FormData();
    formData.append('file', file); // should be binary, but I don't know how to read image file as binary to here
    formData.append('userId', 1); //
    formData.append('userType', 'normal');

but after read the document I can't find how to customize form data or how to read image to binary from uri? do I miss something?

tarun29061990 commented 4 years ago

Any updates on this?

goalbased commented 4 years ago

I found I can use uri for form data, so I don't need rn-fetch-blob to convert my file now, there is my sample code

  const formData = new FormData();
    formData.append('file', {
      uri: this.state.imgUri,
      name: `${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.jpg`,
      type: 'image/jpg',
    });

You can close this issue

MayoudP commented 3 years ago

I found I can use uri for form data, so I don't need rn-fetch-blob to convert my file now, there is my sample code

  const formData = new FormData();
    formData.append('file', {
      uri: this.state.imgUri,
      name: `${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.jpg`,
      type: 'image/jpg',
    });

Hey, can you tell me how do you include your formData within the upload method using RNFetchBlob.fetch ?

goalbased commented 3 years ago

I found I can use uri for form data, so I don't need rn-fetch-blob to convert my file now, there is my sample code

  const formData = new FormData();
    formData.append('file', {
      uri: this.state.imgUri,
      name: `${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.jpg`,
      type: 'image/jpg',
    });

Hey, can you tell me how do you include your formData within the upload method using RNFetchBlob.fetch ?

Now, I didn't use RNFetchBlob.fetch to upload. I use fetch and below is real word code

  onSave = async () => {
    this.setState({status: 'camera', imgUri: ''});
    const formData = new FormData();
    formData.append('file', {
      uri: this.state.imgUri,
      name: `${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.jpg`,
      type: 'image/jpg',
    });

    formData.append('projectId', 16);
    formData.append('sourceType', 2);
    formData.append('filePath', 'photo');
    const response = await fetch(
      'http://ap-southeast-1.compute.amazonaws.com/api/file/uploadFile',
      {
        headers: {
          Authorization: `Bearer ${global.token}`,
        },
        method: 'POST',
        body: formData,
      },
    );
  };
ctthanh123 commented 2 years ago

I found I can use uri for form data, so I don't need rn-fetch-blob to convert my file now, there is my sample code

  const formData = new FormData();
    formData.append('file', {
      uri: this.state.imgUri,
      name: `${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.jpg`,
      type: 'image/jpg',
    });

Hey, can you tell me how do you include your formData within the upload method using RNFetchBlob.fetch ?

Now, I didn't use RNFetchBlob.fetch to upload. I use fetch and below is real word code

  onSave = async () => {
    this.setState({status: 'camera', imgUri: ''});
    const formData = new FormData();
    formData.append('file', {
      uri: this.state.imgUri,
      name: `${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.jpg`,
      type: 'image/jpg',
    });

    formData.append('projectId', 16);
    formData.append('sourceType', 2);
    formData.append('filePath', 'photo');
    const response = await fetch(
      'http://ap-southeast-1.compute.amazonaws.com/api/file/uploadFile',
      {
        headers: {
          Authorization: `Bearer ${global.token}`,
        },
        method: 'POST',
        body: formData,
      },
    );
  };

But how to upload binary image using fetch? And dont use rn-fetch-blob