Upload a file to your server
An upload form and server action with a named file input, destination and result to verify.
Upload one selected file and inspect the returned file information.
Also called: upload file, single file upload, file input, multipart.
Before you begin
Section titled “Before you begin”- A server project with a writable upload destination. The tour opens the Files example in Demo Projects HQ.
- This guide uses a public sample-file destination. Use an authenticated download action for files that should remain private.
Create the upload form
Section titled “Create the upload form”The tour opens a prepared single-file form with matching field names; its endpoint is /api/wappler_tours/single-upload. To build the same pattern in your own page, add a form with ID upload_form, one File Input with Name demo_files, and a submit button. Leave Multiple off. The sample accepts one disposable .txt file up to 1 MB, with matching server-side rules.
Create the upload action
Section titled “Create the upload action”In Server Connect, create an API action named upload_file. Under Inputs, define demo_files with the file type, or import it from the form. Configure required-file, allowed-type and size validation for your use case. When the upload belongs to a user or project, verify that caller’s access before storing the file.
Configure File Upload
Section titled “Configure File Upload”Add File Upload, name the step upload_files, and select $_POST.demo_files for its file field. Choose a server destination explicitly. For a public file in a standard Node.js project, use /public/assets/uploads/learning; the corresponding browser URL begins /assets/uploads/learning. On PHP, choose the correct application-relative folder for that target. Enable Create Path if needed, leave Overwrite off while testing, and enable Output to inspect the result.
{"name":"upload_files","module":"upload","action":"upload","options":{"fields":"{{$_POST.demo_files}}","path":"/public/assets/uploads/learning","createPath":true,"throwErrors":true},"output":true}
Connect the form to the action
Section titled “Connect the form to the action”Save your action. Configure the form as a Server Connect Form, select your upload_file action, and use POST with multipart/form-data. Keep the file Name demo_files. The prepared tour form points to its namespaced sample action instead. Show success and error feedback and bind the submit button’s disabled state to upload_form.state.executing.
Upload one small test file
Section titled “Upload one small test file”Save and Preview. Choose one allowed file and submit. Inspect the request and JSON result in Network. A single file-field selection can return one metadata object under upload_files; an array/object selection returns an array of records. Check the returned shape instead of assuming an array. Compare name and server path with the actual saved file. A public URL is available only for a file served publicly; do not build a public link to a private server path.
If the upload fails
Section titled “If the upload fails”Missing file input: compare the input Name with the action’s file binding and verify multipart submission. Permission error: check the writable destination for the active target. Validation error: compare the selected file with the server-side type and size limits. A successful transfer does not yet create a database record.
Check your result
Section titled “Check your result”The request returns an upload result and the file appears in the configured folder. The returned URL opens the file where the folder is intended to be public.