Uploading files/images to your server with HTML form and php.

In this tutorial, we’re going to discuss how to upload images from to a folder on your server/webhost using a simple HTML form. This is actually the most simplified method of doing it compared to most I’ve seen on the web. So I’ve decided to share it with you all here

Note: this process can also be used on other file types like videos, text documents or even scripts.

The algorithm for this is very tricky, firstly we create a folder on our server. Let’s name this folder “uploads”. Then we create a database which stores the image name and the images file path(the src attribute). And that’s it.

The folder stores the main image, while the database stores the image path. Let’s begin the steps.

Creating the database.

You can easily create your database using the phpmyadmin tool. this is usually found in your cpanel of your website. If you’re using localhost, you can start your Apache servers and type “http://localhost/phpmyadmin“.

You can omit the “http://” if you want to.

See how to set up a localhost on your computer.

We have decided to name our database charmingdesk. Now we’ll create a table in our database, this table will be named “filepaths” which will have 3 columns, “id”, “name” and “paths”.

Now that we’ve created our table, it’s time to move over to our index.php page which well create our HTML form.

Creating your file upload form.

Let’s begin creating the form

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


<label for="fpath"> file path:</label>

<input type="file" id="fpath" name="fpath"><br><br>


<input type="submit" name="Submit">

</form>

Note: for file uploads, the method should always be post and the enctype must be set to multipart/form-data

Now that’s our form, it comes with a file type input where you can navigate your device for the required file.

Now let’s move to our action page which is “submit.php”(the same name from our form’s action attribute).

Submit the image’s path to the database and upload the actual image to the server.

In our “submit.php” file we first connect that file to the database.

$conn=mysqli_query (“hostname“, “username”, “password”, “database name”);

The host name is usually localhost, then the rest is given to you by your web hosting company.
If you're using a localhost server, then the following applies for you

username = "root"

password = "" //empty

Database name="your database name".

Here we decided to use charming desk as our database name.

Now let’s check if the previous form was submitted to this page.

If(isset($_POST['submit'])){
$iname=
$_FILES['fpath']['name'];
//Stores the actual file name

$path=
$_FILES['fpath'][' tmp_name'];
//Stores the initial file path

$destination="uploads/";

$newpath=$destination+basename($iname);

If(
move_uploaded_file ($path, $newpath)
){

echo "file uploaded successfully";

//Insert to database.

mysqli_query($conn,"INSERT INTO filepaths(name,path) VALUES('$iname', '$newpath')");
}

else{

echo "an error occurred";

}
}

That’s how to do it. Your file is now saved to the server and the path can easily be found in your database, in case you want to use them in other pages on your website.

There’s also an advanced way of uploading files to server without with JavaScript. See How to upload images without reloading the page.

Feel free to follow our social media channels for more updates from us. We would like to see you coming back for more brief tutorials.

If you face any error, feel free to send us a feedback and our teams will provide you with a quick and brief solution.

You can contact us vial mail at

hello@charmingdesk.com.ng

Hope you learnt something new today, KUDOS.

Your favorite web developers!!

Categories: php

vic okeke

I'm just a web developer hoping to help out junior developers in algorithms for their projects.

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *