# Uploading Files

File uploading requires that you create two files:

- An HTML form to enter file upload information
- An action page containing the file upload code

| To create an HTML file to specify file upload information:

1. Create a new file in Studio.
2. Modify the file so that it appears as follows:

       <HTML>
       <HEAD>
           <TITLE>Specify File to Upload</TITLE>
       </HEAD>

       <BODY>
       <H2>Specify File to Upload</H2>
       <FORM     ACTION="uploadfileaction.cfm"
                               ENCTYPE="multipart/form-data"
               METHOD="post">
       <P>Enter the complete path and filename of the file to upload:
           <INPUT     TYPE="file"
                   NAME="FiletoUpload"
                   SIZE="45">
       </P>
           <INPUT     TYPE="submit"
                   VALUE"Upload">
       </FORM>
       </BODY>
       </HTML>

3. Save the file as `uploadfileform.cfm` in `myapps` under the Web root directory.

### Code Review

Code | Description
--- | ---
    <FORM     ACTION="uploadfileaction.cfm"
            ENCTYPE="multipart/form-data"
            METHOD="post">
| Create a form that contains file selection fields for upload by the user.
        <INPUT     TYPE="file"
                NAME="FiletoUpload"
                SIZE="45">
| Allow the user to input a field. (The File input type automatically includes a Browse button to allow the user to look for the file instead of entering the entire path and file name.)

HTML forms can be designed in most browsers to give users the ability to upload files. Setting the HTML INPUT tag type to "file" instructs the browser to prepare to read and transmit a file from the user's system to your server. Setting the ENCTYPE FORM attribute to "multipart/form-data" tells the server that the form submission contains an uploaded file.

The user can enter a file path or browse the system and pick a file to send.

| To create an action page to upload the file:

1. Create a new file in Studio.
2. Modify the file so that it appears as follows:

       <HTML>
       <HEAD>
           <TITLE>Upload File</TITLE>
       </HEAD>

       <body>
       <H2>Upload File</H2>

       <CFFILE ACTION="UPLOAD"
               DESTINATION="c:\inetpub\wwwroot\HR\"
               NAMECONFLICT="Overwrite"
               FILEFIELD="FiletoUpload">

       <CFOUTPUT>
       You uploaded the file #File.ClientFileName#.#File.ClientFileExt#
       successfully to
       #File.ServerDirectory#\#File.ServerFileName#.#File.ServerFileExt#.
       </CFOUTPUT>

       </BODY>
       </HTML>

3. Change the following line to point to an appropriate location on your server:

       DESTINATION="c:\inetpub\wwwroot\HR\"

4. Save the file as `uploadfileaction.cfm` in `myapps` under the Web root directory.
5. View `uploadfileform.cfm` in your browser, enter values and submit the form.
6. The file you specified is uploaded.

### Code Review

Code | Description
--- | ---
    <CFFILE ACTION="UPLOAD"
| Prepare to upload a file to the server.
    DESTINATION="c:\inetpub\wwwroot\HR\"
| Specify the destination of the file.
            NAMECONFLICT="Overwrite"
| If the file already exists, overwrite it.
            FILEFIELD="FiletoUpload">
| Specify the name of the file to upload. Note that you do not enclose the variable in pound signs.

Note | This example performs no error checking and does not incorporate any security measures. Before deploying an application that performs file uploads, be sure to incorporate both error handling and security.

## Resolving conflicting file names

When a file is saved to the server, there is a risk that another file may already exist with the same name. In the event of this occurrence, there are a number of actions you can take using the NAMECONFLICT attribute. For example, you can specify the parameter NAMECONFLICT="MAKEUNIQUE" in the CFFILE tag to create a unique file name while keeping the file extension the same.

## Controlling the type of file uploaded

For some applications, you might want to restrict the type of file that is uploaded. For example, you may not want to accept graphic files in a document library.

The ACCEPT attribute is used to restrict the type of file that will be allowed in an upload. When an ACCEPT qualifier is present, the uploaded file's MIME content type must match the criteria specified or an error will occur. ACCEPT takes a comma-separated list of MIME data names, optionally with wildcards.

A file's MIME type is determined by the browser. Common types, like "image/gif" and "text/plain", are registered in your browser.

Note | Not all browsers support MIME type associations.

### Example: Restricting file types

This CFFILE specification will only save an image file that is in the GIF format:

    <CFFILE ACTION="Upload"
        FILEFIELD="UploadFile"
        DESTINATION="c:\uploads\MyImage.GIF"
        NAMECONFLICT="OVERWRITE"
        ACCEPT="image/gif">

This CFFILE specification will only save an image file that is either a GIF or a JPEG :

    <CFFILE ACTION="Upload"
        FILEFIELD="UploadFile"
        DESTINATION="c:\uploads\MyImage.GIF"
        NAMECONFLICT="OVERWRITE"
        ACCEPT="image/gif, image/jpeg">

This CFFILE specification will only save an image file, but the format doesn't matter:

    <CFFILE ACTION="Upload"
        FILEFIELD="UploadFile"
        DESTINATION="c:\uploads\MyImage.GIF"
        NAMECONFLICT="OVERWRITE"
        ACCEPT="image/*">

Note | Any file will be saved if ACCEPT is omitted, left empty, or contains "*/*".