Using the File Browsers to Upload Files and Embed Images
You will encounter 2 similar file browsers when trying to attach and upload a file, or when trying to embed images into your web pages. Each system either allows you to upload content from your local machine to the server, or reference content previously uploaded to the website server.
File attachments (Associated resources, application forms etc)
If you need to attach a file to a page (which depends on the type of page you are creating), you will see the following sort of dialogue box:
- 'Upload' to upload a file from your local machine to your allocated server directory. Note you will be limited in file size and file type (depending on type of web page); your account storage space is also limited - currently 80MB for most users.
- The 'File Browser' link allows you to link to previously uploaded content - only in your server directory. You can browse your online directory from your account page, and selecting the 'File browser' tab too.
- 'Reference Existing' is a text-based equivalent of the file browser - so only use if you know the filename already.
- 'Remote URL' allows you to link to files on another server
Once your file is attached to your page, you may want to add Descriptive text (which is displayed to the user instead of the filename). If you want to upload the file, but no have it listed at the foot of your page, uncheck the 'List' option. You can also Remove the file at a later date, which will also delete the originally uploaded file from the server.
You can hyperlink easily to any documents you have uploaded and attached:
- Upload the document(s) to your page
- Right click the uploaded filename to copy the URL/Link address
- Go to your page body text, and highlight the text you want to turn into a link.
- Click on the insert hyperlink button
in the text editor bar - Paste the URL in the 'Link URL' box
- Add a Title to the link (it's the text that will appear to viewers when they hover over the link).
- Click 'Insert'
- Save your page
Embedding Images From the Rich Text Editor
Use the insert/edit image button
on the text editor toolbar, which will bring up the image attributes editor:
You probably don't know the URL, so click on the file browser button to find your file (or upload a new one to the server). For accessibility reasons you are encouraged to enter a description and title for your image: this improves search engine rankings and helps those who rely on text readers.
Under 'Appearance,' you can add padding (a gap between your image and the text) and align the image so that text will wrap around your image accordingly (there's a dinky preview on the right). You can also add a solid border around your image (add a pixel value in 'Border' - 1 is the thinnest). The 'Advanced' tab allows you to implement rollover effects and add an image map... probably best to leave alone...
Certain browsers will allow you to drag and resize the image using the WYSIWYG rich text editor, although if this doesn't work, go back to the file attributes box (click once on the image, then on the toolbar insert/edit button) then alter either the width or height attribute (in pixels). The image is automatically resampled and a new copy saved on the server.
The [Image] File Browser
There's a useful 'Help!' button (red arrow) for a summary of top tips. The links across the top allow you to:
- 'Upload' files from your own computer's file system.
- 'Thumbnails' allows you to optionally generate smaller versions of your image and save in your server directory.
- 'Delete' allows you to delete the selected file from the server. Once it's gone, it's gone - there is no undo here!
- 'Resize' allows you to change the size of the image - optionally you can save this edit as a new copy of the file.
- 'Insert file' sends the URL of the selected file (the file that should be highlighted in your list in light yellow) to the image editor.
Remember, you only need to click on a file once to select it - you should be able to preview any images within the file browser.




