Uploading Files: Images, Documents & More

Uploading Files

You can upload any kind of file to your Webvanta site’s files area. You can upload either an individual file, or a .zip file that includes many files. The contents of zip files is extracted automatically after uploading, and any folder structure is preserved.

To upload a file, choose Content > Images & Files. You'll then see a listing of all the files and folders on the left, and a preview of the currently selected image on the right.

To upload a file, first click on the folder into which you want to upload the file (if any), and then click Add File. Browse to the file on your computer, and click Save. (You may also want to choose options for processing and metadata, as described below.)

Most commonly, the files you upload will be images (jpg, gif, or png). But you can also upload other files in the same way. For example, if you have pdf files you want to link to, you can upload them here.

You can also upload code files. If you are using a JavaScript library, for example, that you don't expect to edit, you can simply upload the JS file here. You can also upload Flash files (swf or flv), audio files (mp3 or other), QuickTime files (.mov), or just about anything else. Just keep in mind that Webvanta doesn't do anything to interpret these files; it is up to you to ensure that the way you present these files on your site is understood by the browser.

You can even upload complete HTML files, and Webvanta will serve them as static page. Just keep in mind that when you do so, none of Webvanta's content management or database capabilities is available to you.

Uploading Multiple Files with Zip Archives

To upload multiple files, compress them into a zip file and upload that file. Webvanta will extract all the files (and any folder structure) from the zip.

You can choose (via the Processing Options section of the upload dialog) whether to put the contents of the zip directly into the current folder, or to create a new folder with the name of the zip file and put the contents there.

Browser-Based Uploading vs. FTP

You are probably accustomed to uploading images via FTP. With Webvanta, you upload files via the browser. Although this may take a little getting used to, it has a number of advantages:

• You can choose to have image renditions (copies at various sizes) automatically created.
• You can enter a caption and other metadata for each image.
• You can assign tags or categories to each image.
• It is a much easier interface for your clients to use, so they will be able to add their own images.

In the future, we plan to also add FTP upload as an option.

Previewing Files

To preview a file, just hover over its filename. The preview area on the right will show the image and all of its associated metadata.

Assigning Metadata

You can have any number of metadata files associated with each image. By default, there is only one field: the caption. To enter metadata, click on the Custom Metadata title in the upload dialog.

Note that if you are uploading a zip file, the metadata will be applied to all files in the zip.

If you want to add more metadata fields, specify them in the Global Setting named asset.metadata.settings.

See Creating Custom Metadata Fields for Images for details on how to specify custom metadata fields, and how to access them in WebvantaScript when creating pages.

Using Tags and Categories

You can assign tags to images when uploading them. Tags are useful for associating a set of images together so you can find them later. If you have a variety of projects listed on your site, for example, you might want to have a tag for each project, so you can then associate any number of images with that project. See Accessing Images and Other Files to learn how to access images by tag.

You can also assign a category to images. This is useful when you are using dynamically generated category pages and want to have images associated with each category. 

Updating Files

You can change any of the information associate with a file, and even the contents of the file itself, by selecting the filename in the left panel and clicking Update File on the upper right.

You can, of course, modify the tags, categories, or metadata for the photo, and when you click Save those properties will be changed. The image renditions are also regenerated, so if you've modified the rendition sizes in the config settings you can update the renditions for any image by selecting it, clicking Update File, and then clicking Save.

If you upload a new file as part of an Update File action, the new file is uploaded but is assigned the name of the original file. This is so the filename does not change, and any code that is referencing the original filename will now use the new file. (Note that this can be confusing, in that the filenames of images on your site and on your computer may be different; the name of a file that is used to update an existing file is not used. If you want to use the new filename, upload it as new file, rather than by updating an existing file.)

Selecting Multiple Files

Each time you click on a file, it is selected (as shown by the blue background). Selection is sticky, so you can click additional files and they will all be selected. To unselect a file, click again. You can also select all or none by clicking the links at the top.

Deleting Files

To delete one or more files, select them on the left, and then click Delete Selection.

Moving Files

To move one or more files, select them on the left, and then click Move Selection. In the dialog that appears, choose the destination, and click Move. (Note: you cannot currently move folders. We're working on it.)

Adding Images from the Content Editor

In addition to uploading images via the Content > Images & Files page, as we've been discussing, you can also upload images from the rich text (WYSIWYG) editor. You can do this anywhere the editor appears, either on public site pages for editable regions, or in admin pages, such as for articles and blog posts, that use the rich text editor.

To add an image via the rich text editor, click the picture icon in the editor's toolbar. To use an already-uploaded image, if you know the URL of the image, you can then enter it directly. More likely, you'll want to browse for it; click the Browse Server button, and another window will open with an image browser, giving you visual access to all of the previously uploaded images.

You can also upload an image from within the rich text editor, either using the fields at the bottom of the image browser, or by clicking on the Upload tab of the initial image dialog.

Accessing Uploaded Files

Files appear at the root of your site, unless you place them in a folder. You can do so in two ways:

• Choose the folder on the left side of the Images & Files page (or create a folder and then select it) before clicking Upload File.
• Implicitly create folders by uploading a zip file that includes folders (see section below on using zip files).

Note that, unless you create a folder call "img" or "images", when you access the files you must not include such a prefix in the file path.

Also, you should begin every file path with a slash (/). This makes the path relative to the root of your site. If you omit the slash, then the path is relative to the page from which it is being accessed, so the file access will fail if you move a page to be a subpage of another page.

To make it easy to get the exact path to a file, including its containing folder(s), if any, and with spaces converted to "%20" as required by the web, we've provided a widget at the bottom of the metadata area that you can click on the copy the path to the clipboard. You can then paste it into your code, such as for the src attribute of an img tag.

You can also access files according to the tags or categories that have been assigned to them, as described below.