Jomatu Wiki: Documentation

Jomatu Tutorial: How to upload a media file

Introduction

Uploading files is performed via the File Manager component in the Edit Facility. There are four categories of files you can upload:

Using our example website, our starting point is in the Edit Facility (the documentation for getting to this point can be found on the 'How to edit your website text' page - steps 1-3).

In this particular tutorial we're going to upload a new media file, which, in this example, will be an MP3 (music) file*. Once we've uploaded this file, we'll add a suitable media player to the home page to allow our website visitors to play the music file. We'll add the media player between the third and last paragraph of our home page, so click anywhere in the third paragraph to edit it, as follows.

Step 1: click on the 'File Manager' button

Upload Media File - Step Two

Clicking the 'File Manager' button launches the 'File Manager' window. In this window you will see a thumbnail of all the files that you've uploaded to Jomatu. As this tutorial follows on from the 'How to upload a document file' tutorial, we can see our previously uploaded image in this list. To upload our new media file, click on the 'Upload New File' link.

Step 2: click on the 'Upload New File' link

Upload Media File - Step Three

Clicking the 'Upload New File' link launches the 'Upload New File' window. The first section here offers five options which are solely concerned with web images and is covered in the 'How to upload an image file' tutorial. As we're uploading a media file, this section does not apply.

Step 3: click on the 'Browse' button to locate our document file

Upload Media File - Step Four

When you click the 'Browse' button, a pop-up window appears showing the storage devices, folders and files on your own computer. Use this window to locate your file‡.

Step 4: locate your upload file and select it

Upload Media File - Step Five

When you locate your file, either double-click the file, or single click (to highlight it) and click the 'Open' button. Note: this button name may be different on your computer‡. The pop-up window will disappear and you will see your file name (usually with the path to that file) appear in the 'File to upload' form field.

Step 5: click the 'Upload' button to upload the file to your website

Upload Media File - Step Six (a)

Depending on your file size and internet connection speed, file uploading may take several minutes to complete. During file uploading you'll see the following message:

Upload Media File - Step Six (b)

When file uploading has completed, you'll be automatically returned to the main File Manager window. Here you can see your uploaded image file, represented as a thumbnail, in the list.

Upload Media File - Step Six (c)

Note: In this window you can open the document by clicking on the thumbnail.

If you want to delete an uploaded file, simply click the small white cross in the red circle (you will be asked to confirm the delete). Note: this will not remove any references to the file from within your web pages, so you'll need to remove those, preferably before deleting the file.

Finally, click the 'Close File Manager' button to return to the main Edit Window, where we'll insert our newly uploaded image into our web page.

Step 6: add the media player to our web page

To play our music file, we need to add a media player. We want to add it after the paragraph of text, so click to put the cursor at the end of the paragraph, then press the 'Enter/Return' key to add a new (empty) paragraph, then click the 'Insert/Edit Media' button which is located on the third line of icons (hover your mouse pointer over the icons to get the descriptive tool-tip) as follows.

Upload Media File - Step Seven

Clicking the 'Insert/Edit Media button causes the 'Insert/Edit Media' pop-up window to appear.

Step 7: select our media file

There are three tabs in this window: 'General', 'Advanced' and 'Source'. In the 'General' tab we select our uploaded media file from the 'File/URL' pull-down menu. When we select our file from this list, the 'Type' field is automatically set.

Upload Media File - Step Eight

Click the 'Insert' button at the bottom of the pop-up window to insert the new link and close the pop-up window.

Step 8: tick the 'Controls' box

Under the 'Advanced' tab we tick the 'Controls' box. This is important for two reasons: (1) so that we can actually see the media player on the web page, and (2) so that we can control our playback of the sound file, using play, pause, stop and volume mute and level controls.

Upload Image File - Step Nine

Click the 'Insert' button at the bottom of the pop-up window to insert the new media player and close the pop-up window.

Step 9: Click the 'Publish' button to make our changes live on the website

Finally, we want to save or publish our changes. If you have other changes you wish to make, then click the 'Save' button and continue editing. If you changes are complete for this web page, then, to put those change live on the website, click the 'Publish' button.

Upload Media File - Step Eleven

With all our changes published, we click the 'Exit' button to return to Jomatu.

This completes the 'How to upload a media file' documentation.


* MP3 - MPEG-1 or MPEG-2 Audio Layer III. A popular music format.

† Our website visitor's computer will usually launch an appropriate application that will play the MP3 file.

‡ This particular pop-up window is a part of your computer's operating system; it is not created by Jomatu. Therefore the methods for locating your files will be dependent on your particular system. The example shown was generated on a computer running Microsoft Windows.