There it is: this is the dump from our controller. Click the token link to see the profiler for the POST request.Ĭheck out the Debug tab. But, for some reason, that redirected us to the edit page. Now it's more obvious: Dropzone made a POST request to /admin/article/41/references - that's our upload endpoint. Click the "Last 10" link to see a list of the last 10 requests made into our app. We're looking at the profiler for the article edit page! Look closely: it says that we were redirected from a POST request to the admin_article_add_reference route. This is awesome! We're now looking at all the profiler data for that AJAX request! Actually. The first cool thing is that the file upload AJAX request showed up down on the web debug toolbar! I'll click the hash and open that up in a new tab. $uploadedFile = $request->files->get( 'reference') Public function uploadArticleReference (Article $article, Request $request, UploaderHelper $uploaderHelper, EntityManagerInterface $entityManager, ValidatorInterface $validator) Src/Controller/ArticleReferenceAdminController.phpĬlass ArticleReferenceAdminController extends BaseController To get Dropzone rocking, copy the minified JavaScript file and go to the template Actually, copy the whole script tag with SRI - that'll include the nice integrity attribute. And so, in our edit template, we're including a normal JavaScript file that lives in the public/js/ directory: admin_article_form.js, which holds some pretty traditional JavaScript. But in this tutorial, to keep things simple, we're not using Encore. If you're using Encore, you can do this - and I recommend it. I normally use Webpack Encore, and so, whenever I need a third-party library, I install it via yarn and import it when I need to use it. and when you drop a file here or select a file, it starts uploading. Google for a library called Dropzone: it's probably the most popular JavaScript library for handling file uploads. Installing Dropzoneįirst: the upload part. In fact, over the next few videos, we're going to create a pretty awesome little widget for uploading multiple files, deleting them, editing their filenames and even re-ordering them. I also want my files to start uploading as soon as I select them and I want a progress bar. But if you're inside a form, good luck: unless you do some serious work, none of them will be saved because the entire form was invalid! because I don't like the user experience! What if I select 10 files, wait for all of them to upload, then one is too big and fails validation? If you're not inside a form, you could probably save 9 of them and send back an error. In Symfony, we would then be handling an array of UploadedFile objects, instead of one.īut, I'm not going to show how to do that. It makes sense: instead of uploading files one-by-one, an author should be able to select a bunch at a time! This is something that's totally supported by the web: if you add a multiple attribute to a file input, boom! Your browser will allow you to select multiple files. One request that I heard over and over again was: handling multiple file uploads at a time. which, by the way - thank you! That was awesome! Your requests absolutely helped drive this tutorial. When I started creating this tutorial, I got a lot of requests for things to talk about.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |