Post form with image not working

[Mennovandijk]

I have a few pages with a simple Server Connect Post form.
The form contains a few input text fields and a file upload item which is not mandatory.

When I post the form with only the (required) text fields the data is being saved in the database.

When I also choose a file to upload I get the response error form the api that the text fields are required.
It seems that no form data is being posted to the server.

Now, I don’t know if this is the correct way to upload a file using a post form in a fw7 project.

Or is there something else not correcty setup?

The same form I have on the website is working as it should.
Perhaps someone knows what might be going on here?

[ben]

I do not know anything about fw7. All I know is that the form needs the following attribute: enctype="multipart/form-data" as in

<form action="" method="post" enctype="multipart/form-data">

It specifies which content-type to use when submitting the form.

[Mennovandijk]

Thanks Ben for your reply,
I probably gave the wrong impression regarding multiple forms.
I mean I have similar forms at various places in the app. It is not a multi-page form

[patrick]

The enctype="multipart/form-data" is required for file uploads, it has nothing to do with multi-page forms, it is how the form data is submitted to the server.

[Mennovandijk]

Oh ok my mistake, keep learning every day
i’ll give it a try

[Mennovandijk]

Still the same problem.
Perhaps this is a clue? @Teodor?

[Teodor]

Well please check:

Debugging Server Connect Errors

You can easily debug issues related to server-side processing such as - form not sending email, record not inserting or updating, query not showing data etc. The first thing you need to do is to open the server connect settings. They are located in the Workflows Panel > Server Actions: [Screenshot 2021-09-27 at 10.02.35] And enable the Debug Mode: [Screenshot 2021-09-27 at 10.03.08] Click Save: [Screenshot 2021-09-27 at 10.03.26] In your browser, open the Developer tools. If you don’t k…

for the exact error message.

[Mennovandijk]

In the preview panel I get the response from the server that the form fields are required.
Nothing more…
Ok, well, I keep digging

[Mennovandijk]

So i tried the following:
I copied the working BS5 form from the website project
Created a new BS5 mobile app and pasted the code to the page.
Adjusted the server connect link to the web api
This produces the same error

[Teodor]

This means the serverside validation is triggered, so there are post variables with these names which receive no value, but have required validation applied.
Are you 100% sure your form input names are the same as the POST variable names? email first_name last_name ?

[Mennovandijk]

Yes 100%
I even got this from my web project where it is also working

[Mennovandijk]

This is only triggered when selecting an image.
When I only update the name, it works

[Teodor]

What are your server action steps? Please post a screenshot, also paste the code of your form.

[Mennovandijk]

The form:

<form id="form_edit_profile" method="post" is="dmx-serverconnect-form" action="https://websitexxx/api/security/update_registered_profile" dmx-on:success="notifies1.success('Changes saved succesfully!')" site=“websitexxx”>
                    <div class="row gx-3 justify-content-center" id="form_row_avatar">
                        <div class="col-6 text-center">


                            <img id="preview_avator" width="150px" height="150px" class="rounded-circle" dmx-bind:src="input_avatar.file.dataUrl" dmx-show="input_avatar.value">
                            <img id="profile_avatar" width="150px" height="150px" class="rounded-circle" dmx-bind:src="sc_user.data.query_basic_info.avatar.replace('/public', '')" dmx-hide="input_avatar.value">

                            <div class="mb-3 text-info" style="position: relative; bottom: 100px; left: 100px;">
                                <label for="input_avatar" style="cursor: pointer;" class="form-label"><i class="fa fa-upload fa-2x"></i></label>
                                <input type="file" class="form-control" id="input_avatar" name="avatar" aria-describedby="input1_help" accept="image/*" dmx-hide="true">
                            </div>
                        </div>
                    </div>
                    <div class="row gx-3">
                        <div class="col">
                            <div class="mb-3 w-100">
                                <label for="inp_email" class="form-label">Email</label>
                                <input class="form-control" id="inp_email" name="email" aria-describedby="input1_help" placeholder="Your email address" readonly="true" dmx-bind:value="sc_user.data.query_basic_info.email">
                            </div>
                        </div>
                    </div>
                    <div class="row gx-3">
                        <div class="col">
                            <div class="mb-3">
                                <label for="inp_first_name" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="inp_first_name" name="first_name" aria-describedby="input2_help" placeholder="Your first name" dmx-bind:value="sc_user.data.query_basic_info.first_name">
                            </div>
                        </div>
                    </div>
                    <div class="row gx-3">
                        <div class="col">
                            <div class="mb-3">
                                <label for="inp_last_name" class="form-label">Last Name</label>
                                <input type="text" class="form-control" id="inp_last_name" name="last_name" aria-describedby="input2_help" placeholder="Your last name" dmx-bind:value="sc_user.data.query_basic_info.last_name">
                            </div>
                        </div>
                    </div>
                    <div class="row gx-3 justify-content-end"><button id="btn1" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapse_password">Change password</button></div>

                    <div class="collapse" id="collapse_password" is="dmx-bs5-collapse">
                        <div class="container">
                            <div class="row">
                                <div class="col col-lg">
                                    <div class="mb-3">
                                        <label for="lbl_password" id="lbl_password" class="form-label">Password</label>
                                        <input type="password" class="form-control" id="inp_password" name="password" aria-describedby="input1_help" placeholder="Enter password">
                                    </div>

                                </div>
                                <div class="col col-lg">
                                    <div class="mb-3">
                                        <label for="lbl_password1" id="lbl_password1" class="form-label">Confirm password</label>
                                        <input type="password" class="form-control" id="inp_password_confirm" name="password_confirm" aria-describedby="input1_help" placeholder="Confirm password">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button id="btn_submit" class="btn btn-warning" type="submit">Save changes</button>

                </form>

[Mennovandijk]

Could it be that the api is triggered while data is still transferring to the server?
In that case the variables have not reached the server yet.
When using the same form on a mobile phone using a web browser, it is also working fine.

[Teodor]

Maybe @patrick can check what’s wrong here.

[patrick]

I don’t see anything wrong with the code, check with devtools if the data is actually correctly send to the server, the error shows a validation error that the email, first_name and last_name are missing in the request.

[Mennovandijk]

Hi @patrick
In Devtools I can see there is data being send to the server. This is from the Headers -> request data panel.

[patrick]

Is it specific iOS or Android where it is not working? The request looks fine and you already told that it works in the browser, so it should be something specific with cordova.

[Mennovandijk]

I am still figuring out why it is not working, but it is both ios and android.

So probably I need to use another way to upload images