Uploading image file from React Native to Django - django

Question

So on the React Native side the console.log is printing this for the image file as in I'm doing console.log(photos[1]) and getting this
{"fileName": "rn_image_picker_lib_temp_0d752f09-0fab-40f0-8c89-13dec3695de0.jpg", "fileSize": 374466, "height": 810, "type": "image/jpeg", "uri": "file:///data/user/0/com.cheersfe/c
ache/rn_image_picker_lib_temp_0d752f09-0fab-40f0-8c89-13dec3695de0.jpg", "width": 1000}
Here is my React Native Code
const createFormData = (photos, body = {}) => {
const data = new FormData();
if (photos.length > 1) {
console.log(photos[1])
data.append("images", photos[1]);
}
Object.keys(body).forEach((key) => {
data.append(key, body[key]);
});
return data;
};
const onAddButtonClick = () => {
if (value === null) {
Alert.alert("Hold On!", "Please select a goal");
} else if (descriptionText === "") {
Alert.alert("Hold On!", "Update description required");
}
setLoading(true);
const body = createFormData(photos, { join_goal: value, body: descriptionText });
postGoalUpdatePost(body).then(response => {
// navigation.navigate("PostsScreen");
setLoading(false);
}).catch(error => {
const errorMessage = `${error.name}: ${error.message}`;
});
setLoading(false);
};
export async function postGoalUpdatePost(body) {
return constructConfig().then(config => {
return axios.post(`${url}/posts/update`, body, config).then(response => {
return response.data;
});
});
}
But on the Django side when I look at request.data['images'] I get this crazy hexstring:
\x7f.x�������uJr|�����a=e��|�\x00��^�=J0�^������\x08\x1a\\\x02;�H�a�a�\x19=�u�K\x01�x䞧�\x0e�{{�\x07\x14���}H�2\x06?.)%�\x7f\x1f�\x0c�RvI������=H-���[��䌏ÿ^��\x00玵�$��<g�\x1d}�\x1d�\x00®7�\x1e���Yr\x7f�\x1f���+&��wт�I�?������$�Ӯz���N?Z�+�\x07�Oo\x7f�?����\x7f\x13���ܒ1����\r����V=J0M�\x7f5�I5�ϹVG���\x189��`�\x7fJ�$��u�1���{\x7f.�չ:7���kuO��\x15���m,����{\x18x�\x7f.]�\x7f�W��s�\x0e=��1�\x00֬�e^��0y$sӧ�\x0ez՛���\x7f3YS\x13��|��+�\x7f\x13��#���;>�k�o�\x7fñ\x1c�\x03�\x0f\x18�;s�\'��ߥ\x19$$�{���O���SI�\x1b�U\x1f�\x0f�O�\x15���}^����֥\x08���u���\x002��|����|���Y�$�\x003�^�A�9�>�j��\x1f����z\x1f��U��\x17�u=z\x10\\��O����b9�V\x18\x04p\x08������Vd�G\x1f��2O�V��\x1f�ک\\u?C��qԛJI[���zT"����_�W+�\x02\x06\x0f$u����\x00����\x15\x19�\x1f��4W\x0b��z$w���'
so clearly it's coming in as a string rather than a file. How do I fix this?

Answer 1

The issue was the format that the upload library was saving the json
{"fileName": "rn_image_picker_lib_temp_0d752f09-0fab-40f0-8c89-13dec3695de0.jpg", "fileSize": 374466, "height": 810, "type": "image/jpeg", "uri": "file:///data/user/0/com.cheersfe/c
ache/rn_image_picker_lib_temp_0d752f09-0fab-40f0-8c89-13dec3695de0.jpg", "width": 1000}
needs to be in
{'name': file_name, 'uri': uri, 'type': type}
format. Then needed 'content-type' to be 'multipart/form-data'