Image upload cfm or cfc for Redactor editor

Question

I'm trying to configure redactor for ColdFusion with a simple image upload script. The image doesn't actually upload to the server and I don't know how to get the variables back to ColdFusion for use by redactor. I can't seem to get their sample code converted properly to ColdFusion .

My call to the function is here:

this.article_content.redactor({ focus: true,
                        buttons: [  'html', '|', 'formatting', '|', 'bold', 'italic', 'underline', '|', 'unorderedlist', 'orderedlist', '|',
                                'image', 'video', 'file', 'link', '|',
                                'fontcolor', '|', 'alignment', '|', 'horizontalrule', 'alignleft', 'aligncenter', 'alignright', 'justify'],
                        imageUpload: 'lib/modules/imageUpload.cfm'
                    });

imageUpload.cfm

<cfparam name="form.file" default="">
<cffile action="upload" destination="#dir#"  accept="image/*"  nameconflict="overwrite" filefield="file"/>
<cfset result = structnew()>
<cfset result["name"] = cffile.serverFile>
<cfset result["url"] = cffile.serverFile>
<cfset result["filelink"] = cffile.serverFile>
<cfset result["type"] = cffile.ContentType &"/"& cffile.ContentSubType>
<cfset result["size"] = cffile.FileSize>

<cfreturn serializejson(result)>

Should this be a cfm page or a cfc page? I basically just need to convert the serverFile variable to a json object that looks like this:

{ "url": "/images/img.jpg", "id": "123" }

You forgot to actually ask a question. What doesn't work for you? Are you using cffile action="upload"? What does your imageUpload.cfm look like? — Alex
Sorry for not being clear. Question edited to include my imageUpload.cfm code. The image doesn't actually upload to the server and I don't know how to get the variables back to coldfusion for use by redactor. Thanks. — eduski
I learned that redactor existed by reading this question so I have no knowledge of how it works. However, it appears that the code is creating an html form. I wouldn't, however, expect an image to be uploaded until the user selects an image and submits that form. — Dan Bracuk
Redactor's file name is "file" and the id is "redactor_file". I guess I just need to write a cfm or cfc that would return the json variables back to redactor for use (as shown in their example) — eduski

John Whish John Whish · Accepted Answer · 2016-02-01T15:13:51

I think you were very close! This should do the trick for you:

<cfsetting enablecfoutputonly="true">
<!---
Your location to upload files to
Ideally this would be outside the webroot so you can upload the file, check 
to ensure it's not malicious, then move it to a publicly accessible location
--->
<cfset relativePath = "uploads/">
<cfset dir = expandPath(relativePath)>

<cfset result = {}>

<cfif structKeyExists(form, "file")>

    <cffile action="upload" destination="#dir#" accept="image/*"  nameconflict="overwrite" filefield="file">

    <cfset result["name"] = cffile.serverFile>
    <cfset result["url"] = relativePath&cffile.serverFile>
    <cfset result["filelink"] = cffile.serverFile>
    <cfset result["type"] = cffile.ContentType&"/"&cffile.ContentSubType>
    <cfset result["size"] = cffile.FileSize>

<cfelse>
    <cfset result["error"] = "no file uploaded">
</cfif>

<cfheader name="Content-Type" value="application/json">
<cfoutput>#serializejson(result)#</cfoutput>
<cfsetting enablecfoutputonly="false">

The main difference is that with a .cfm page you can just output the JSON, you were trying to return it (with cfreturn) which is what you'd do from a function.

For good measure I've added the enablecfoutputonly setting to ensure you don't get any unwanted whitespace which would break the JSON response.

Image upload cfm or cfc for Redactor editor

2 Answers