Error on submit form with data in angular

Question

I tired to submit form data but getting json decode error from laravel api. I don't have access of laravel api side. When i am trying to submit it from swagger it works fine.

curl -X 'POST' \
  'https://example.com/create-reference' \
  -H 'accept: application/json' \
  -H 'Authorization: Bearer 883|DuNTAVq5Yl2FbeNEpWMk64dpiF0z8Nem1QG0fHUo54545' \
  -H 'Content-Type: multipart/form-data' \
  -F '[email protected];type=application/pdf' \
  -F 'reference={
  "contact_person": "Dalia Kadoch",
  "email": "[email protected]",
  "phone_number": "7821503357",
  "address": "Heriot House, Heriot Road, Chertsey, KT16 0DT",
  "company_name": "The Big Word",
  
}'

When i tried to submit it from angular my form body look like this and getting error.

    {
     "file" : "tes",
     "reference" : {
  "id": 1,
  "contact_person": "Dalia Kadoch",
  "email": "[email protected]",
  "phone_number": "7821503357",
  "address": "Heriot House, Heriot Road, Chertsey, KT16 0DT",
  "company_name": "The Big Word",
  "document_url": "https://image.com/image.jpeg"
} }

But I am getting json.decode() error from laravel.

json_decode(): Argument #1 ($json) must be of type string, array given"

Sam Herrmann · Accepted Answer · 2022-12-28 17:43:27Z

2

The swagger/curl request is submitting FormData with two fields named file and reference.

From the curl manual:

-F/--form <name=content>

(HTTP) This lets curl emulate a filled in form in which a user has pressed the submit button. This causes curl to POST data using the content-type multipart/form-data according to RFC1867. This enables uploading of binary files etc. To force the 'content' part to be be a file, prefix the file name with an @ sign. To just get the content part from a file, prefix the file name with the letter <. The difference between @ and < is then that @ makes a file get attached in the post as a file upload, while the < makes a text field and just get the contents for that text field from a file.

In your Angular approach, it looks like you are submitting a JSON object with the file and reference fields, but a JSON object is not FormData.

You can learn how to submit FormData in the following Stack Overflow post: How to send form data in a http post request of angular 2?

edited Dec 28, 2022 at 17:43

answered Dec 28, 2022 at 17:22

Sam Herrmann

7,0285 gold badges33 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

majid Over a year ago

Thanks @Sam Herrmann you for helping me and not to mark this question as a duplicate. Most of people just mark ki duplicate.

Collectives™ on Stack Overflow

Error on submit form with data in angular

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related