Level 61
Are you using enctype=multipart/form-data?
Feb 24, 2021
12
Level 8
Is it possible to upload a file with other data on the same request ?
I try to upload a file with other fields like name, birth date , ....
the problem is : using Axios I have to use new FormData() and the problem of FormData is it sends data as a string. event with JSON.stringify()
If the sent value is different than String or Blob it will be automatically converted to String
source : https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
My question : How to send a form data (including file) using Axios ?
Level 8
I try to add the header as you can see bellow :
let bodyFormData = new FormData();
bodyFormData.append('userName', 'Fred');
//bodyFormData.append('image', imageFile);
axios({
method: 'patch',
url: '/api/companies/' + id,
data: bodyFormData,
headers: {'Content-Type': 'multipart/form-data' }
})
In the update controller : I simply dd($request->all()) but the result is empty array [] instead to see "user_name"=>"Fred"
Level 61
@godzilaravel I don't see anything wrong there. Did you try using full syntax axios.patch(url[, data[, config]])?
Level 104
Don't explicitly add a Content-Type header on the request if you are using FormData because the browser will be unable to set the Content-Type on each of the form field boundaries. I mentioned to @godzilaravel yesterday that the only option here is to put the JSON content in a Blob, allow the original types to be maintained whenever there is an image in the request.
1 like
Level 8
With axios.patch it returns an empty result !
but I tried to append the method in formData
let formData = new FormData();
formData.append('test', this.companyDetail);
formData.append('companiesLogos', this.companiesLogos);
formData.append('_method', 'patch');
const headers = {
'Encrypt': 'multipart/form-data',
}
axios.post('/api/companies/' + id,
formData,
{
headers: headers
}
);
and the result okay for the file but not for the data:
array:3 [
"test" => "[object Object]"
"_method" => "patch"
"companiesLogos" => Illuminate\Http\UploadedFile {#1548
-test: false
-originalName: "cap1.PNG"
-mimeType: "image/png"
-error: 0
#hashName: null
path: "/tmp"
filename: "php3QK5RO"
basename: "php3QK5RO"
pathname: "/tmp/php3QK5RO"
extension: ""
realPath: "/tmp/php3QK5RO"
aTime: 2021-02-24 17:33:45
mTime: 2021-02-24 17:33:45
cTime: 2021-02-24 17:33:45
inode: 917513
size: 16735
perms: 0100600
owner: 1000
group: 1000
type: "file"
writable: true
readable: true
executable: false
file: true
dir: false
link: false
}
]
As you can see test is just a string ("[object Object]") instead of object with multiple properties !
I verified the header in chrome browser and the encrypt is correct :
Encrypt: multipart/form-data <----------
Host: localhost:3000
Level 104
But that's not how you build up a FormData object from scratch; the test field should be a Blob in that case:
form.append('companyData', new Blob([JSON.stringify(this.companyData)]), 'data.json')
This sends the JSON content as a file (another file in addition to the image) whose field name is companyData. You can get the file contents on the server side using :
$file = request()->file('companyData');
$json = json_decode($file->getContent(), true);
dump($json);
2 likes
Level 61
I mentioned to @godzilaravel yesterday that the only option here is to put the JSON content in a Blob, allow the original types to be maintained whenever there is an image in the request.
@tykus thanks for letting us know.
@godzilaravel if I understand the situation correctly, why don't you listen to given advice, but instead you create another topic?
Level 8
Level 8
@tykus Thank you so much :)
Level 1
@tykus very useful answer. Thank you so much bro.
Level 27
@godzilaravel First you'd have to set the Content-Type header to multipart/form-data obviously. After that simply use append() to add all your data to the FormData. When adding the file you have to use the file URI to make it work:
// For example
formData.append('parameter_name', {
type: 'image/png',
name: 'example.png',
uri: imageUri
});
Note that the mime type and name is hardcoded here. You probably want to use the actual values there.
Level 8
I try with this but it's not working ! it returns an empty array
let bodyFormData = new FormData();
bodyFormData.append('userName', 'Fred');
//bodyFormData.append('image', imageFile);
axios({
method: 'patch',
url: '/api/companies/' + id,
data: bodyFormData,
headers: {'Content-Type': 'multipart/form-data' }
})
Please or to participate in this conversation.