Discourse toolkit to render forms

[merefield (Robert)]

Yes that might work. I’ll give that a try.

I guess I was looking for a “framework-native” option but this is definitely a totally reasonable alternative. Thanks.

[merefield (Robert)]

@system

Image

Renders an <UppyImageUploader /> component.

Upload Handling

By default, the component will set an upload object. It’s common to only want the URL and the ID of the upload. To achieve this, you can use the @onSet property on the field:

@action
handleUpload(upload, { set }) {
  set("upload_id", upload.id);
  set("upload_url", getURL(upload.url));
}

<Form as |form|>
  <form.Field
    @name="upload"
    @title="Upload"
    @onSet={{this.handleUpload}}
    as |field|
  >
    <field.Image />
  </form.Field>
</Form>

This example is giving me this error:

validateConfig - uppy-upload.js:80:12

Error: Missing required UppyUpload config: type

Uncaught (in promise) Error: Missing required UppyUpload config: type
    validateConfig uppy-upload.js:80
    UppyUpload uppy-upload.js:113
    js uppy-image-uploader.gjs:32
    UppyImageUploader uppy-image-uploader.gjs:23
    createComponent base-component-manager.js:26
    Ember 2
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:98442
    Ember 12
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:100412
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:102123
    Ember 34
    show modal.js:73

I suspect <field.Image /> requires a @type argument

[merefield (Robert)]

So things with image upload get yet more curious.

Sometimes when opening a file dialogue box to upload an image using a form control, I get this error:

selectedText - utilities.js:137:25
TypeError: ancestor is null

 const postMenuArea = ancestor.querySelector(".post-menu-area");

    <form.Field
      @name="upload_url_1"
      @title="Upload"
      @onSet={{this.handleUpload}}
      as |field|
    >
      <field.Image @type="branding"/>
    </form.Field>

This is especially curious because my Form is on a Modal which hasn’t anything to do with Posts.

Everything ends up working, it’s just slightly ugly on the browser console.

Cheers!

[pfaffman (Jay Pfaffman)]

@awesomerobot

I think the Form import was wrong, so I’ve updated OP

But you didn’t update the OP or it got reverted. And I lost another more-time-than-I-care-to-admit figuring that out.

@system

Here is the most basic example of a form:

import Component from "@glimmer/component";
import { action } from "@ember/object";
import Form from "discourse/form";

These guides are in github? Right? If so, could they link to github?

[awesomerobot (Kris)]

Ah yes, I didn’t realize this topic was generated from our documentation repo so it got reverted and I never followed-up… there’s a proper fix incoming now

[pfaffman (Jay Pfaffman)]

Thanks!

And another fix would be to make a theme component to the source so that you can’t be tricked into making the change in the wrong place again and I could submit a PR.

[david (David Taylor)]

@pfaffman

can’t be tricked into making the change in the wrong place again

We do hide the edit button on Documentation > Developer Guides topics, but I think people get around it by using the keyboard shortcuts or quick edit. More things to hide/disable!

@pfaffman

I could submit a PR.

We have this at the bottom of every doc, with a link to the source file. So that’s probably the best thing to use if you want to make a PR:

@system

This document is version controlled - suggest changes on github.

[pfaffman (Jay Pfaffman)]

@david

but I think people get around it by using the keyboard shortcuts or quick edit.

Ah. Makes sense. Also, often rules don’t apply to admins.

@david

We have this at the bottom of every doc

Wait. What?

@system

This document is version controlled - suggest changes on github.

Oh. Oops. It is in tiny letters, but now that I see it, I to remember seeing it before.

I’ve made some more progress this time. I’m doing a bunch of fairly custom stuff (like I need to trigger some text that’s displayed when entering a field) that may keep me from being able to use it.

Any idea how I can trigger a function when entering a field? (Use case, when you enter the Digital Ocean API key field, I have text show up that describes how to get the API key).

EDIT: Why, yes. Dear https://ask.discourse.com/ was able to tell me! It’s painfully obvious once you know.

import { on } from "@ember/modifier";
...
  @action
  hostnameClicked(event) {
    this.setHelpText(i18n("pfaffmanager.help.hostname"));
  }
...
            <field.Input @type="text" {{on "click" this.hostnameClicked}} />