"file upload" hide "file list" AND crop photo

Ask us anything How do I?
1

hello Wewebers.

1. is there any way to hide “file list”?

I will be uploading the file directly to Xano and use my own button and workflow to call for Xano API request for file delete.

as the native “remove button” doesn’t allow its own workflow and since I am using my own button I have no need for the file list.

I tried reduced the size of the “remove button” to 0 but it is still showing the “x”.

image
image644×285 36.8 KB

2. how to allow users to crop photo?

and is there away to users to crop photo at the front end level?

2

Hi Dom :waving_hand:

Love the “Wewebers” haha

As for your question.

You might be able to remove the file list if you fork the upload element and ask ai to edit it for you.

As for cropping, not a lot of members have asked about it, but I heard someone figured it out by using photopea as an iframe

3

You could use ImageKit.io and send the file direct from the front end then do the transform then import the file into xano (or leave it in imagekit). There are smart-crop options I think in imagekit. Xano strips metadata and cant do transforms on signed urls so there is benefit to using a DAM like imagekit. You can do the imagekit upload from a workflow and javascript can be generated by Claude or other tool.

For the native remove “x” button - if you don’t fork the component there is a slight workaround where you can trigger the workflow on a change which is triggered by this button as well as an upload. So then in the workflow you check if the file was removed and run whatever logic. I use this to know if i need to remove a file from the backend after it’s been stored

I would also like an option on the component to not have the list. The old version could be setup that way

4

Thanks Agustin, I have managed to hide it by fixing the height just enough to hide the file list and set the overflow to hidden.

5

Thank you Matto, will check out ImageKit.io

6

I’ve also heard firsthand from our developers that we are working on a direct parameter to hide the file list :eyes:

But there’s no ETA for it being released, so I’m happy you managed to hide with your own method.