javascripttypescriptcoldfusionimage-uploadingjodit

How to upload image with Jodit uploader and coldfusion?


I'm using Jodit to create a wysiwyg editor. I have a coldfusion file (uploadimage2.cfm) that is empty. When I send the uploaded img to that empty coldfusion page I get an error that coldfusion can't find the variable "FILES".

Jodit is sending the following form data to uploadimage2.cfm:

------WebKitFormBoundaryIrkl9oNQedwACmBe
Content-Disposition: form-data; name="path"


------WebKitFormBoundaryIrkl9oNQedwACmBe
Content-Disposition: form-data; name="source"

default
------WebKitFormBoundaryIrkl9oNQedwACmBe
Content-Disposition: form-data; name="files[0]"; filename="HandShake.JPG"
Content-Type: image/jpeg


------WebKitFormBoundaryIrkl9oNQedwACmBe--

It seems coldfusion is getting stuck on the name="files[0]" part. I have a working upload function that doesn't use Jodit and it sends name="image" in place of it.

I have not been able to intercept the form data to try to rename it when Jodit sends it.

Here's my javascript with the Jodit plugin:

var editor = new Jodit('#newEditor',
   uploader: {
        url: "uploadimage2.cfm",
        filesVariableName: "image"
   }
);

How can I send the correct form data for coldfusion to not throw errors?


Solution

  • Eventually I figured out that my problem was in my application.cfc file. The onRequest function was trying to evaluate "files[0]" in order to make sure there was no script injection in it. This was used for other form text uploads.

    Here's how I got the Jodit upload to work with coldfusion in it's entirety:

    My uploadimage2.cfm file:

    <!--- set content type to json so jodit can read the response --->
    <cfheader name="Content-Type" value="application/json">
    
    <!--- create a structure with necessary objects --->
    <cfset responseStruct = structNew()>
    <cfset responseStruct["message"] = "File was uploaded">
    <cfset responseStruct["error"] = 0>
    <cfset responseStruct["path"] = "#application.image_root#">
    <cfset responseStruct["images"] = []>
    
    <cfset variables.mediapath="#application.image_upload_root#\">
    
    <!--- loop over the form data to upload each image individually --->
    <cfloop collection="#form#" item="i">
        <cfif findNoCase("files",i) gte 1>
             <cffile action="upload"
                fileField="#i#"
                destination="#variables.mediapath#"
                accept="image/jpg, image/jpeg, image/png, image/gif, image/svg+xml"
                nameconflict="makeunique"
                result="this_image">
    
            <cfscript>arrayAppend(responseStruct["images"],"#this_image.serverFile#");</cfscript> 
        </cfif>
    </cfloop>
    
    <!--- serialize the structure to json --->    
    <cfoutput>#serializeJSON(responseStruct)#</cfoutput>
    

    Then in my Jodit initialization:

    var editor = new Jodit('#editor',
        {
           uploader: {
                url: "uploadimage2.cfm",
                    isSuccess: function (resp) {
                    //this step is necessary for whatever reason, otherwise it will throw an error.
                        return resp;
                    },
                    process: function(resp){
                        //this was an important step to align the json with what jodit expects.
                        return {
                            files: resp.images,
                            path: resp.path,
                            baseurl: resp.path,
                            error: resp.error,
                            message: resp.message
                        }
                    }
                }
            }
        );