414 Be able to download files via custom forms

[dantownsend]

Resolves #414

Remaining tasks:

• Allow file downloads via custom forms
• Add tests
• Add docs

For a future PR:

• Add a streaming file response option for large files

[sinisaos]

@dantownsend I think this is a great feature. I left a couple of comments. Maybe it's for some other PR, but now I noticed that Pydantic validation errors not displayed well in UI.

[dantownsend]

@dantownsend I think this is a great feature. I left a couple of comments. Maybe it's for some other PR, but now I noticed that Pydantic validation errors not displayed well in UI.

That's interesting - definitely needs improvement! Thanks for highlighting it.

[sinisaos]

@dantownsend Our parseErrorResponse utility function works fine, but the problem was in the responseType blob in the axios post request. When we use responseType blob, we need to use the text() method to read the content from the Blob. We need to replace this part of code

piccolo_admin/admin_ui/src/components/FormAdd.vue

Lines 122 to 127 in 0132344

	if (axios.isAxiosError(error) && error.response) {
	this.errors = parseErrorResponse(
	error.response.data,
	error.response.status
	)
	}

with this

if (axios.isAxiosError(error) && error.response) {
    const responseData =
        error.request.responseType === "blob" &&
        error.response.data instanceof Blob &&
        error.response.data.type &&
        error.response.data.type
            .toLowerCase()
            .indexOf("json") != -1
            ? JSON.parse(await error.response.data.text())
            : error.response.data
    this.errors = parseErrorResponse(
        responseData,
        error.response.status
    )
}

After that we displayed the error messages nicely as before.

Hope that helps.

[dantownsend]

@dantownsend Our parseErrorResponse utility function works fine, but the problem was in the responseType blob in the axios post request. When we use responseType blob, we need to use the text() method to read the content from the Blob. We need to replace this part of code

piccolo_admin/admin_ui/src/components/FormAdd.vue

Lines 122 to 127 in 0132344

	if (axios.isAxiosError(error) && error.response) {
	this.errors = parseErrorResponse(
	error.response.data,
	error.response.status
	)
	}

with this

if (axios.isAxiosError(error) && error.response) {
    const responseData =
        error.request.responseType === "blob" &&
        error.response.data instanceof Blob &&
        error.response.data.type &&
        error.response.data.type
            .toLowerCase()
            .indexOf("json") != -1
            ? JSON.parse(await error.response.data.text())
            : error.response.data
    this.errors = parseErrorResponse(
        responseData,
        error.response.status
    )
}

After that we displayed the error messages nicely as before.

Hope that helps.

That's really helpful - thanks!

I wasn't sure what negative effects responseType blob would have - it's required for binary files to download correctly.

[sinisaos]

I wasn't sure what negative effects responseType blob would have - it's required for binary files to download correctly.

@dantownsend Exactly, responseType blob is required to download binaries correctly. With the changes from the previous comment, we downloaded the files correctly and formatted the error messages correctly.

[dantownsend]

OK, I've added the blob -> JSON conversion logic now.

[dantownsend]

I think the PR is done now.

It ended up being huge because I broke down example.py into multiple files because it was getting extremely large.

By breaking it up, it also means I can more easily include chunks of it in the Sphinx docs using literalinclude.

Warning - to run the app locally now, you do python -m piccolo_admin.example.app.

[dantownsend]

@sinisaos Do you see anything else, or am I good to merge?

I know it's a massive PR, with a lot of noise in it.

[sinisaos]

@dantownsend I tried this PR and everything works and looks great. I have nothing to add and I don't see anything that would be a problem. It's great that you split example.py into several files in the example app. It's much more transparent.

[dantownsend]

@sinisaos Cool, thanks a lot - I really appreciate it 👍