How to upload image to server using axios in react native?

Question

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)});
    });

I had the same issue and this is what helped me : stackoverflow.com/a/64161651/8013132 — ABM
– ABM, Commented Apr 6, 2021 at 11:56

sadiq · Accepted Answer · 2019-11-05 17:22:37Z

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)});
    });

edited Nov 5, 2019 at 17:22

sadiq

2,3081 gold badge21 silver badges22 bronze badges

answered Nov 30, 2018 at 6:06

Savinder Singh

6451 gold badge6 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Kishan Bharda Over a year ago

I am getting error Request failed with status code 422. What is the problem ?

Kishan Bharda Over a year ago

Sorry that was not code side error, After searching long time I found that, that was server side error.

Irfan wani Over a year ago

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 Over a year ago

And don't we need any special headers to send images or other files

Savinder Singh Over a year ago

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....

|

Suresh Tamang · Accepted Answer · 2020-05-27 02:44:39Z

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

answered May 27, 2020 at 2:44

Suresh Tamang

521 silver badge10 bronze badges

Comments

Saif Ubaid · Accepted Answer · 2020-07-09 10:39:29Z

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.

answered Jul 9, 2020 at 10:39

Saif Ubaid

3744 silver badges8 bronze badges

1 Comment

Khurshid Ansari Over a year ago

It is not working for me and getting error while posting "No such file or directory"

Collectives™ on Stack Overflow

How to upload image to server using axios in react native?

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related