Develop Reference

How to send binary file multipart/form-data using post Angular?

I have tried to send a binary file with additional fields using post method and multipart/form-data.
load() {
const formData = new FormData();
formData.append('file', this.data.binary);
formData.append('reasons', this.form.get('reasons').value);
const headers = new HttpHeaders({
key: userKey,
});
const options = { headers: headers };
this.http
.post(`/api/Controller`, formData, options)
.pipe(catchError(this.handleError))
.subscribe(
() => {
alert('Success');
},
(error) => {
alert(error.Message || 'Error');
},
);
}
Where this.data.binary is:
try {
const input = event.target as HTMLInputElement;
const reader = new FileReader();
reader.onload = () => {
this.data.binary = reader.result;
};
reader.readAsArrayBuffer(input.files[0]);
} catch (e) {
alert(e);
}
In Chrome headers I see this data after submit:
FormData
file: [object ArrayBuffer]
reasons: text
How to send file as binary correct?
I have trird also this:
formData.append('file', new Blob(this.data.binary));

don't use the FileReader to read it as binary.
Just use the FormData and append it directly
const formData = new FormData()
formData.append('file', input.files[0])
beside, readAsBinaryString is a bad practices and should use arrayBuffer instead when dealing with binary
I would also suggest that you do something like new FormData(formElement) so that you don't have to append/set every single field that is needed.

Can't upload image using Angular's HttpClient

I am able to upload an image perfectly fine using the native fetch POST:
let formData = new FormData();
formData.append('file', event.target.files[0]);
console.log(event.target.files[0]);
fetch('http://localhost:8080/file/upload', {
method: 'POST',
headers:{
'Authorization': 'Bearer ' + JWT
},
body:formData
}).then(response => console.log(response));
However, when I try this using Angular's HttpClient, the request fails since the 'Content-Type': 'multipart/form-data' is not added.
My Angular code:
The file where I'm calling the service:
this.fileSaverService.uploadImage(event.target.files[0]).subscribe(
(data)=>{
console.log(data);
},
(error) => {
console.log(error);
}
);
The fileSaverService:
uploadImage(fileToUpload) {
const endpoint = 'http://localhost:8080/file/upload';
const formData: FormData = new FormData();
formData.append('file', fileToUpload);
return this.api
.post(endpoint, formData, { headers: {'Content-Type': 'multipart/form-data'} });
}
The this.api:
post(endpoint: string, body: any, reqOpts: any = {}) {
reqOpts.headers = this.handleHeaders(reqOpts.headers);
return this.http.post(endpoint, JSON.stringify(body), reqOpts);
}
If I add the header manually when using HttpClient, I get this header without the boundary:
However the native fetch adds this header automatically with the boundary if I don't specify a header and this works perfectly:
What are my options here?

There are two problems with the code in your question:
By setting Content-Type to multipart/form-data yourself, the serialisation of your FormData will not result in the correct header with boundaries being set behind the scenes.
In your post function, you have JSON.stringify(body), which is converting your FormData object into a JSON string. After doing this, you're simply attempting to POST a string rather than a complete FormData object.

Angular 5: Multiple requests at once with forkJoin

Importand node
Was a problem within the back end, not angular, requests are correct.
I like to upload different files at once in my angular5 app. To do this I use rsjx forkJoin. I append the request in an array as you can see in the following code.
After adding the request to the array, they are all the same requests, meaning that I upload one file multiple times instead of the different selected files. Before I add them to the array, you can see in the screenshot, it's fine, different request are created by the service. I know this is some kind of pointer problem, but I have no idea how to fix this, I tried to make a deep copy with Object.assign({}, request), but doesn't work for the Observable.
Console log ~ ~ (ignore the error, the server refuses always the second request because of some unique constraint requirement - it is correct): ~ ~
The component code:
uploadFiles() {
var requests = [];
var ctrNoFailuer = this.filesReplace.length;
for (var i = 0; i < this.filesReplace.length; i++) {
let request = this.solutionFileService.update(this.filesReplace[i][0], this.filesReplace[i][1]);
console.log(request);
requests.push(request);
}
if (requests.length == 0) {
this.runTests();
} else {
forkJoin(requests).subscribe(
res => {
// [...]
}
)
}
}
The service looks like this:
update(solutionFile: SolutionFile, file?: File): Observable<SolutionFile> {
console.log(solutionFile);
let url = `${this.url}/src_uploads/${solutionFile.id}/`;
if (file) {
let headers = new HttpHeaders({
'enctype': 'multipart/form-data',
'Authorization': `JWT ${this.authService.getToken()}`
})
const formData: FormData = new FormData();
formData.append('student_solution', String(solutionFile.student_solution));
formData.append('file_src', file, file.name);
return this.httpClient.put<SolutionFile>(url, formData, { headers: headers })
.pipe(
catchError(this.handleError('UPDATE solution-file', new SolutionFile()))
);
}
return this.httpClient.put<SolutionFile>(url, solutionFile, { headers: this.headers })
.pipe(
catchError(this.handleError('UPDATE solution-file', new SolutionFile())
)
);
}

Your code seems correct, although you can make some improvements (factorisation, syntax ...), such as this :
uploadFiles() {
const requests = this.filesReplace.map(fr => this.solutionFileService.update(fr[0], fr[1]));
if (!requests.length) {
this.runTests();
} else {
forkJoin(requests).subscribe(
res => {
// [...]
}
)
}
}
update(solutionFile: SolutionFile, file ?: File): Observable < SolutionFile > {
let url = `${this.url}/src_uploads/${solutionFile.id}/`;
const headers = file ?
new HttpHeaders({
'enctype': 'multipart/form-data',
'Authorization': `JWT ${this.authService.getToken()}`
}) : this.headers;
const formData: FormData = new FormData();
formData.append('student_solution', String(solutionFile.student_solution));
formData.append('file_src', file, file && file.name || undefined);
const payload = file ? formData : solutionFile;
return this.httpClient.put<SolutionFile>(url, payload, { headers })
.pipe(
catchError(() => this.handleError('UPDATE solution-file', new SolutionFile()))
);
}
Also, please post your logs as text, because not everyone has access to imgur. Did you try to log the result of the forkJoin call ?

I haven't fully understood the question, but as I understood the forkJoin is not working for you, because you trying to pass array of observables. To overcome that issue, try to apply array of observables:
forkJoin.apply(this, requests).subscribe(
Hope this helps

How to send data correct axios Error: Multipart: Boundary not found

I don't know why I receive on server [Error: Multipart: Boundary not found]
and bundle.js:37628 POST http://localhost:8800/exporttocsv 500 (Internal Server Error)
When I make post through
<form action="/exporttocsv" method="POST" encType="multipart/form-data">
post works correctly, but through axios doesn't work.
Please help me fix the mistake
this my code
/--client
import axios from 'axios'
var formData = new FormData()
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
export const ipmortToCSV = (file) => dispatch => {
formData.append('file',file)
console.log(formData.getAll('data'))
axios.post('/exporttocsv', {
"UploadCommand": formData
},config)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//--server
const router = require('express').Router()
var csv = require('csv-express')
const controllers = require('../../controllers/exporttocsv')
var multer = require('multer')
var upload = multer({dest : 'exporttocsv/'})
router.get('/', (req, res) => {
controllers.exportToCsv(req,res)
})
router.post('/',upload.single('file'),(req,res) => {
//controllers.importToCsv(req,res)
})
module.exports = router

You can do this ...
Instantiate a new FormData instance.
const config = { headers: { 'Content-Type': 'multipart/form-data' } };
let fd = new FormData();
fd.append('file',files[0])
return axios.post("http://localhost:5000/upload", fd, config)
Usingconcat and concat-stream
const concat = require("concat-stream")
const fd = new FormData()
fd.append("hello", "world")
fd.append("file", fs.createReadStream(file))
fd.pipe(concat(data => {
axios.post("/hello", data, {
headers: fd.getHeaders()
})
}))
Using promise
const promise = new Promise((resolve) => {
const fd = new FormData();
fd.append("hello", "world");
fd.append("file", fs.createReadStream(binaryFile));
fd.pipe(concat({ encoding: 'buffer' }, data => resolve({ data, headers: fd.getHeaders() })));
});
promise.then(({ data, headers }) => axios.post('/hello', data, { headers }));
I hope I've been useful! :)
References:
github.com - Can't get a .post with Content-Type...
github.com - Better solution using axios, form-data, fs
https://stackoverflow.com/a/47630754/3332734

I was struggling with this issue of multipart boundary not found with fetch api calling to a nestjs server. What I tried was to remove the
'Content-Type': 'multipart/form-data',
headers so that Fetch api automatically set the headers and it worked. Try it out

By default axios do not attach boundary to content type header. You have to do it manually:
axios.post(`${this.baseUrl}/${path}`, formData, {
headers: {
'Content-Type': `multipart/form-data; boundary=${formData.getBoundary()}`,
},
})
It is especially important if you talking to spring server.
In other case you will see exception:
org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found

I was getting this problem with Axios via JavaScript because the content-type header was multipart-form-data but the boundary was missing.
Based on my research, a good way to handle it is to allow Axios to auto-detect the content type and set the headers correctly itself.
Here is an idea for how to accomplish this:
const formDataWithFiles = hasFiles ? new FormData() : undefined;
if (formDataWithFiles) {
// axios will automatically set the content-type to multipart/form-data if the
// data param is a FormData object
// otherwise, it will use application/json
// (study the Dev Tools > Network tab > XHR tab headers)
Object.keys(modifiedFields)
.forEach(field => formDataWithFiles.append(field, modifiedFields[field]));
}
const { data } = await axios({
method,
url: actionUrl,
data: hasFiles ? formDataWithFiles : modifiedFields,
headers: {
...axios.defaults.headers,
...headers,
},
});
return data;
The above code is in a generic handleSubmit function that can be called from anywhere in the client-side.
Here is the function signature:
const { data } = await this.submitForm({
actionUrl: this.actionUrl,
method: this.method,
modifiedFields: {
...this.modifiedUser,
},
hasFiles: true,
});
In the above code, there are two use cases. The first is the default case, where a normal payload is sent via a flat object. The second is the case when the form has files and you want multipart/form-data. In this case, we use the FormData Object as a vessel to instruct Axios to auto-detect the necessary headers and set the correct boundary.
If you do not specify the headers correctly, it is possible to receive an empty $request->all() Array in Laravel, or perhaps any server such as node.js.
The short answer to my answer is to use the FormData Object because it contains more information than a plain-old-JavaScript-object. With it, you can also access:
const formData = new FormData();
console.log('boundary:', formData._boundary);
As my annotation above hints towards, use the Dev Tools > Network tab > XHR tab to examine your request headers and make sure you have content-type application/json or application/x-www-form-urlencoded for regular form submits and multipart/form-data' if you are uploading a file.

For me the main reason was what the OP did; sending the data argument of axios.post as an object ({ key: formDataObj}) instead of just formDataObj directly as the arg.

For me add the following code to fixes it.
axios.post('/xxx/Upload', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
transformRequest: (data) => {
return data
},
})

Okay, I would like to share my solution as I struggled with this problem for almost a day. The issue was caused by an incorrect package version. Around 27.0.0, some changes were made to the form data sending, which resulted in issues with the boundaries. I'm not sure what version you folks are using, but it might be worth checking if this is the cause of your problem.
https://github.com/axios/axios/issues/4631

why I use fetch to upload img in react don't have fileName?

I use fetch to upload images in react,my code is like below:
let formData = new FormData();
let file = {uri: imgdata, type: 'multipart/form-data', name: '2_resources.jpg'};
formData.append("name", "name");
formData.append("mobile", "18381307123");
formData.append("content", "123654");
formData.append("resources", file,"2_resources.jpg");//mind this line
fetch(Config.report,
{
mode: 'cors',
method: "POST",
body: formData
})
.then(res => res.json())
.then((data) => {
console.log(data)
}
).catch((err) => {
console.log(err)
}
);
but,run it I get the request :
I have look for FormData API document on https://developer.mozilla.org/en-US/docs/Web/API/FormData
it have write below:
and the fetch used is :"isomorphic-fetch": "^2.2.1"
what should I do to use fetch upload images? thanks.

You are adding the file to the FormData object incorrectly. isomorphic-fetch wraps github's fetch polyfill. Looking at their docs shows that it should be:
handleFileUpload(event) {
var formData = new FormData();
formData.append('fileName', event.target.files[0]);
fetch('http://your-domain/upload',
{
mode: 'cors',
method: 'POST',
body: formData
}).then(function (response) {
console.log('response: ', response);
});
}
The field name on the server will be whatever you use as the key when appending formData. In the above example it will be 'fileName'. I also don't think you need to set the content-type and file name yourself. It should get set automatically.
In the above example, 'event' is the event fired from the input tag when the user upload the file:
<input type="file" onChange={this.handleFileUpload}/>