Chapters
43 Chapters
|
5:00:38
|
This course is archived!
While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).
Login to bookmark this video
-
Course Code
Subscribe to download the code!Compatible PHP versions: ^7.2.0
Subscribe to download the code!Compatible PHP versions: ^7.2.0
-
This Video
Subscribe to download the video!
Subscribe to download the video!
-
Subtitles
Subscribe to download the subtitles!
Subscribe to download the subtitles!
-
Course Script
Subscribe to download the script!
Subscribe to download the script!
31.
The POST Create API
Scroll down to the script below, click on any sentence (including terminal blocks) to jump to that spot in the video!
Subscribe to jump to this part in the video!
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
While the concepts of this course are still largely applicable, it's built using an older version of Symfony (4) and React (16).
What PHP libraries does this tutorial use?
// composer.json
{
"require": {
"php": "^7.2.0",
"ext-iconv": "*",
"composer/package-versions-deprecated": "^1.11", // 1.11.99
"doctrine/annotations": "^1.0", // v1.8.0
"doctrine/doctrine-bundle": "^1.6", // 1.9.1
"doctrine/doctrine-cache-bundle": "^1.2", // 1.3.3
"doctrine/doctrine-fixtures-bundle": "~3.0", // 3.0.2
"doctrine/doctrine-migrations-bundle": "^1.2", // v1.3.1
"doctrine/orm": "^2.5", // v2.7.2
"friendsofsymfony/jsrouting-bundle": "^2.2", // 2.2.0
"friendsofsymfony/user-bundle": "dev-master#4125505ba6eba82ddf944378a3d636081c06da0c", // dev-master
"phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
"sensio/framework-extra-bundle": "^5.1", // v5.2.0
"symfony/asset": "^4.0", // v4.1.4
"symfony/cache": "^3.3|^4.0", // v4.1.4
"symfony/console": "^4.0", // v4.1.4
"symfony/flex": "^1.0", // v1.21.6
"symfony/form": "^4.0", // v4.1.4
"symfony/framework-bundle": "^4.0", // v4.1.4
"symfony/lts": "^4@dev", // dev-master
"symfony/monolog-bundle": "^3.1", // v3.3.0
"symfony/polyfill-apcu": "^1.0", // v1.9.0
"symfony/property-access": "^3.3|^4.0", // v4.1.4
"symfony/property-info": "^3.3|^4.0", // v4.1.4
"symfony/serializer": "^3.3|^4.0", // v4.1.4
"symfony/swiftmailer-bundle": "^3.1", // v3.2.3
"symfony/twig-bundle": "^4.0", // v4.1.4
"symfony/validator": "^4.0", // v4.1.4
"symfony/yaml": "^4.0", // v4.1.4
"twig/twig": "2.10.*" // v2.10.0
},
"require-dev": {
"easycorp/easy-log-handler": "^1.0.7", // v1.0.7
"symfony/debug-bundle": "^3.3|^4.0", // v4.1.4
"symfony/dotenv": "^4.0", // v4.1.4
"symfony/maker-bundle": "^1.5", // v1.5.0
"symfony/phpunit-bridge": "^4.0", // v4.1.4
"symfony/stopwatch": "^3.3|^4.0", // v4.1.4
"symfony/var-dumper": "^3.3|^4.0", // v4.1.4
"symfony/web-profiler-bundle": "^3.3|^4.0", // v4.1.4
"symfony/web-server-bundle": "^4.0" // v4.1.4
}
}
What JavaScript libraries does this tutorial use?
// package.json
{
"dependencies": {
"@babel/plugin-proposal-object-rest-spread": "^7.12.1" // 7.12.1
},
"devDependencies": {
"@babel/preset-react": "^7.0.0", // 7.12.5
"@symfony/webpack-encore": "^0.26.0", // 0.26.0
"babel-plugin-transform-object-rest-spread": "^6.26.0", // 6.26.0
"babel-plugin-transform-react-remove-prop-types": "^0.4.13", // 0.4.13
"bootstrap": "3", // 3.3.7
"copy-webpack-plugin": "^4.4.1", // 4.5.1
"core-js": "2", // 1.2.7
"eslint": "^4.19.1", // 4.19.1
"eslint-plugin-react": "^7.8.2", // 7.8.2
"font-awesome": "4", // 4.7.0
"jquery": "^3.3.1", // 3.3.1
"promise-polyfill": "^8.0.0", // 8.0.0
"prop-types": "^15.6.1", // 15.6.1
"react": "^16.3.2", // 16.4.0
"react-dom": "^16.3.2", // 16.4.0
"sass": "^1.29.0", // 1.29.0
"sass-loader": "^7.0.0", // 7.3.1
"sweetalert2": "^7.11.0", // 7.22.0
"uuid": "^3.2.1", // 3.4.0
"webpack-notifier": "^1.5.1", // 1.6.0
"whatwg-fetch": "^2.0.4" // 2.0.4
}
}
8 Comments
there Awesome post as usual! BTW I'm Premium user now! :) I have a not-so easy question in regard to UUIDs. I just wonder how you would recommend storing UUIDs as primary keys and whether you would know of any performance issues using UUIDs as primary keys. It sounds awesome but it's 128bits compared to 32bits auto incremented IDs. Any tips? For example, does Postgres handle it better than mySQL? Any resources that may guide us to use UUID (or anything similar) as primary keys? Thank you!
Hey Anthony R.
Congrats on being a premiun user!
About your question. I found this very interesting article about incremental ID's vs UUID's https://medium.com/@Mareks_082/auto-increment-keys-vs-uuid-a74d81f7476a
you may want to read it
If you are using MySql and Doctrine 2, this is how you can use UUID's as primary key
Cheers!
Hi Ryan, great course on React and Symfony 4! I followed it closely and applied the structure to my own app. I have a simple form for adding city names to a database. Everything is fine until I try to upload images for each city. I am struggling for hours to solve this and I can't, searched for a solution but nothing seems to work. I modified the newRepLogAction controller and read data like this: $data = $request->getContent(), but I always get 400 bad request from if (!$form->isValid()) . I suppose I don't need JSON anymore. I also modified the way I send the form data:
const formData = new FormData();
formData.append("field-name", cityName);
formData.append("file-field-name", cityImage);
and the fetch call:
return fetchJson('url', {
method: 'POST',
body: formData
});
In the profile I have this error: "This value is not valid" caused by: "ConstraintViolation" and "TransformationFailedException". Can you explain us in a few words how is different the file upload ? Thanks.
Hey Remus M.!
Excellent question! I have few points / questions that will hopefully help you out!
1) Where does the cityImage variable come from exactly? Are you reading it from the file input?
2) If you're sending data using FormData, then I believe that this looks like a normal "form submit" to Symfony. In other words, no, you're not sending things via JSON, and so you will not be reading things via
$request->getContent(). Instead, you'll be reading things from the POST fields directly - e.g. $form->request->get('cityName'). However, if you're using the form system, then using $form->handleRequest($request) may not work either (depends on your setup) as Symfony forms usually expects your POST data to be under a namespace - e.g. field named like product[field-name] - not just field-name. However, the error you're getting doesn't quite make me think this is the problem.3) When you submit, if you
dump($request->files->all())what does it look like?Basically, for the form upload to work, we need to make sure that the data is being sent up to the server correctly, and that we're finding it in the correct location. In general, the "This value is not valid" is being caused by a "data transformer" on one of your fields (you can see exactly which field in the profiler - it may be attached to the "top level form" or a specific field - and exactly where the field is attached is important). Basically, many field types have built in "sanity" validation - and this is the validation error you're using. For example, if you have a "date" input field, and you submit a string that is not a valid date, you would see this error. In your case, it's a signal that some data is not being sent or received correctly. Again, exactly which field (or it could be on the form itself) has this error is important.
By the way, in a true JSON API, file uploads can be handled in a variety of different ways, but here are a few common examples:
1) Make an endpoint where you literally send ONLY the contents of the file as the entire body of the request. Then, $request->getContent() is literally the file contents. It's kind of a pure "API" endpoint to send data for single file. But, you can only send that one thing - you can't send 10 pieces of data, where 1 of them is a file.
2) Send a JSON string like normal, but for the "cityImage" field, make it be the base64 encoded content of your file. On the server, read this, base64 decode it and... you've got your file! You can see an example of this in GitHub's API: https://developer.github.com/v3/repos/contents/#create-a-file
Let me know what you find out - I hope this helps :).
Cheers!
I have tried the first solution and it works if I acces the file like this:
$data = $request->files->all();
dump($data["field-name"]); // object with all the file info
$request->getContent() is empty.
Thank you for help.
Yo Remus M.!
Hmm, interesting! Well, it all depends on exactly *how* your JavaScript upload code looks, but if you've got it working, GREAT!
Cheers!
At the end a this chapter, when I delete a replog, I have this error :
SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
This is normal. The solution will solve into 35 chapter.
Yep - sorry about that Stephane! This was an accident actually - I didn't discover my mistake until that chapter :).
"Houston: no signs of life"
Start the conversation!