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>

[WolfShade]

Hello, coder,

I've never worked with uploading a file via AJaX, but it's different than a normal form submit.

In a normal form submit, the form is submitted and all set attributes go with it.  But in AJaX, as you've already demonstrated, you create an object to be the form.  In your sample code, I don't see you setting the enctype.

May or may not be your issue, but something to look into.

HTH,

^ _ ^

UPDATE:

I did a quick Google search and found the following, which may be helpful.

https://thoughtbot.com/blog/ridiculously-simple-ajax-uploads-with-formdata

[Charlie Arehart]

FWIW, Wolfshade, it seems coder is using the cfajaxproxy tag (in his image.cfc, given the references to setform and sethttpmethods in there).

I looked earlier today and did not find any means (in any resources on that feature) for setting the enctype. I do see a 2009 bug tracker ticket with someone asking for it, but it was never addressed. And Ray Camden lamented in 2008 that the CF ajax features had no file upload feature.

That said, CF9 added a cffileupload tag which does an ajax upload, but it's designed to present an upload control it offers, which may not suit coder's needs. But as you note (and so does Ray's post), there are indeed many ajax upload tools out there (even if not built into CF). The challenge is finding a right fit for one's needs.

And I will admit I never used that cffileupload (or any ajax upload), let alone cfajaxproxy, so I remained silent in case others may have had an answer. But given your reply I wanted to offer this, and as much to get confirmation that coder is using cfajaxproxy, and to see if cffileupload had been considered.

[coder1957**]

You are correct, Charlie.  Using cfajaxproxy tag. 

I tried to put the cffileupload into the form page and after getting rid of bugs, the field or button is not visibie. 

I tried:

<cffileupload

addbuttonlabel= "label"
align = "center"
bgcolor = "blue"
clearbuttonlabel = "label"
deletebuttonlabel = "label"
extensionfilter = "none|jpg,jpeg,png"
height= "500"
hideUploadButton = "false"
maxfileselect = "1"
maxuploadsize = "10"
name = "file_upload"
oncomplete = "bbb"
onerror = "error"
onUploadComplete = "xxx"
progressbar = "true"
stoponerror = "true"
title = "Title panel name"
uploadbuttonlabel = "label"
url = "#cgi.script_name#"
width = "500">

</cffileupload>

and see nothing. 

And Charlie, yet again there's a typo in the docs where it has <cffileupload>

History:  a former developer of ours did add a file uploader to our code using blueimp.  And it broke. 

Understanding blueimp is above my pay grade.  It could be that it is trying to upload to a non existent folder but I'll be ****ed if I can find where in the code it does that.  So I was going to write it using the above method.  Til I realized it won't work.   

[Charlie Arehart]

As for your failed attempt with cffileupload, I can only recommend that you demo it in a page that does nothing else. Once you have it working, then find out what in your "real" page keeps it from appearing.

[coder1957**]

That's exactly where I am using it.  

The page I am using it does nothing else.  😞

[Charlie Arehart]

Well, I was responding to you saying, "I tried to put the cffileupload into the form page and after getting rid of bugs, the field or button is not visibie." So that didn't seem like a page that "does nothing else."

If it really is a page that does nothing else, then make a copy of it, put it in a new folder, put a blank application.cfm in that same folder, and call it as found in that folder. That will prevent the possible impact of an application.cfm or cfc in the parent or higher folders, which may be hampering the tag's working for you.

[coder1957**]

No, you misunderstand my comment.  

Based on the docs, the tag ITSELF is supposed to show a button and presumably a field into which the file name would go?   And it's not even doing that. 

[Charlie Arehart]

Well, to be clear, I did of course mean to suggest you put it in a form, indeed a cfform (if it requires that). Again, I have never used it. All I meant was that you would want to make sure (when "something doesn't work") to test it in a page that does nothing but that thing, in case something else was hampering it (which could included code in the application.cfm/cfc).

Moving on, and assuming you mean you did just that, I would point out that this cffileupload tag may be one of many which were deprecated in CF2016, forward (and even made to not work as of a certain update to CF11) because it leveraged something called the yui toolkit, which Adobe decided to no longer include in CF.  If you were to look at your browser dev tools, you may see a 404 happening on some files that CF has your browser trying to request, from the server. That would confirm this was the issue, if the 404s were to files/folders within the cf scripts folder.

To get those yui-based tags working again (if you really want to), there is a discussion at the bottom of the "deprecated features" page for CF2018 (which applies as well to 2016 and 11) showing how Adobe still offers a zip of the needed files, and it shows how and where to extract them. It's a bit fiddly, and could fail to work for some people if they're not careful, but most should be able to get it going in just a minute, with no CF restart required. For more, see https://helpx.adobe.com/coldfusion/deprecated-features.html.

Let us know if you decide to skip it or try it, and if the latter, does it get it working and do you find it to be the right solution for you? As Wolfshade shared (and I reiterated), there are indeed other ajax upload solutions out there. You don't HAVE to use the one Adobe provides--and some would argue that one should not, because it's based on such dated, deprecated libraries. 

But bringing things back to your original question, here's hoping someone can help with how to enable a post via cfajaxproxy to support the correct enctype for file uploads. 

[coder1957**]

I'm running CF11 on localhost.  And no errors in the browser console. 

I'm abandoning trying to get this to work and will have a developer fix the blueimp version or, use another solution. 

Thanks for your input. 

[coder1957**]

Decided to use Charlie's idea ... using iframe. 

Got it working fine using a single file upload.  Not like I hadn't done a thousand of them over the years. 

Problem I have is with multiple uploads. 

The field says 2 files selected.

But when it goes to upload them ... I ASSUMED this code would work?

<cfloop list="#form.file_upload#" index="this_file">

<cffile ACTION="UPLOAD"
        DESTINATION="c:\snip\\#listgetat(application.resources_folders, url.rid)#\"
        NAMECONFLICT="MAKEUNIQUE"
      FILEFIELD="#this_file#"
      accept="image/*, image/jpg, image/jpeg,image/png"
>

</cfloop>

Thought wrong.  

I get the error:

The form field C:/ColdFusion11/cfusion/runtime/work/Catalina/localhost/tmp/neotmp2207139492128668403.tmp did not contain a file.

If I revert to JUST using filefield="file_upload", I only get one succesfully processed.  

[Charlie Arehart]

Do you mean you are  trying the cffileupload I'd suggested? If so, it seems you need to change the cffile action to uploadall, as discussed here. 

It's mentioned also on the  doc page for cffileupload doc page though I see it also mentions using upload, and isn't as clear as it could be on the difference between them.

I do so wish the docs were open source, to more easily propose changes. Until then, one can file bug reports--including about doc issues--at tracker.adobe.com. 

Let us know if the uploadall gets you going. 

[coder1957**]

No, I didn't use that but I am now.  And it fails if used per the docs. 

I tried:

<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"
>

<cfloop array="#fileuploaded#" item="item">
                     <cflog text="uploaded [#item.serverfile#] ">
</cfloop>

and I get the error:

Attribute validation error for tag CFLOOP.

It has an invalid attribute combination: array,item

Yet the docs at 

https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-f/cffile-action-uploadall.htm...

say that exactly

<cfloop array="#fileUploaded#" item="item">

FRUSTRATING!  🙂

[Charlie Arehart]

You're missing the result attribute that would name the fileuploaded array it shows looping over. Just breathe, and take your time. These are things that ALL developers (in any language) have to deal with every day. You're not alone, nor unique in your suffering. 🙂 

[coder1957**]

Say what??  Look at mine again ... 

<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"
>

Or ... maybe for Easter I need new prescription glasses?  🙂

I should have chosen a different career path all those decades ago ... JK.

Loved almost EVERY day of it.  As have you, no doubt. 

[Charlie Arehart]

Sorry. I've been replying on my phone. Challenging in many ways.

So here's what I suspect is the problem. You're on cf11. Change the code to use index instead of array. 

If you had Googled cfloop array, you'd find https://helpx.adobe.com/coldfusion/cfml-reference/coldfusion-tags/tags-j-l/cfloop-looping-over-a-lis...

 , showing that the item attribute was added for use with array in cf2016 (as a convenience, to match its long-standing use with the collection attribute, for looping over structs). 

As for the cffile uploadall docs not clarifying that, well, the docs are indeed written for current releases, and so may not always work with older releases. Again, file a tracker ticket asking them to switch to index, to help future users still on old versions not trip over this. 

[coder1957**]

Nope.  Changed array to index ... and yes CF11.  Same error.  Thanks for trying. 

[Charlie Arehart · Accepted solution]

Change item to index, not array. Again, see the cfloop doc I pointed to if still unsure. 

[coder1957**]

That did it.  

You get another star!

Now ... where was I?  🙂

[Charlie Arehart]

Great to hear, and glad to have helped. And thanks for marking one of my replies as "the" answer.

But, for the sake of future readers, I think my first one pointing out the cffileupload option would be the best choice. That may be all some need, while others could read the rest, if needed.  Could you do that, please? . 

[coder1957**]

It would help out if I could figure out which post you meant. 

This WEAK software doesn't include a post #.  Not even an accurate time stamp.  

Sorry to bug you but if you can give me a "string" to look for that is unique to that post I'd happy to.  

Or am I being really DUMB as usual.  No need to answer that!

[Charlie Arehart]

Well, you're right that there no way to link and no timestamp. But I did say "my first one pointing out the cffileupload option". I should have put a comma "one", to clarify that that it was indeed my first comment at all here, that referred to it. 

[coder1957**]

Ok, ran into a small snag ... in the iframe. 

The iframe adds the uploaded image to the database, but once that is done, I want to redraw the photo "carousel" into the web site admin panel.  Normally I do this by calling an AJAX function then taking that result and innerHTML it into a <div id="result">

BUT within the iframe the <div> in the modular popup is not visible within the DOM. 

Not sure I've ever tired this ... so what syntax does one use to address the DIV outside the iframe?

I tried several including 

adminConsole.innerHTML=carousel; 

document.adminConsole.innerHTML=carousel; 

all I get is the error

ReferenceError: adminConsole is not defined

[Charlie Arehart]

I don't do enough JS to help greatly here, but I would say at least that I think innerhtml can only be used in referring to an HTML tag (whose content, between the opening and closing tags you want to fill via js). Adminconsole instead sounds like some higher-level reference, like perhaps a form name or window name. Which is it?

And someone trying to help further may benefit to see more of the code, but then it may be far better for you to create a very small example to demonstrate things, rather than share all your code.

And as for how js within a frame can refer to objects in the page loading the frame, I'd think that's something you could find discussed more broadly (and readily) in any resource about JS and frames. 

Indeed, this is getting wide-afield of the original topic (and this CF forum), though I realize you may want to assert that it's still "part" of your original concern. Fair enough.  I just mean (for your sake) that you may find far MORE people able to help, if you ask either in some other CF forum (or at least a new post, new title), or even somewhere else (a place where folks help each other with js).

But I realize you may not want to do that, so we can see if anyone else has more. And maybe you're quite close to your solution, and perhaps even the little I shared may be enough to get you over the hump.

One more time, though, could you please mark my FIRST comment above as "the answer", to help future readers looking at that specific question and how the cffileupload helped you get that part going?

[coder1957**]

I am using HTML tags that reference the innerHTML.  Use this method all the time. 

I am posting here because I am using 

ColdFusion.navigate('/manage.cfm?loc_id='+propID,'adminConsole');rePositionWindow('adminConsole');ColdFusion.Window.show('adminConsole')

so it could well be specific to CF. 

Dare I ask why you're being pedantic about the Correct answer thing?  I asked you to send me a string copy and paste to I know which post you meant.  But seriously?