useTransition in a Neat, Reusable Module

Once again, GRrrrreat tutorial! I was very sceptical about Stimulus at first, but it's kinda fun and allows developing reactive applications faster.

Thanks for that great tuto!

Cheers!

Hey Julien,

Fairly speaking, me too! But yeah, when you give it a try - you'll start to like it :) Thank you for your feedback and interest in SymfonyCasts tutorials! ;)

Cheers!

Hello,

I have a problem that I can't solve. I am using dropzone UX for adding and editing media on my project.
For when editing your media, I would like to have the media preview by default instead of drag and drop. I can't find a way to use the targets generated by dropzone UX in my controller. Do you have a method to do this?

thanking you in advance.

Hey Jimmy!

Hmm. Is this "media preview" something you're building by hand? Or are you referring to the little preview that you normally see after dragging/dropping a file onto the dropzone? And, do you still want the dropzone - but also the preview? Or just the preview?

Anyways, to your real question:

I can't find a way to use the targets generated by dropzone UX in my controller. Do you have a method to do this?

Hmm. Indeed, there's not an way to access those targets, as we don't expose them in the events and we also don't give you access to the underlying Dropzone controller instance from the event. However, there are some strategies on this page for accessing one Stimulus controller from another - https://www.betterstimulus.com/interaction/controller-dom-mapper.html

Assuming you can get access to the dropzone controller, then, in theory, you could say dropzoneController.previewImageTarget.

Let me know how it goes - this makes me feel like there is something missing that could make this easier to do.

Cheers!

Hello Weaverryan,

Indeed, I am referring to the small preview when dragging and dropping.

I find it unfortunate when editing a post not to have a preview of the image already in place using ux_dropzone. I'll try to see with the leads you provided me.

Cordially.

Hello all. And thank you very much for this tutorial.
I am French speaking and I use google translate to translate.
I followed this training until the end and it's very cool for someone like me who is a backend coder.
However, I have a concern with UX-Dropzone. In fact I am on a Symfony 5.4 project and for a form in my app, I loaded the 2.6.1 version of ux-dropzone. I have followed the documentation on the subject end to end but, when I post my form after dragging and dropping a file, I get a 422 error. Need help.
Thanks in advance.
`
My formType

<?php

namespace App\Form;

use App\Entity\SourceReference;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\UX\Dropzone\Form\DropzoneType;

class SourceReferenceType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('filename', DropzoneType::class, [
            'attr' => [
                'data-controller' => 'dropzone-form',
                'placeholder' => 'Drag and drop a file or click to browse',
            ],
            'label' => false,
        ])
    ;
}

public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults([
        'data_class' => SourceReference::class,
    ]);
}
}

My controller

/**
   * @Route("_{id}/reference", name="app_source_reference", methods={"GET", "POST"})
*/
public function sourceReferenceUpload(
    SourceCategory $category,
    Request $request
): Response {
    $source = new SourceReference($category);
    $form = $this->createForm(SourceReferenceType::class, $source);
    $form->handleRequest($request);

    if ($form->isSubmitted() && $form->isValid()) {
        if ($request->isXmlHttpRequest()) {
            return new Response("I'm in!", 204);
        }

        return $this->redirectToRoute('app_source_reference', [
            'id' => $category->getId()
        ]);
    }

    $template = $request->isXmlHttpRequest() ? '_form.html.twig' : 'index.html.twig';

    return $this->render('source_reference/' . $template, [
        'category' => $category,
        'form' => $form->createView()
    ], new Response(
        null,
        $form->isSubmitted() ? 422 : 200
    ));
}

My dropzone-form_controller.js file

import {Controller} from "@hotwired/stimulus";
import $ from "jquery";
import {useDispatch} from "stimulus-use";

export default class extends Controller {
    static targets = ['dropzoneBody'];
    static values = {
        formUrl : String
    }

connect()
{
    useDispatch(this, {debug: true});
}

async submitForm(event)
{
    event.preventDefault();
    const $form = $(this.dropzoneBodyTarget).find('form');

try {
    await $.ajax({
        url: this.formUrlValue,
        method: $form.prop('method'),
        data: $form.serialize()
    })
    this.dispatch('success')
} catch (e) {
    this.dropzoneBodyTarget.innerHTML = e.responseText
}
}
}

`

Hey Diarill,

The 422 error means that you got a validation error, could you show it to me, please? It's hard to spot what's wrong in your code, apparently, it looks fine

Cheers!

Hello MolloKhan and thank you for answering me.
Below the error I am getting
`

Symfony\Component\Validator\ConstraintViolation {#1471 ▼
  -message: "This value should not be blank."
  -messageTemplate: "This value should not be blank."
  -parameters: [▼
    "{{ value }}" => "null"
  ]
  -plural: null
  -root: Symfony\Component\Form\Form {#1180 ▶}
  -propertyPath: "data.filename"
  -invalidValue: null
  -constraint: Symfony\Component\Validator\Constraints\NotBlank {#930 …}
  -code: "c1051bb4-d103-4f74-8988-acbcafc7fdc3"
  -cause: null
}

`

Ohh, the file field it's empty. You'll need to tweak your JavaScript code because you're using Dropzone (I overlooked that fact). Here you can see how Ryan implements file uploading via Dropzone https://symfonycasts.com/screencast/symfony-uploads/dropzone
I recommend watching the next chapter as well.

I hope it helps. Cheers!

Hello MolloKhan. Sorry to respond late. I was traveling.
The suggestion you made for me to look at how Ryan implements file upload with dropzone, I understand it perfectly. However, I encountered small problems with this way of doing things, in particular, doing the pagination, and the localization for the download URLs of the uploaded files. These are the reasons that lead me to change and stimulus seems interesting to me as an approach. Except that I'm not very comfortable with front-end-oriented languages ​​yet. I had time to read some jquery articles and I could see that there was a difference between Serialize() and FormData(). the Serialize() function allows you to post forms that do not contain file type fields, but FormData() allows it. I think that's where my problem lies. Now the difficulty lies in how to redo my code in the 'dropzone-form_controller.js' file by integrating FormData() rather than Serialize(). Thank you for your support.

Hi,

Could you please advise what's the best practice to use nested/child targets of parent target?

For example i have menu items, each item (wrapper) contain link and list.
I could add data-main-menu-target="menuItem" to each of parent items and then iterate over them in controller loop using this.menuItemTargets.forEach(...)

But what's the best practice to find menu-item-link and menu-item-list for each menu-item target per each loop iteration?

In general i could add add targets also for those elements, e.g. menuItemLink & menuItemList, but how then i could select them from parent menuItem target, Is it possible to do something like "this.menuTarget.find(this.this.menuListTarget)"?

To visualise the structure is the following:

data-controller="main-menu"
    data-main-menu-target="menuItem"
        data-main-menu-target="menuLink"
        data-main-menu-target="menuList"
    ....
    data-main-menu-target="menuItem"
        data-main-menu-target="menuLink"
        data-main-menu-target="menuList"
    ....

How then select "menuLink" for certain "menuItem" target on each loop?

Thanks!

Hi again @Kirill!

Hmm, that's an interesting question!

Is it possible to do something like "this.menuTarget.find(this.this.menuListTarget)"?

I totally get what you're saying here. Unfortunately, I don't think that's possible. So I don't think there's a silver bullet here. I see two options:

A) For menuLink and menuList, you handle it by yourself: use CSS classes, and then use normal selectors. So, once you've used the menuItem target to find the menuItem you want, you would then do menuItem.querySelector('.menu-link'). Not a Stimulus solution, but it's pretty simple and it's nice to be able to "back out" and do things manually if you need to.

B) I'm not sure what your overall Stimulus controller is meant to do, but it's possible that there should be a menu-item controller that lives on the menuItem target. Depending on what you're trying to accomplish, that could replace the main-menu controller or, more likely (because I'm assuming you are doing some "work" on the top level main-menu where you want to be aware of all of the "items"), in addition to the main-menu controller. With this setup, your main-menu controller could loop over the menuItem targets and, in each one, directly use its underlying controller instance - even calling methods on it. This is not something I showed on the tutorial, but it's not an uncommon pattern: you would expose the "controller instance" of the "menu-item" controller on its element - e.g. https://www.betterstimulus.com/interaction/controller-dom-mapper.html (the big difference in that example is that both of the controllers are on the same element - so adjust accordingly).

Let me know if either of these sound good. The best answer really depends on what you want to accomplish.

Cheers!

Hi,

A) Yeap, seems that using simple CSS class inside the target element is not too bad and really simple.
We could even add sub-targets (CSS classes) to controller values to not hardcode them.

B) That's interesting, I will hold this in mind for more complex controllers, thank you for reference!

Thanks for reply!
I really appreciate your time for supporting as well as for high quality tutorials!

Hi,

Thanks for awesome tutorial, stimulus is really amazing and you tutorials the best as always!

I found that your PR was removed later in this commit: https://github.com/afcapel/...

They had replaced "skipHiddenProperty" with set hide getter and setter (that were later renamed to get/set resultsShown)

So what's now the correct way to avoid hiding results element?
It's to Extend 3rd part "autocomplete" controller and override this setter (leave it empty) to avoid setting hide on the element at all and then use your custom/overrided controller name in HTML data-controller attr?

Is that the right way to use their idea why they removed property and created methods?

Thanks!

Hey @Kirill!

Thanks - I'm happy it was useful!

They had replaced "skipHiddenProperty" with set hide getter and setter (that were later renamed to get/set resultsShown)

Hmm, yes, I thought this might happen - thank you for pointing that out.

It's to Extend 3rd part "autocomplete" controller and override this setter (leave it empty) to avoid setting hide on the element at all and then use your custom/overrided controller name in HTML data-controller attr?

I need to play with the new code (so we can add a proper note to the tutorial), but yes, this is generally the idea. The code should actually look just like what the author suggested: https://github.com/afcapel/stimulus-autocomplete/pull/82#issuecomment-968332706 - you DO need to keep track of if the element is hidden or not, but you do it by setting a new _isHidden property, instead of actually hiding the element.

and then use your custom/overrided controller name in HTML data-controller attr?

Exactly. You should be able to point to YOUR custom controller ONLY. Then, due to inheritance, you'll get all the autocomplete magic, but with the overridden methods :).

If you get something working, I'd love to know!

Cheers!

For other's looking, I finally got a chance to look at this in more detail. IF you're using the latest version of stimulus-autocomplete (which requires @hotwired/stimulus 3 and the ^0.50.0-2 of stimulus-use or higher), then here is how to get our example working. It's actually quite a bit simpler now: https://gist.github.com/weaverryan/b5e24b429a4c129f336dbb7b70b353a0 - or check out the "diff" from our code in the tutorial: https://gist.github.com/weaverryan/b5e24b429a4c129f336dbb7b70b353a0/revisions#diff-d20275d811dfd8cb0706be57a23f4888912d34fe11a762f5ab9e22228ec8f1dd

Cheers!

Hi Ryan, Thank you for the code gist. Would be good to update/mention in video this one.
Personally I like previous custom code more. As now with mixed inheritance and configuration how is now extended this Autocomplete package, this also merged together functionality and design decisions in one controller. UX and UI together throwing away all the benefits of events and separate code for design decisions.
Frankly without using events, listeners (data-action) and just extending that controller, I am feeling like throwing everything away for what the Stimulus is here for.

Hi again! Got it, thanks for reply! :)

I was very sceptical about Stiumulus at first.

I am coming from the alpine.js side and I`ve done a lot even complex stuff with it in the last year.

But you totally convinced me. I love stimulus ;) and I love your tutorials. I can totally see, why you decided to use that hotwire ecosystem.
I can't wait for the turbo one.

Good job Ryan! Thanks for your efforts.

Hey Michael B.!

Ah!!! This is awesome - and I'm so honored. Alpine is a very powerful system - so I'm even happier that you like Stimulus (I also much prefer its approach).

And Turbo is... starting today!

Cheers!

Hi, great tutorial ! Is there a way to create a height animation with stimulus use ? The only way I see it is to create a max-height animation

Hey upmwqn!

I haven't tried this yet, but since we're using CSS transitions, the trick to this is to find the CSS needed for such a transition. For example, here's an answer - https://stackoverflow.com/q... - and corresponding Fiddle: http://jsfiddle.net/b62soqdv/

You would need to adjust the styles to fit into the classes used for the transitions, of course :). Try it out and let me know if you hit any problems.

Cheers!

Hooray!

Thanks for great tutorial!

Hey Tien!

Thank you for interest in SymfonyCasts tutorials and your feedback, we're really happy to hear it!

Cheers!

Hi Ryan, I have a project in Symfony 4.3 and I can't update at the moment. Is there any possibility of including stimuli in that project?
I have updated the version of the webpack encore to 1.1.2
but it gives me an error when compiling.

Thanks for a nice tuto!

Hey Alberto,

In theory it should work, you just need to upgrade your webpack encore bundle to the latest. But it requires at least Symfony 4.4. If you're on Symfony 4.3 - it should be an easy upgrade to 4.4 for you, most probably you won't need to do anything special with your code as no BC breaks should be introduced there.

Sorry, can't say more without the seeing the error you have.

Cheers!