I am trying to upload a file to the server and the server APIs are written using django. The file upload is working perfectly from Postman but when i try to upload from mobile app (React Native) using axios the backend is not able to read it.
Following is the Frontend Snippet:
let accessToken = await AsyncStorage.getItem('accessToken')
let formData = new FormData()
formData.append('doc_type', this.state.selectedDoc.id)
formData.append('document', this.state.selectedFiles) // <- This is the fetched file in array format . [{filname:'abc', size:12344,.....}]
formData.append('description', this.state.description.value)
formData.append('data', JSON.stringify(this.state.selectedDoc.fields))
let url = `${AppConstants.url}api/${AppConstants.apiVersion}/upload_doc`
var config = {
method: 'post',
url: url,
data: formData,
headers: {
'Authorization': `Bearer ${accessToken}`,
}
}
axios(config)
.then((resp) => {
resolve(resp)
})
.catch((err) => {
reject(err)
});
And the backend-end if else statement is as follows:
if(request.FILES.getlist("document")):
files = request.FILES.getlist("document")
....
....
....
else:
return response.JsonResponse({
'success' : False,
'message' : 'Please Upload a file'
}, status = status.HTTP_200_OK)
The above else block is executed even though the UI is sending a valid file.
Request you to please share a solution.
Related
I'm currently stuck sending a request to my server and can not get a response. I have tried it on postman and it runs completely fine. However, when I try to put it on react, the back-end always response with a bad request.
Here is my code for the back-end
#GetMapping(value = "/searchPatient")
public ResponseEntity<?> searchPatients(#RequestParam String id_num,
#RequestParam String name) {
List<PatientForSearchDto> patientForSearchDtos = patientService.viewSearchedPatient(id_num, name);
return ResponseEntity.status(HttpStatus.OK).body(
new ResponseObject("ok", "Success", patientForSearchDtos)
);
}
Here is my code for Front end (react)
async function sendRequest () {
const formData = new FormData();
formData.append('id_num', id_num);
formData.append('name', name);
console.log(formData)
console.log(formData.get('name'))
console.log(formData.get('id_num'))
const config = {
method: 'get',
url: 'http://localhost:8080/api/searchPatient',
// headers : {
// 'Content-Type': 'from-data'
// },
data : formData
};
await axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
setPatientList(response.data.data.object)
})
.catch(function (error) {
console.log(error);
});
}
Here is what I get when sending request via postman
enter image description here
Here is when sending request using react
enter image description here
From the Axios docs about Request Config data param:
// data is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', 'DELETE , and
'PATCH'
So, data with GET method is not supported.
Can't you use params instead?
I am stuck with a file upload process in a react app. In the app, I am trying to upload local video files to Google Cloud Storage.
I take the input file from:
<input type={`file`} accept=".mp4" onChange={VideoSelectChangeFunc} />
In VideoSelectChangeFunc, I get the local URL of the input file by,
let file = URL.createObjectURL(event.target.files[0])
Then I use it in axios to send to cloud
export const UploadVideo = async (file, signedurl, asset_uuid) => {
let resultState = { state: '', data: {} };
await axios({
method: 'put',
url: signedurl,
data: file,
headers: {
'Content-Type': 'application/octet-stream',
},
}).then(function (response) {
resultState.state = 'success';
resultState.data = response.data
}).catch(function (error) {
resultState.state = 'error';
resultState.data.message = error.message;
window.toastr.error(error.message);
console.log(error)
})
return resultState;
}
What I see on cloud is:
blob:http://localhost:3000/9b650cbf-8b49-440b-9e90-da6bdb5d392a
This is just the local URL of the file as string but not the video itself, when I copy and paste it on browser I can see the video. I searched the situation and saw 'Content-Type': 'blob' would solve the problem. However, we are checking headers in our CORS Policy, so it has to be 'Content-Type': 'application/octet-stream'. Is there a way to work this out?
Before sending it, converting the blob url into file worked. I have only added these two lines then, called axios.
let blob = await fetch(blobURL).then(r => r.blob());
var file = new File([blob], "thisVideo.mp4",{type:"video/mp4", lastModified:new Date().getTime()})
This can be useful, in the situations where the file is not uploaded right away but the url saved temporarily to be called later on which was the case here. If you are interested visit this question too:
How to get a file or blob from an object URL?
Working with Next.js and Django Rest Framework, I'm authenticating users using JWT. First, when the user successfully logs in to the page, a cookie (which contains the JWT token) is sent to the browser. When the user tries to access a specific page, this cookie is used to validate the petition. I'm having trouble storing the cookie in the browser.
Django | login function
#api_view(['POST'])
#permission_classes((permissions.AllowAny,))
def login(request):
...
response = Response()
response.set_cookie(key='jwt', value=token, httponly=True, max_age=86400)
response.data ={
'message': 'success',
}
return response
And here is how I'm fetching /api/login
Next | Login.js
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('email', this.state.email);
data.append('password', this.state.password);
data.append('X-CSRFToken', csrftoken);
data.append('mode', 'same-origin');
data.append('Content-Type', 'application/json');
var config = {
method: 'post',
credentials: 'include', #I'm probably having issues with this
url: 'http://localhost:8000/api/login',
data : data
};
axios(config)
.then(res=> {
console.log('success'); #I got logged, but cookie is not stored
})
.catch(
error=>{this.setState({isError:true})}
);
Here is the set-cookie in the browser:
But JWT is missing on storage:
As you can see, in both of them I'm receiving the cookie named JWT. But it's not being stored in the browser.
Thank you in advance for your time and answers!
It's important to note is that mode, credentials aren't supported for configuring Axios.It works in fetch api because those options are part of the Request API (docs for mode are here).
Axios uses a XMLHttpRequest under the hood, not Request.
Try this :
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('email', this.state.email);
data.append('password', this.state.password);
const headers = {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
}
var config = {
method: 'post',
withCredentials: true,
url: 'http://localhost:8000/api/login',
data : data,
{headers: headers}
};
axios(config)
.then(res=> {
console.log('success');
})
.catch(
error=>{this.setState({isError:true})}
);
------------------------------OR----------------------------------
put this at top:
axios.defaults.withCredentials = true
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";
This Must in django:
settings.py:
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://localhost:3000',
'http://localhost:8000'
)
i need send this request with axios.
i need header as multipart request, like below
headers: {
"Content-type": "multipart/form-data",
},
I used spring boot for backend. It expect maltipart not application/json. I tried below code, But it not worked for multipart.
axios.delete(URL, {
headers: {
Authorization: authorizationToken
},
data: {
source: source
}
});
Thanks a lot #Sinan Yaman. I generated it using POSTMAN. Answer is
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('keyName', 'project/photoes/1613388881570-note1.txt');
var config = {
method: 'delete',
url: 'localhost:8080/storage/deleteFile',
headers: {
...data.getHeaders()
},
data : data
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
Typically before make frontend we test our backend with postman. For any type of frontend http calls code can automatically generate using postman. This is awesome feature of POSTMAN. Follow below steps.
Press the code button
Select the your backend code environment
The data field of the response gives the image file.
The python file in flask server has the following response code:
flask.send_file(loc_dir+res+".png", attachment_filename=res+".png", as_attachment=true)
To get the response in reactjs I am using:
var x = new Buffer(response.data, 'binary').toString('base64');
console.log(x);
this.setState({
image_url: 'data:image/png;base64,'+x,
gotGraph: true
})
PS: I am sure that I get right image response as I getting a image when using Postman.
Edit:
await axios.post('http://ec2-xxxxxxxxxxxxxxx.compute-1.amazonaws.com/contrib/', {"url": "https://github.com/zeromq/cppzmq"}, {
headers: {
'Content-Type': 'application/json',
'responseType': 'arraybuffer'
}}).then(response => {
var x = new Buffer(response.data, 'binary').toString('base64');
console.log(x);
this.setState({
image_url: 'data:image/png;base64,'+x,
gotGraph: true
})
})