The University of Massachusetts Amherst

Accessing the File Browser

Your Drupal site will come with a file browser pre-installed. The file browser allows you to upload images and files (pdf's, word documents, power points, etc.) that can be used on your site. No one else has access to your sites file browser and you are free to organize it to your liking as long as you don't delete any default files and folders that it comes with.

Note: The File Browser replaces the need for FTP programs.

 

Open the File Browser

Visit the FIle Browser by adding /imce to the end of your site's URL. You must be logged in to visit your site's file browser.

Example: www.umass.edu/sitename/imce --OR-- umwebdev.oit.umass.edu/sitename/imce (if your site is in development).

File Browser URL

Root Folder

By default, you will see what's known as the root folder. This is the main folder that contains all of your assets. Most sites contain a few icons and logos in the root folder and a number of sub-folders that contain additional assets.

Sites with few assets are encouraged to upload files directly to the root folder for ease of use.

The user interface includes action icons (Upload, Delete, Resize, and Directory) a Navigation column that displays folders and an Information column that displays information about an asset (File name, Size, Width, Height, and creation Date). If the the asset is an image, clicking on the File Name in the right column will display a preview of the image.

Note: Never delete any folders or assets that you didn't add to your site.

Root Folder

 

Navigate the File Browser

Click on a folder in the Navigation column to select it. Selected folders will appear in bold with a grey background and will display any files in the right column. It is important to note that sub-folders will not appear in the right column. Click the + icon to the left of the folders name to display the sub-folders and continue clicking on the sub-folders to display the contents in the right column. Click the - icon to hide sub-folders.

The File Browser keeps track of the last selected folder when you close the browsers window. The next time you open the file browser, you will likely be placed within the same folder/sub-folder that you last worked in. The exception to this is if you've logged out of your site and cleared your browsers history/cache.

Note: Clicking a folder that is already open will bring up a dialog box asking if you want to refresh the directory - always click OK.

Sub Folders

 

Upload Files

Before uploading a file select the appropriate folder in the Navigation column. The selected folder's name will become bold and the content of the folder will display in the right column. To upload a file to the selected folder, click the Upload icon and then click Browse... to search for the file on your computer. Double click the desired file and then click Upload to add the image to the file browser. Upon successfully uploading a file, the name and additional info will appear highlighted in the column on the right. Images will also display a preview of the image below the right column.

Note: You can only upload one file at a time.

Upload Files

 

Delete Files

Navigate to the appropriate folder and select the file you want to delete (the selected file is highlighted in blue). Click the Delete icon in the top right of window and click OK in the confirmation popup.

You can only delete one file at a time and it will be gone forever once you delete it.

Note: You aren't required to delete files that aren't in use. Removing links to the file will suffice in most cirumstances.

Deleting Files in Use

You should never delete a file with an active link from your site. If you delete a file from the File Browser that is being used on a node in your site, the link will not be removed automatically. If a user clicks the link, they will be brought to a Not Found error page which is very bad for both user experience and search engine optimization.

Make sure to manually remove any links to a file before you attempt to delete the file from the file browser.

Note: In some instances a file that is saved in a nodes revision tab cannot be deleted without first deleting the instance of the revision containing the file.

Delete Files

 

Resize Images

Upload a large image and resize it within the File Browser by selecting the image and clicking the Resize icon in the top right corner of the File Browser interface. If you input a width, the browser will automatically add the height when you click your mouse in the heigh field (and vice versa) to retain the images original dimensions. If you want to keep the original image and make a duplicate at the smaller dimension click the Create a new image checkbox.

You should only resize images to make them smaller than the original, never larger. Attempting to make a small image larger will create a blurry image that isn't appropriate for a production website.

Note: When utilizing the Create a new image checkbox, the newly create fill will append _0 to the filename. You cannot rename the new file.

Image Resize

 

Create and Delete Folders

Use the Directory icon to create and delete folders within the File Browser. A popup interface will provide an empty field to add the name of the folder that is to be created or deleted. Input the name of the new folder and click Add to insert it into the parent directory.

Clicking the arrow beside the field will list all folders in the parent directory to easily choose and delete an existing folder. You could also manually input the name of the folder rather than choose it from the dropdown.

Deleting a folder will delete all of it's contents including sub-folders and files.

Users who have numerous asset's that are often used and updated are encouraged to create easily identifiable folders to keep track of specific assets. This makes the file structure much easier to manage as compared to uploading all assets to the Root folder. This is only a suggestion, file management is altered at the users discretion.

Folder Management

 

Linking to Assets

Linking files and images should always be done using the WYSIWYG editor (see Editing Site Content). Highlight the appropriate content, click the Link button in the WYSIWYG editor and click Browse Server. From here the File Browser will open in a popup window and you can choose an asset by navigating to the appropriate folder and selecting the correct file by double clicking the filename. Alternatively you can click the flle name and click Open, but double clicking is usually much faster.

If you want to share an asset directly without linking it to your site, you can use the URL structure as follows: http://umass.edu/sitename/sites/default/files/filename

Example: http://www.umass.edu/universityrelations/sites/default/files/Training_0-1.gif

Reminder, this should never be done to link files on your site, always use the Browse Server option in the WYSIWYG editor.

Note: You should never share a direct link to a file on a development site. Development sites are turned off once your site moves to production and any absolute link paths will be broken.