Discuss

Uploading Multiple Files To Your Server

On this page

You can upload multiple 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_13|690x382

Open the forms category and add form:

Screenshot_14|690x382

In the form click the add inside button:

Screenshot_15|690x382

And add Multi File Input:

Screenshot_16|690x382

Add some name to your field. Make sure to include [] in the end of the name, just like filesUpload[]:

Screenshot_17|690x382

Then, click the add after button:

Screenshot_18|690x382

And from the forms group select button:

Screenshot_19|690x382

Make sure to change the button type to submit:

Screenshot_20|690x382

Save your page.

Open Server Connect panel:

Screenshot_21|690x382

Click the Add New Server Action button:

Screenshot_22|690x382

Add a name for the server action and click Globals:

Screenshot_23|690x382

Click the folder icon, then browse to your page containing the form:

Screenshot_23|690x382

Select the form in the Form field and click the Import From Form button:

Screenshot_25|690x382

You will see a notification, that N form field(s) have been imported:

Screenshot_26|690x382

Right click Steps:

Screenshot_27|690x382

Open File Management and add File Upload:

Screenshot_28|690x382

Click the dynamic data picker icon (1) for the Upload Field, then select your Multi File field under the $_POST variables and click the Select button (3):

Screenshot_29|690x382

Select the upload path, browse to an upload folder in your site directory and select it:

Screenshot_30|690x382

Then setup the rest of the options. We leave them to their default values:

Screenshot_31|690x382

Save your server action and close Server Connect Panel:

Screenshot_32|690x382

Back on the page, select your form and change its method to POST:

Screenshot_34|690x382

Then click the Make Server Connect Form button:

Screenshot_35|690x382

Click Select Server Action:

Screenshot_36|690x382

And select your multi upload server action:

Screenshot_37|690x382

And you are done. You can select multiple files and they will be uploaded to the selected folder.

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

You can add a notification and reset the form fields, after the files are 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.


WapplerPrevious|101x31   WapplerNext|77x31