How to change upluad button witth CSS “File Upload” to look like [RESOLVED]

[user61086a4ec00f9639 (Tom Martin)]

I have previous opened about how to change button,

How to change upluad button witth CSS "Post Image" to look like

Hello, in form i added post image button but as there are allot text or even in mobile phones this button is not very good to find. I looking how to make it bigger, change text and background color and add icon. Now it look like this [Screenshot 2023-01-09 200802] to something like this with icon [Screenshot 2023-01-09 201818]

I was suggested to change it to “File Upload” rather image upload. So I changed but until now I cant not find god solution to make this button look like this
now it is

I need to look like this

Can you please help me to make it look like I do not found good example, as im not good in coding and samples not hawae enough info for me.
So can you please help me here
I need it as in sample it can be without image of the camera, Just blue with text

[chrishajer (Chris (Gravity Forms))]

Enable the multi-file upload feature for the file upload field:

Screenshot on 2023-06-01 at 10-05-19.png

You can limit the field to just one file if you like.

[user61086a4ec00f9639 (Tom Martin)]

@user61086a4ec00f9639

look like this

My question was not about how to activate, but how to make look like blue one button?
I want blue button with text as in sample.

[chrishajer (Chris (Gravity Forms))]

Hi Tom. If you are using the multi-file upload field, your upload button will not look like this: https://global.discourse-cdn.com/business7/uploads/gravityforms1/original/2X/4/430d18bfada0353aa8b1d2db77feafa3799c1630.png

That is the browser file upload control.

If you enable the multi-file feature, you will have more control over the HTML of the button. You can use the gform_file_upload_markup filter as I explained here:

How to change upluad button witth CSS "Post Image" to look like

Hello. The Post Image field uses the browser dialog for the button, so a button like you showed will not be possible there. The multi-file upload field offers a more customizable button that looks like this by default: That button can be customized with a filter: Using that filter won’t put the image in the Media Library by default though. If you wanted to use that type file upload field instead, you would need to perform some additional steps to associate the upload with the post, or mo…

You will need to create your own CSS and HTML to style the button like that, using this filter.

If you have any other questions, please let us know.

[user61086a4ec00f9639 (Tom Martin)]

Hello Yes it is multi upload now only picture from old question. Can you help me with that code?

[user61086a4ec00f9639 (Tom Martin)]

At the end I found my mistakes and solutions
. When selecting “File Upload” I didn’t select Multi File Upload so I didn’t see the button, after that the design of the selection changed, but I didn’t like the button because it was long, so I added this code

body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_fileupload .gform_button_select_files {color: red;
width: 220px !important;
color: white !important;
background-color: #B22234 !important;
border-radius: 8px !important;}

Now it looks like this