Discuss

Uploading Single File To Your Server

On this page

You can upload files to your server using the server side file upload tools available in Wappler.

Let's start with the upload form. We created a simple Bootstrap 4 Layout and it contains a column, so click the add inside button:

Screenshot_1|690x397

Open the forms category and add form:

Screenshot_2|690x397

Then select the form and click the add inside button:

Screenshot_3|690x397

Select File Input Form Group:

Screenshot_4|690x397

This adds a file field in the form. In order to submit the form, we need a submit button, so click the add after button:

Screenshot_5|690x397

Open the forms category and add a button:

Screenshot_6|690x397

Set it's type to SUBMIT in the properties panel:

Screenshot_7|690x397

Save your page and then open the Server Connect panel:

Screenshot_8|690x397

Create new server action:

Screenshot_9|690x397

Add a name for your server action (1), select it and click Globals (2):

Screenshot_10|690x397

Under Global Input Properties select a linked page. Click the browse icon, and browse to your page where you created the upload form:

Screenshot_11|690x397

Then, from the Form menu select your Form name (it will be listed when you click the menu):

Screenshot_12|690x397

Click the import from form button. This will import your form fields to your server action, under $_POST:

Screenshot_13|690x397

After you import the form fields, right click Steps:

Screenshot_14|690x397

Open File Management category and Add File Upload:

Screenshot_15|690x397

Select the expression for the Upload Field, by clicking the dynamic data picker icon:

Screenshot_16|690x397

Under the Globals > POST > select your file input:

Screenshot_17|690x397

Then select an upload folder, browse to it by clicking the folder icon:

Screenshot_18|690x397

You can use a rename Template for the files you upload. You can find the available masks in the tooltip which appears. Leaving the field empty will use the original file name:

Screenshot_19|690x397

Then, you can setup the rest of the options. The only option we enable the Create Path - that means that the upload folder will be created, if it is not existing on the server. Also, by default if a file with the same name is already uploaded, the new one will be made unique by using a suffix, like name_1.jpg so if you want to overwrite existing files, you should enable the overwrite option:

Screenshot_20|690x397

Save your server action:

Screenshot_21|690x397

Close Server Connect, and select your form:

Screenshot_22|690x397

Set its method to POST in the properties panel:

Screenshot_23|690x397

And make it a server connect form:

Screenshot_24|690x397

Then click the select server action button:

Screenshot_25|690x397

Select your upload server action and click the select button:

Screenshot_26|690x397

OPTIONAL - Show a notification and reset form after the upload:

You can add a notification and reset the form fields, after the file is uploaded. Select App in the app structure tree, and click the add new component button:

Screenshot_1|690x397

Open the components category and select Notifications component:

Screenshot_2|690x397

Setup the notification options, like position, align, offset etc. We will use the default options:

Screenshot_3|690x397

Select your form, and add new dynamic event:

Screenshot_4|690x397

Select Server Connect and add on Success event:

Screenshot_5|690x397

Click the dynamic action picker, to select what to happen on success:

Screenshot_6|690x397

We select the Success Notification and click the add button:

Screenshot_7|690x397

Enter the text, that you want to show inside the notification. Make sure to wrap it in single quotes 'my text':

Screenshot_8|690x397

Then select the Form Reset action add it also:

Screenshot_9|690x397

Click Select and you are done:

Screenshot_10|690x397

When the selected file is successfully uploaded, the form fields will be reset and the notification will appear:

Screenshot_11|690x314


WapplerPrevious|101x31   WapplerNext|77x31