How to solve <form> that includes file upload and other text input, on the same page

You must use enctype="multipart/form-data" for file uploading, this will also work fine for non-file upload forms.


You need to set enctype="multipart/form-data" and use method="post" for any form that includes a file input. This won't stop you from including other types of fields.

(The way those fields will be submitted to the server will change, but your form parsing library will deal with the differences automatically, you only need to worry about them if you are parsing the raw input yourself).


<form enctype="multipart/form-data" method="post" action="submit.php">

submit.php being, in this case, the external PHP script that will process your form ( if you decide to use PHP ). But you can name the .php script whatever you like ( e.g. cats.php ).

The uploaded file/image data will be stored inside $_FILES, and all the textfield, textarea, radio buttons, check boxes and other data will reside inside the $_POST superglobal.

When submit.php receives the submitted form you can do all kinds of processing on it such as validating that user has submitted the correct type of file/image, store the file path of the file/image in your local database( client/server or file system based ), and much more.

Make sure to validate user input client side and server side too.