ColdFusion CFHTTP and WebDav

As it turns out, I recently ran into the need to interface with a WebDAV server via ColdFusion. Surprisingly, there is practically no information online regarding this topic. I just wrapped up a test PUT file snippet and figured I would share it with all you ColdFusioneers who aren't finding the copy/paste you are looking for :-).

First off, you can't simply use cfhttpparam type="file" as you'll end up sending file data with headers included in the body of the request. The WebDAV server will write these headers into the file content and you'll end up with a corrupted file. Instead, the WebDAV spec calls for the entire body of the request to be file data.

That leads us to the following code. You'll see this is uploading a simple jpeg to the WebDAV server. The cffile readbinary file attribute is being set to the full local file path. The cfhttpparams include the typical Content-Type header, but also Overwrite and Translate which are commonly supported and sometimes required by WebDAV servers. The body of the request is the raw binary file data. Simple!

<cffile action="readBinary" file="#loc.images[curr_image]#" variable="loc.curr_binary">
<cfhttp method="PUT"
url="#This.webDAVsettings.server#/import/#loc.curr_filename#.jpg"
username="#This.webDAVsettings.username#" password="#This.webDAVsettings.password#"
throwonerror="true">
<cfhttpparam type="header" name="Content-Type" value="image/jpeg">
<cfhttpparam type="header" name="Overwrite" value="T">
<cfhttpparam type="header" name="Translate" value="F">
<cfhttpparam type="body" value="#loc.curr_binary#">
</cfhttp>

Taming the Elusive 5 Column Bootstrap Layout

Twitter Bootstrap is one of the best things to happen to web development in recent years. Bootstrap 3 brought some awesome changes, but still there are troublesome areas. One the most common is setting up 5 column rows. Sure, you can build a custom compiled Bootstrap with a 20 column grid system or something, but most of us use vanilla Bootstrap. Thanks to SICC, we have a great solution for 5 column rows in Bootstrap 3. Simply add the following to a custom CSS file (no need to alter the Bootstrap CSS).

Core CSS

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

General Use

<div class="row">
    <div class="col-md-15">
    ...
    </div>
    <div class="col-md-15">
    ...
    </div>
    <div class="col-md-15">
    ...
    </div>
    <div class="col-md-15">
    ...
    </div>
    <div class="col-md-15">
    ...
    </div>
</div>