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

Solution 1

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

Solution 2

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.

Comments

[Kishan Bharda]

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

[Kishan Bharda]

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

[Irfan wani]

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]

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

[Savinder Singh]

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]

u cannot send upload image directly...so to upload image u need formData....

[Khurshid Ansari]

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

[user2078023]

How do we get the image if we just have the uri?

[Savinder Singh]

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