file upload using AJAX

[coder1957**]

How do I upload a file using AJAX?

<form name="pic" id="pic" action="" method="post" enctype="multipart/form-data">

<input class="redField" type="file" name="file_upload" value="" size="20" maxlength="50" onBlur="sendPhotoNew(this.form)">

</form>

<script>

function sendPhotoNew(form){
          var file=form.file_upload.value;
          var e= new (images);
          e.setForm('pic');
          e.setHTTPMethod("POST");
         var picNLink=e.photos_upload(file);

          photo_new.innerHTML=picNLink[0];
          $('#photo_new').show();
}
 </script>

I know how do this using conventional forms. 

I am getting the error 

Invalid content type: application/x-www-form-urlencoded.The files upload action requires forms to use enctype=""multipart/form-data"". The specific sequence of files included or processed is: C:\inetpub\wwwroot\snip\images.cfc         

Which I would expect if I didn't use the correct form header. 

}

<cffunction name="photos_upload" access="remote" returnType="array">

     <cfargument name="file" type="string" required="true" >

<cffile ACTION="UPLOAD"
       DESTINATION="c:\inetpub\wwwroot\blahblah\coldfusion\images\images_folder\"
       NAMECONFLICT="MAKEUNIQUE"
       FILEFIELD="#arguments.file#"
      accept="image/*, image/jpg, image/jpeg,image/png"
>

</cffunction>

[Charlie Arehart]

I will leave others to address the JS issue.

As for which answer to mark as "correct", I did say multiple times that it was my FIRST comment. If you insist, the one starting, "FWIW, Wolfshade, it seems coder is using the cfajaxproxy tag". The point is that it was the first one to suggest fileupload as an option, and which you ultimately acknowledged was a solution for you. I'm pressing the point because I want to help future readers (who find the thread) to find the answer which addresses the question. All those which follow then expand on that, which will help them.

The one you originally marked instead (which was another reply of mine) will NOT help them, as it was resolving another problem you raised in the thread (about cfloop'ing over an array).

[coder1957**]

A word to the wise.  There is a bug in CF11 ... handler for 

<cffile ACTION="UPLOADALL"
DESTINATION="c:\inetpub\wwwroot\snip\images\xxxxxxx\"
NAMECONFLICT="MAKEUNIQUE"
FILEFIELD="file_upload"
result="fileuploaded"
accept="image/*, image/jpg, image/jpeg,image/png"
>

If xxxxx does not exist, it does NOT throw an error.  

Instead CF corrupts the result.  And provides the fileuploaded.serverfile with the folder name you supplied and adds one or more integers.  

Definitely place a <Cfdirectory tag before it and wrap it in a cftry. 

[BKBK]

Hi coder1957__ ,

Thanks for sharing your finding. Please report the bug.

[coder1957**]

Already done.  Not tested it yet to see if it fails on CF16 or 18. 

[BKBK]

Hi coder1957__,
Some answers to your original question. Just for the record. 

There are reasons why your original code failed:

1) Assuming you placed the tag

<cfajaxproxy cfc="images" jsclassname="images">

at the top of the CFM page (which you should), then the following line of Javascript is incorrect:

var e= new (images);

Correct is:

var e= new images();

2) In any case, even if you used the correct Javascript, you would still have been unable to upload a file in the way you intended. It is simply not possible to do it using cfajaxproxy. 😞

When you use cfajaxproxy, ColdFusion translates the CFML functionality in the CFC into an equivalent Javascript proxy class. However, ColdFusion doesn't do this for every CFML functionality.

Alas, file upload is one of the functionalities for which ColdFusion does not create a proxy from CFML to Javascript. In fact, the documentation says, "You cannot use the setForm function to submit the contents of file fields."  I would imagine that this is for security reasons.

I hope this helps. In any case, if not you, then someone else in future.

Nevertheless, you don't go empty-handed! Here are 2 multi-file-upload solutions:

1) http://forums.adobe.com/thread/616042 

Posted by yours truly in this forum ten years ago this week. It requires Flash.

2) https://static.raymondcamden.com/cfuitherightway/cffileupload-multiple/index.html 

This one's by ColdFusion grandmaster, Raymond Camden. It is in Javascript. So it is close in spirit to what you were trying to do with cfajaxproxy. 

Remark: you might want to replace  jquery-2.1.1.js with a more recent version, for example, like this:

    <!--- <script src="js/jquery-2.1.1.js"></script> --->
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

[coder1957**]

We'll have to agree to disagree. 

I have been using var e= new (images); for years and it works fine. 

There may be TWO ways to skin this cat but there's nothing wrong with the above. 

I just tested "your" way using var e= new images() and it works too but nothing wrong that I can see with the first. 

[BKBK]

Well, if it ain't broke,... 🙂

(I shall leave it here. This is Javascript, not my forte. )