Custom field passes local path to javascript render function instead of public url

[regisin]

Describe the bug
I am creating a custom field that renders an <audio> in the list view, I followed the instructions in the advanced guide. However, in the frontend, it seems that when mapping the urls, the script is passing the local storage path, instead of the url/cdn of the file. The console in the browser shows a message like this:

Uncaught TypeError: URL constructor: tmp\storage\audio\cd5f90df-e9d4-4fbe-b007-d5a08334d4ba is not a valid URL.

Here are my custom classes:

@dataclass
class AdminAudioField(BaseField):
    render_function_key: str = "audio"

class Admin(BaseAdmin):
    """This class extends the functionality of starlette-admin. It enables rendering audio tags in the admin panel."""
    def custom_render_js(self, request: Request) -> Optional[str]:
        return request.url_for("static", path="js/audio_render.js")

class UserView(ModelView):
    fields = ["id", "name", "email", AdminAudioField("audio")]

And audio_render.js:

Object.assign(render, {
  audio: function render(data, type, full, meta, fieldOptions) {
    if (!data) return null_column();
    if (Array.isArray(data) && data.length == 0) return empty_column();
    data = Array.isArray(data) ? data : [data];
    if (type != "display") return data.map((d) => new URL(d.url));
    return `<div class="d-flex flex-column">${data
      .map(
        (e) =>
          `<audio controls="">
            <source src="${new URL(e.url)}" type="audio/*">
          </audio>`
      )
      .join("")}</div>`;
  },
});

To Reproduce
This issue is not just with the custom renderer. You can reproduce by passing any existing function key to the custom field and not use custom JS at all:

class AdminAudioField(BaseField):
    render_function_key: str = "file"

class MyView(ModelView):
    fields = [AdminAudioField("audio")]

And still triggers the exception:

Uncaught TypeError: URL constructor: tmp\storage\voice\cd5f90df-e9d4-4fbe-b007-d5a08334d4ba is not a valid URL.
    render http://localhost:8000/admin/statics/js/render.js:101
    render http://localhost:8000/admin/statics/js/render.js:99
    render http://localhost:8000/admin/statics/js/list.js:62
    get http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    fnGetData http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    S http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    St http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    x http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    It http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    xt http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    e http://localhost:8000/admin/statics/js/vendor/dt.min.js:31
    success http://localhost:8000/admin/statics/js/list.js:318
    jQuery 4
[render.js:101:23](http://localhost:8000/admin/statics/js/render.js)

Environment (please complete the following information):

• Starlette-Admin version: 0.11.2
• ORM/ODMs: [SQLAlchemy, sqlalchemy-file, sqlite]

Edit
Bumped to starlette-admin==0.12.2 and the bug persists.

[jowilf]

You should extend sqla.fields.FileField, not the BaseField.

Note: It's always best to extend the existing fields instead of overriding the BaseField. When you extend the BaseField you should follow all the steps described in the documentation

Edit:
sqlalchemy-file saves the result of object.get_cdn_url() into the url attribute. This function returns the file path for local storage and cannot be directly used in the render function.

[regisin]

Alright, that worked, just had to from starlette_admin.contrib.sqla.fields import FileField.

I'd like to point out that it is not very obvious from the documentation! The docs say that there are tons of fields, but we can create our own, not really saying that by extending an existing field, but only by extending the BaseField!

Also, there is starlette_admin.fields and there is starlette_admin.contrib.sqla.fields. What is the difference?

Anyway, the issue has been solved, this could be a discussion if you want to! Thanks! :)

[hasansezertasan]

Alright, that worked, just had to from starlette_admin.contrib.sqla.fields import FileField.

Sometimes I import FileField from starlette_admin.fields instead of starlette_admin.contrib.sqla.fields when using SQLAlchemy. It's a developer induced error. I'm still making that mistake which I read the entire documentation and I even translated it into Turkish language. And also I've been playing with the source for some time...

I'd like to point out that it is not very obvious from the documentation! The docs say that there are tons of fields, but we can create our own, not really saying that by extending an existing field, but only by extending the BaseField!

Documentation requires some improvements, you're right about that.

Also, there is starlette_admin.fields and there is starlette_admin.contrib.sqla.fields. What is the difference?

Some fields are dedicated or further configured to the related contrib like FileField is further configured for sqla contrib. I believe we could say that fields inside starlette_admin.fields are common fields and fields inside starlette_admin.contrib.x.fields are dedicated fields to x.