How To Use A FTP Client To Connect To A Website

Upload Folders/Files From A Computer To A Website Folder

Continuing from the previous Set Up FTPES Connection section. In this section I will show you how to connect to your Public_HTML (website) folder and then how to upload files to it. This is how you make your web pages live on the internet. Knowing how to do this yourself can save you time and/or money, especially if you need to upload a file you have changed whereby your web designer is not available to upload it for you.

Make  FileZilla  Easier  To  Manage

Before you connect to your website you might want to make FileZilla easier to manage, with regards to its UI (User Interface - Panels, Buttons and so on), by getting rid of some of its technical, too much info, panels (also known as Windows Panes). For example. Click on the VIEW menu-item and then deselect (untick) each panel you do not want by clicking on its relevant menu-item.

In Fig 1.0 I am going to deselect the TRANSFER QUEUE panel. These tick menu-items work as toggle (off/on) menu-items - You click on a menu-item once and it becomes ticked for example. Click on it again and it becomes unticked.

Fig 1.0  Untick the menu-item of each panel you do not want

TRANSFER QUEUE - This panel, when shown, acts as a Progress Bar/Guage whenever a file is being transferred (uploaded or downloaded). It gives out various information about the file being transferred (whether or not there was an error with it and so on), but this information can be overwhelming to the beginner and an unneeded obstruction - The other panels can tell you if the file was transferred successfully. Saying this, if you like definite evidence of file transfer then keep this TRANSFER QUEUE panel selected.

QUICKCONNECT BAR - This panel, when shown, allows you to enter the minimal of ftp details in order to connect to a website. Unless you are always needing to make a quick connection to a website you are better off using the Site Manager (explained in the previous section) to create and manage your ftp connections.

MESSAGE LOG - This panel, when shown, allows you to see the log (chain of events/programming commands) that are used for specific transfer operations. When you transfer a file for example the connection process (user name and password authorization commands) will be logged alongside the transfer commands. If you do not want to see this technical, programmer's information, log just untick its menu-item.

LOCAL DIRECTORY TREE - This panel, when shown, allows you to navigate through your computer folders (like you do inside a Windows folder). Once you have navigated to the folder of your choice its files will appear in the Files panel beneath it. Unless you are constantly going through different folders, and more precisely through different hardware devices such as a Flash Drive and then CD ROM, in order to locate your website files; you may want to hide (untick) this panel.

REMOTE DIRECTORY TREE - This panel works the same as the LOCAL DIRECTORY TREE except that it displays folders inside your web space (root website folder) as opposed to the folders on your computer. Directory Tree is the old-fashioned word for folder structure - A Directory was a folder with content.

Directory  Tree  Headings

As well as the panels you can also hide the headings (data titles) that appear as part of a Directory Tree. For example. Right click over the word (heading) FILENAME, to bring up the Column Setup window, and from there put a tick next to each heading you want to display/use and untick those headings you want to hide. Then click on the OK button to apply your changes, if any.

Fig 1.1  Put a tick next to each heading you want to display/use

Fig 1.2 below shows the results of disabling (unticking) certain panels and headings. In this case I like only the MESSAGE LOG, LOCAL FILES and REMOTE FILES panels to be in view, and only the FILENAME heading in use, but you may have different preferences to me.

Fig 1.2  Double click on a folder to get inside it

When you have sorted out the usage look of filezilla the next step is to prepare it for Upload/Download functionality. So begin by navigating the COMPUTER FILES panel (directory tree) to the folder on your computer that contains your website content (folders and files). In this example (Fig 1.2 above) I am double clicking on the WCH folder to get inside it. This folder is where I keep this website's content.

Connect  To  A  Web  Space

Once the navigation of the COMPUTER FILES panel (directory tree) has been sorted out, continue by connecting to your web space - Click on the FILE menu and select your FTP Connection (website profile - explained in the previous section). In this example (below) I am clicking on the WCH menu-item in order to connect to the web space (root website folder) of websitecreationhelp.com.

Fig 1.3  Click on the FILE menu and select the FTP Connection for your website




Fig 1.4  Double click on the public_html folder to view your website content

When the connection to your web space has been made the content of your web space will be displayed inside the REMOTE FILES panel (directory tree). As explained in other sections of this website, your web space includes your website (public_html) folder alongside your web hosting package folders and files (CPanel folders and files, web hosting provider folders and files, etc).

With your web space, folder, in view scroll down the list of folders and files within it until you locate the public_html folder. This is where you store (upload) your website content in order for it to be seen on the internet. Once you have located the public_html folder double click on it (Fig 1.4 above) to get inside it (Fig 1.5 below). After that, go back to the COMPUTER FILES panel and locate the folders and/or files you want to upload to the public_html folder.

Fig 1.5  Select the folders and/or files you want to upload to the public_html folder

In Fig 1.5 I am inside the WCH computer folder and have selected the FREE MUST HAVE DOWNLOADS.... web page (html file) by right clicking over it. Doing so brought up the Options (context/pop-up) menu whereby I then selected (left clicked on) the UPLOAD menu-item. It is this procedure that allows you to upload one or more folders/files. The upload will copy the FREE MUST HAVE DOWNLOADS.... web page (html file) from the computer (WCH folder) into the public_html folder.

MULTIPLE  SELECTION

There are two basic methods for selecting multiple items (folders and/or files). The first method is to use the CTRL keyboard key, which allows you to select individual items. And the second method is to use the SHIFT keyboard key, which allows you to select a range of items.

Select with CTRL

With the CTRL keyboard key method you start by selecting your first item (folder or file) as normal, by clicking on it with the left mouse button. You then press the CTRL keyboard key and keep it held down as you select your second item, your third item and so on. When you are happy with your selection you let go of the CTRL keyboard key. If you make a mistake you can always deselect an item by clicking on it again, with the CTRL keyboard key held down.

If you do not keep the CTRL keyboard key held down as you are selecting or deselecting an item you will cancel your selection and have to start all over again.

Fig 1.6  Select each item (folder or file) you want to upload with the CTRL keyboard key held down

Select with SHIFT

With the SHIFT keyboard key method you start by selecting your first item (folder and/or file) as normal, by clicking on it with the left mouse button. You then press the SHIFT keyboard key and keep it held down as you select the last item in your range. When you are happy with your selected range you let go of the SHIFT keyboard key. If you make a mistake with the last item you can always select a different last item by clicking on it, with the SHIFT keyboard key held down.

If you do not keep the SHIFT keyboard key held down as you are selecting a last item only the last item will be selected. The first item will be deselected, therefore no range will be created.

Fig 1.7  Select the first item (folder or file), hold down the SHIFT key and then select your last item

The SHIFT and CTRL methods can also be used in combination. For example. You could select a range of files (and/or folders) with the SHIFT method and then select individual files (and/or folders) with the CTRL method. You cannot do the reverse though.

You cannot select individual items with the CTRL method and then select a range of items with the SHIFT method because the SHIFT method will deselect any items selected with the CTRL method. Therefore, either use the SHIFT method first and then the CTRL method or use the CTRL method first and then use the mouse pointer to select a range of items.

Overwriting  Existing  Files

After making your selection, right click on any one of your selected items to bring up the Options menu. And from there, left click on the UPLOAD menu-item. Your selected items will then be put in a Queue (internally listed/marked), ready for uploading - Remember to connect to your web space.

Fig 1.8  Right click on any selected item and then left click on the UPLOAD menu-item to begin uploading

Upon uploading items the following requester might appear, asking you if you would like to overwrite (delete) the existing item (i.e. page1.html) with the item currently being uploaded (i.e. page1.html) that both have the same name. If so, click on the OK button with the action of OVERWRITE selected.

Otherwise, select the SKIP action (radio button) and then click on the OK button to skip (cancel) the overwrite for this item only. You will need to SKIP or OVERWRITE each item in turn unless you tick the ALWAYS USE THIS ACTION option. And if you want to be more specific you can use one or both of the APPLY options beneath it. Your actions will normally depend on whether or not you are uploading mixed items (i.e. folders and files).

Fig 1.9  Decide what you want to do - Overwrite or Skip.....for the current queue (upload selection) only?

The upload process works by first putting your item names (folder names and file names) into an internal list (known as a Queue), which is then processed whereby a copy of each item in that list (queue) is then uploaded to your public_html folder. By SKIP-ping an item you are telling filezilla to ignore that listed item and to process (upload) the next item in the list.

Be very careful with that requester though because you could easily, accidently, overwrite important folders/files if you do not fully understand it. So always have a backup copy of your website folders and files, on a Flash Drive for example, before uploading anything.

Go  UP  One  Folder

To move between folders you simply double click on a folder to get inside it or double click on the dotted folder, at the top of a panel, to come out of it. The dotted folder acts as a GO BACK or UP ONE LEVEL option. Each panel has its own dotted folder.

Fig 1.10  Double click on the dotted folder to come out of the current folder

If you want to download folders and files, from your public_html folder to your flash drive for example, you simply navigate the panels to their necessary folders. For example. If I wanted to download the articlelinks.css file from public_html to D:\ I would navigate the COMPUTER FILES panel to D:\ by double clicking on its dotted folder (to get back to D:\). I would then right click on the articlelinks.css file and select the DOWNLOAD menu-item (not exampled here).

The above examples have always refered to the public_html folder, for easy explanations and examples, but you can go inside (and use) other folders within the public_html folder if you like. As said, you navigate and use the REMOTE FILES panel in the same way as you do the COMPUTER FILES panel. You can even create a new directory within a panel - right click and select the CREATE DIRECTORY menu-item.

FileZilla is not the best FTP Client out there, it's just famous because it is FREE. Personally I like AceFTP and its panel features, but regardless of which ftp client you use it should work roughly the same as the rest (as exampled above). It should also have good Support and more precisely get updated every now and then. Sometimes you can pay good money for a piece of software in general whereby it lacks support and updates. So choose wisely! Test software out in an internet cafe beforehand.

With filezilla, and other ftp clients, you can Drag 'N' Drop items between panels. I do not recommend that method of uploading/downloading items though simply because mistakes can happen more easily with Drag 'N' Drop. The good thing about filezilla is that it is FREE, updated regularly and has plenty of forums and websites that can help you with it.