"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.

7

Hi! I have the same issue. I need to remove the list of uploaded files. Unfortunately, when I try to edit this component using AI, I get a message saying the element is too large to modify. I was able to hide it by adjusting sizes and other tweaks, but that’s not really the approach you’d expect.

Also, I don’t see the delete button for uploaded files. This might be because I removed the pre-installed icon library from the project. Unlike other components, it’s not possible to choose a new icon for this action.

image
image428×358 14.6 KB

We’re really looking forward to having more customization options for the “File Uploader” component!

It would be great to have the option to make the uploader just an uploader with a background image, not only with text. That way, we could create something like this:

image
image512×463 53.3 KB

1 Like
8

Curious how the component updates are going. Also wanted to throw in the mix a feature to enable the capture environment option for android. I’m finding it’s not providing option to take a picture on android by default but is ok on ios.

If someone knows a workaround happy to have the help. I’m guessing the next step would be to fork and customize but i’ll avoid that if possible

9

+1 here