Uploading Single File To Your Server


#1

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:

Open the forms category and add form:

Then select the form and click the add inside button:

Select File Input Form Group:

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:

Open the forms category and add a button:

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

Save your page and then open the Server Connect panel:

Create new server action:

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

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

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

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

After you import the form fields, right click Steps:

Open File Management category and Add File Upload:

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

Under the Globals > POST > select your file input:

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

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:

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:

Save your server action:

Close Server Connect, and select your form:

Set its method to POST in the properties panel:

And make it a server connect form:

Then click the select server action button:

Select your upload server action and click the select button:

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:

Open the components category and select Notifications component:

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

Select your form, and add new dynamic event:

Select Server Connect and add on Success event:

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

We select the Success Notification and click the add button:

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

Then select the Form Reset action add it also:

Click Select and you are done:

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


WapplerPrevious   WapplerNext



Adding Progress Bar to Upload Form
Inserting Uploaded File Names in a Database
Show Image Preview Before Upload
Wappler Official Documentation
File Management
#2

I have tried this on a local machine uploading to a local folder and it works fine for file less than 26mb. Anything above this and the notification still says uploaded but no files are added to the folder.


#3

Probably you have some restriction set in your server configuration, please check it.


#4

Thank Teodor - you are correct. I forgot about the php.ini file limit - sorry.


split this topic #5

5 posts were split to a new topic: Steps to get multi upload working


#6

Thanks for the tutorial.
Please what happens if the form is a modal form with multiple form control such as this.
image

How many server connect (insert/update) can be placed in a single file


#7

What do you mean?


#8

I saw the tutorial you made about uploading single file to the server.
I have a form with a modal component as attached. Mine has more than one form control as displayed. What is the best way to go about this.

Sidetalk: How many server connect can I have on a single file…

Thanks


#9

And by the way, do you know anyone on this platform that does Freelance…I need help in several ways…


#10

Hi,
You can have multiple Actions be performed such as Upload the file, rename it, re-size, inset an entry in to your DB containing the file name, and then as many other actions before or after. We have found no limit in this regard. For Freelance try @psweb if he has time spare, professional, polite, and a business man (invoices etc). He has a great track record and knows his way around Wappler as well as many other web-technologies.

2019-01-11_19-49-34


#11

It does not matter how many form inputs do you have. You just use them in your insert step.

I don’t understand what you are saying, sorry.


#12

I mean server connect…image …how many can I have in the app structure


#13

You can have as many as you need.


#14

Thanks brad, i hope your account issue on your Mac has been resolved. You are very helpful.


#15

As Brad said, you can have as many server connect components added in your app structure as you need.


#16

Many Thanks Teodor for your excellent job and willingness to assist.


#17

I asked because anytime i do that, I get this error…image , when I deleted the 2nd insert on the modal, the error goes away.
But I will try it again and check what I am missing.


#18

Error 500 means there is an internal server error, so please check: Debugging Problems in order to see what’s the exact error and where it comes from.
Maybe you setup your insert action improperly and it runs on page load instead of on submit the server connect form…