Skip to main content
C
coder1957**
Known Participant
April 7, 2020
Answered

file upload using AJAX

  • April 7, 2020
  • 2 replies
  • 7790 views

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>

 

    This topic has been closed for replies.
    Correct answer Charlie Arehart

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

     


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

    2 replies

    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    April 19, 2020

    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>

    C
    coder1957**Author
    Known Participant
    April 19, 2020

    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
    Community Expert
    BKBKCommunity Expert
    Community Expert
    April 19, 2020

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

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

    WolfShade
    WolfShade
    Legend
    April 7, 2020

    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
    Community Expert
    Charlie ArehartCommunity Expert
    Community Expert
    April 7, 2020

    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.

    /Charlie (troubleshooter, carehart. org)
    C
    coder1957**Author
    Known Participant
    April 7, 2020

    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.   

     

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices