I've been stuggling with this problem for several hours now, and as I feel like I browsed all StackOverflow, I therefore am making my first post here, after almost a decade of working in IT ! 😎
Long story short, I have to send a file (an image) to my API (Express 4/Multer), and I am using Axios for that.
Below is what the form submit part looks like at the moment :
let avatar = e.target.avatar.files[0];
[...]
if (avatar) {
let formData = new FormData();
formData.append("avatar", avatar);
let customHeaders = {
"Content-Type":
"multipart/form-data" + ";boundary=xxMyBoundaryxx",
};
console.log(avatar); // This is not empty !
console.log(formData.get('avatar')); // Neither is this !
axios.post(
apiUrl,
formData,
customHeaders
);
}
Everything is good server-side, I used Insomnia to test uploading a file to my apiUrl, and it is working like a charm.
Also, if I remove my boundary parameter in Content-Type, it triggers an error ('Multipart: Boundary not found').
However, when I post my file using the code above, the resulting HTTP request has no payload, meaning that the data given to my API is empty (checked using Chrome).
I've been trying to understand the problem, and
Hope my description was not too vague, and that my english was not too bad 😓
Feel free to reach me if you are missing something to give an answer,
Regards,
Hazreath
PS :
Server side "Multipart: boundary not found" error message :
Error: Multipart: Boundary not found
at new Multipart (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\types\multipart.js:58:11)
at Multipart (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\types\multipart.js:26:12)
at Busboy.parseHeaders (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\main.js:71:22)
at new Busboy (C:\Workspace\React\Tricks\back\node_modules\busboy\lib\main.js:22:10)
at multerMiddleware (C:\Workspace\React\Tricks\back\node_modules\multer\lib\make-middleware.js:33:16)
at Layer.handle [as handle_request] (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\layer.js:95:5)
at next (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\route.js:137:13)
at Route.dispatch (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\route.js:112:3)
at Layer.handle [as handle_request] (C:\Workspace\React\Tricks\back\node_modules\express\lib\router\layer.js:95:5)
at C:\Workspace\React\Tricks\back\node_modules\express\lib\router\index.js:281:22
The form boundary part and the entire content-type header should not be defined by the user if you use the native FormData encoder.
Using Axios v0.27.2:
const formData = new FormData();
formData.append('avatar', avatar);
axios.post(apiUrl, formData);
Or:
axios.postForm(apiUrl, {
avatar
});
Or you can just submit the entire FileList object
axios.post(apiUrl, document.querySelector('#fileInput').files);
Playground
Related
First, I sent an image path from react to Django by using the axios of POST method.
Next, I edited the image in Django, and returned edited images that were converted into base64 to react.
like this.
/* this is view.py in Django */
class SquareCognitionSet(viewsets.ViewSet):
#action(methods=['POST'], detail=False, name='Edit image')
def show(self, request):
input = request.data['input']
edited_image = edit.main(input) // my user-defined function. return base64 after edit image.
data = {"message": "Got base64", "base": edited_image, "type": imghdr.what(input)}
return Response(data=data)
No problem so far.
Promlem is from here.
I cannot get only base64 data of response that was sent from Django.
However, axios could get response from Django. I confirmed console.log()
/*this is react*/
useEffect(()=>{
async function check(ImagePath: string) {
window.electronAPI.server_on(); // electron starts server to work axios
await axios.post("http://127.0.0.1:8000/ImageEdit/edit/", {
input: ImagePath // input value of image path
})
.then((response)=>{
console.log("success: ", response); // <-- here, I confirmed response
})
this is result of console.log().
Then I run
console.log("base64: ", response.data.base);
However, nothing is shown. Even the text of "base64: " is disappear.
What I tried.
I tried whether I can take out the others value sent from Django.
I added value {"message": "Got base64"} in response of Django.
Then, I take out value like
console.log("message: ", response.data.message);
console.log("status: ", response.status);
They are successfuly shown. So, This may be problem of base64.
I confirmed capacity in POST method
I checked the length of base64 in Django. This was 34789440.
So, I made string value that has length of 40000000: t = "A"410**7
Then, I added this into response in Django, and I could receive it successfully in react.
convert to JSON before being sent from Django
I added the following code into view.py in Django.
...
data = {"message": "Got base64", "base": edited_image, "type": imghdr.what(input)}
params = json.dumps(data)
return Response(data=data)
The result was almost same the above my problem. console.log("success: ", response); showed
However, all response data became undefined. Even response.status became undefined.
check type of data
base64 was 'str'.
Why couldn't I take out only base64???
I googled it including how to use axios, Django post method and so on.
But I don't know how to fix it.
Thanks in advance.
I have the following get request:
return axios
.get<ArticlesResponse>(SUGGESTED_ARTICLES, {
headers: {
'Content-Type': 'application/json',
},
})
.then(onRequestSuccess)
.catch(onRequestError);
It returns me an object with the data I need, however, the data field inside the object is a string instead of an actual object. Anyone has any ideea about why? I looked it up and saw that adding that header above will fix the issue but it doesn't. Thanks in advance!
My onRequestSucces is:
export function onRequestSuccess<T = any>(response: AxiosResponse<T>) {
console.log('Request Successful!', response);
return response.data;
}
JSON.Parse() also won't fix it.
The problem may be due to the API returning a response that contains invalid JSON data, now JSON.parse would throw an error, but Axios manages the exception by setting the invalid JSON as string in the data property. Try using the Fetch API.
Since you're using a GET request (doesn't have a body) the 'Content-Type' is not being useful. This header is used to tell the server which type of content you're sending, but you're sending none. You should use it only on POST/PUT requests.
See this question for more details on this.
In order for your request to be read as JSON you have to set the header in the server. This will tell the browser you're receiving a JSON, which will then be parsed automatically by axios.
I want to download file that can be in any format viz. pdf, jpeg, png, xlsx, csv etc. The download API on backend using pyramid framework is sending FileResponse as below:
def delivery_item_download_view(request, *args, **kw):
context = request.context
item_row = context.item_row
if item_row and item_row["deleted_at"] is None:
print(request.upload_dir+'/'+item_row["file_name"]+'.'+item_row["file_extension"])
response = FileResponse(
request.upload_dir+'/'+item_row["file_name"]+'.'+item_row["file_extension"],
request=request,
)
response.headers["attachment"] = item_row["name"];
return response
This, when executed using POSTMAN works as expected giving file as output. However,when tried implementing same using ReactJS, it's not working as expected. My client-code is as below:
onDownloadItem= (item) => {
console.log("item id is:", item.item_id)
var apiBaseUrl = "https://dev.incodax.com/api/deliveries_items/"+ item.item_id+ "/download";
fetch(apiBaseUrl, {
method: "GET",
}).then((res) => {
fileDownload(res,item.file_name)
console.log(res)
})
}
This fileDownload function simply downloading file but with no content inside. In downloaded file I could see something like:
[object Response]
I am getting 200 response from server. So I dont't think there is any issue with server side code. How can I handle it on client?
Thanks in advance
Will it suit you if you just redirected user to link to file? Browser will automatically handle it and download it.
The issue is in your fileDownload function which you do not post here. It's not clear what the first parameter is supposed to be but likely it is not the response object. Likely you at least need to pull the body out of the response and save that! The response body can be converted to a buffer object which could work (again it depends on what fileDownload is expecting):
res.arrayBuffer().then(buffer => {
fileDownload(buffer, item.file_name);
});
Currently I am using Ionic to develop a Facial Recognition app.
I am using Microsoft's Face API for the same.
My problem is I keep getting Error 400: Decoding error, image format unsupported.
After doing some research, I ran into this link
Quoting START,
When you're submitting a binary payload, you should not base64 encode it. Here's what you might do instead..
URI uri = builder.build();
HttpPost request = new HttpPost(uri);
request.setHeader("Ocp-Apim-Subscription-Key", "...");
File file = new File("...");
FileEntity reqEntity = new FileEntity(file, ContentType.APPLICATION_OCTET_STREAM);
request.setEntity(reqEntity);
Quoting END
With Ionic/AngularJS, the captured image using Device Camera or selected from Image Gallery is returned in the form of base64 string. So I looked for ways to decode the data into Binary using this gist but still failed.
Here's my controller code where I make the API call.
$scope.postToAPI = function () {
// make http call to MS cognitive API
var formData = new FormData();
formData.append('file', $scope.picture);
$http.post($scope.cognitiveServices.endpoint, formData, {
headers: { 'Content-Type': 'application/octet-stream', 'Ocp-Apim-Subscription-Key':$scope.cognitiveServices.apiKey }
}).success(function (data) {
console.log(JSON.stringify(data));
alert("Awesome");
}).error(function (err) {
alert("Fail ->" + err.code + " " + err.message);
console.log("Some error occured");
});
}
I have
tried setting transform:angular.identity and Content-Type: undefined
tried sending image without Form Data (just a random trial)
tried converting base64 string to Uint8 Array (by following the solution to this SO question)
All my attempts so far have failed. Can someone explain what I am doing wrong?
P.S: This is my first time with Ionic framework.
On attempting to login via the truvault api using angular js, I am getting this error message: Failed to parse UUID. I am passing the username, password and account_id as params. I am successful using the curl command and get the success response.
The 400 error is not described in the api docs for authorization. I am not sure about if this UUID is linked to the schema_id. Would anyone (truevault guys!!) know what I am doing wrong?
I contacted truevault support on this one. Dan helped me get through it.
I was passing the username/password/account_id as url string query parameters. I had to make two changes to the code:
1. Pass the above as form data parameters
2. add the angular-post-fix.js to my project.
(Note: I am not adding the link as there are editors who will disallow the post with links to elsewhere. It has happened in the past!)
When using Node.js, the querystring API is really useful. Just pass an object to the querystring.stringify() function, and the resulting output is ready to be sent to TrueVault for login.
Additionally, I found that adding the header 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' might be necessary (which is one of the things the Angular post-fix library does).
#orthodoc is right, but is kind of tricky how to actually build the request. Lets say we are using fetch with formData params, I'd like to add an example of a successful request:
...
var formData = new FormData();
formData.append('username', username);
formData.append('password', password);
formData.append('account_id', accountId);
return fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
body: formData
});
...