11

I want to send an image as a file to the server in react native. How can I do this? Here is my code:-

export const editUserProfile = (sessionId,firstName,lastName,image,countryCode,phone) => 
new Promise((resolve,reject) => {

    const form = new FormData();
    form.append('image',{
        uri : image,
        type : 'image/jpeg',
        name : 'image.jpg'
    })
        return axios.post(base_url+'edit-profile',{
            session_id : sessionId, 
            firstname : firstName,  
            lastname : lastName,
            image : null,  
            country_code : countryCode, 
            phone : phone, 
            locale : 'en'
        }).then(response =>     
            {resolve(response)})
        .catch(error => 
            {reject(error)});
    });
Savinder Singh
  • 635
  • 1
  • 6
  • 28
  • I had the same issue and this is what helped me : https://stackoverflow.com/a/64161651/8013132 – ABM Apr 06 '21 at 11:56

3 Answers3

16
//edit user profile
export const editUserProfile = 
    (sessionId,firstName,lastName,image,countryCode,phone) => 
new Promise((resolve,reject) => {

    var data = new FormData();
    data.append('session_id',sessionId);
    data.append('firstname',firstName);
    data.append('lastname',lastName);
    data.append('image',
      {
         uri:image,
         name:'userProfile.jpg',
         type:'image/jpg'
      });
    data.append('country_code',countryCode);
    data.append('phone',phone);
    data.append('locale','en');

        return axios.post(base_url+'edit-profile',data).then(response =>     
            {resolve(response)})
        .catch(error => 
            {reject(error)});
    });
sadiq
  • 2,238
  • 19
  • 21
Savinder Singh
  • 635
  • 1
  • 6
  • 28
  • I am getting error `Request failed with status code 422`. What is the problem ? – Kishan Bharda Jul 17 '19 at 08:29
  • Sorry that was not code side error, After searching long time I found that, that was server side error. – Kishan Bharda Jul 18 '19 at 09:38
  • 1
    What is that name key in image as in react-native, if we are using an image picker that returns an object which has the image details like uri, type but no name. – Irfan wani Jun 09 '21 at 12:24
  • And don't we need any special headers to send images or other files – Irfan wani Jun 09 '21 at 12:25
  • name is the name of image to identify image like its user image so i set name userProfile.jpg....or u can also use name from imageObject that picked from image picker.... – Savinder Singh Jun 09 '21 at 12:42
  • u cannot send upload image directly...so to upload image u need formData.... – Savinder Singh Jun 09 '21 at 12:43
  • How do we get the `image` if we just have the `uri`? – user2078023 Dec 30 '21 at 21:05
  • For that can create file object from that. We can use trick here, we can simply get type from uri string, if image then type will be "image/type" , for video it will be "video/type", set name for file, and create file object now that u have... One another way to upload image , convert uri to base64 string... u can simply send string to upload image... – Savinder Singh Dec 31 '21 at 02:32
0

I was also stuck in this problem for a week. After research I found that we are sending more than 10MB file from RN to server which won't reach to server.You can resize image size and send to server. This package help me. https://github.com/bamlab/react-native-image-resizer

Suresh Tamang
  • 42
  • 1
  • 9
0

after wasting full day i just found the solution. first find the file path you have of your image. mine was this.

file:///storage/emulated/0/Pictures/f5ca988c-882d-4b5e-86bb-b47939909b09.jpg

after changing it from this to

file://storage/emulated/0/Pictures/f5ca988c-882d-4b5e-86bb-b47939909b09.jpg it worked :). just remove the third back slash.

Saif Ubaid
  • 191
  • 2
  • 8