Skip to content

Uploading Files

Pode's inbuilt middleware supports parsing a request's body/payload and query string, and this also extends to uploading files via a <form>. Like how POST data can be accessed in a Route via the web event as $WebEvent.Data[<name>], uploaded files can be accessed via $WebEvent.Files[<filename>].

Important

In order for uploaded files to work, your <form> must contain enctype="multipart/form-data"

Web Form

The following HTML is an example of a <form> for a simple sign-up flow. Here the form will POST the username, password, and an avatar (our file to upload).

<html>
    <head>
        <title>Sign Up</title>
    </head>
    <body>
        <form action="/signup" method="post" enctype="multipart/form-data">
            <div>
                <label>Username:</label>
                <input type="text" name="username" />
            </div>
            <div>
                <label>Password:</label>
                <input type="password" name="password" />
            </div>
            <div>
                <label>Avatar:</label>
                <input type="file" name="avatar" />
            </div>
            <div>
                <input type="submit" value="Submit" />
            </div>
        </form>
    </body>
</html>

You can upload multiple files from one <form>

The inputs will be POSTed to the server, and accessible via the web event's .Data and .Files.

For the .Data: 

$WebEvent.Data['username']     # the username entered
$WebEvent.Data['password']     # the password entered
$WebEvent.Data['avatar']       # the name of the file (assume image.png)

For the .Files: 

$WebEvent.Files['image.png']   # the bytes of the uploaded file

Script

Inbuilt Save

The following script is an example Pode server that will save the uploaded file, from the above <form>:

Start-PodeServer {

    # listen on localhost:8085
    Add-PodeEndpoint -Address * -Port 8085 -Protocol Http
    Set-PodeViewEngine -Type HTML

    # GET request for web page on "localhost:8085/"
    Add-PodeRoute -Method Get -Path '/' -ScriptBlock {
        Write-PodeViewResponse -Path 'signup'
    }

    # POST request to save the avatar and create user
    Add-PodeRoute -Method Post -Path '/signup' -ScriptBlock {
        # do some logic here to create user
        New-User -Username $WebEvent.Data['username'] -Password $WebEvent.Data['password']

        # upload the avatar - this will retrieve the filename from $WebEvent.Data,
        # and the bytes from $WebEvent.Files, saving to the server's root path
        Save-PodeRequestFile -Key 'avatar'
    }

}

Custom Save

If you need to save the uploaded file elsewhere, then you can retrieve the raw bytes of the avatar file as follows:

Add-PodeRoute -Method Post -Path '/upload' -ScriptBlock {
    # using .Data will get you the file's name
    $filename = $WebEvent.Data['avatar']

    # with the filename, you can get the file's bytes from .File
    # as well as the Bytes, you can also get the ContentType
    $bytes = $WebEvent.Files[$filename].Bytes

    # with the bytes, you can upload the file where ever you want
}