PHP for the Web: Learn PHP without a Framework/

...

/

Uploading a File

Uploading a File

Let's set up the file upload functionality.

We'll cover the following...

Adding a new input element to the tour form

The first step will be to add a new <input> element to the tour form in pages/snippets/_tour_form.php:

<div>
    <label for="picture">
        Picture:
    </label>
    <input type="file" id="picture" name="picture">
</div>
<div>
    <button type="submit">Save</button>
</div>

The type attribute of this new element is set to "file". For file inputs, the browser automatically renders a Browse... button, and it also shows which file you have selected.

You also have to change something about the <form> element itself. To be able to upload files, the enctype attribute should be set to multipart/form-data:

<form enctype="multipart/form-data" method="post">

Uploading a picture

Find a nice picture of Berlin (or your own favorite destination) on the internet. Make sure to open the Network panel before you continue. Go to http://APPLINK/create-tour, click Browse..., select the picture you just downloaded, and submit the form. Select the POST request for create-tour and open the Request tab. This shows the result of using the multipart/form-data encoding:

As ...