Hybrid App in XDK - how to upload Form data and File in same upload

Question

Fairly new but learning more every day. I am creating a hybrid App in XDK and have so far managed to get basic data uploaded to a php server using the following;

<script>
        function sendData()
         {
             var xmlhttp;
             if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
             xmlhttp.onreadystatechange=function()
             {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                alert("All Gone");
                }
             }

             var postdata = '{"SBP_UserName": "Phil", "SBP_Title": "Title1"}';
             xmlhttp.open("POST","http://stxxx.co.uk/SBPostPost.php", false);
             xmlhttp.setRequestHeader("Content-type","application/json");
             xmlhttp.send(postdata);
         }
    </script>

Problem: I have searched for 2 days and am getting lost and confused. First - and probably very basic - How do I pass the data from my HTML input form into this function to be sent (what is going at the moment is hardcoded as you can see);

But Most important - how can I get this to send a Form that contains Input fields AND a File (graphic) in the same upload.

Any help will be very much appreciated.

I'm still really struggling...any further help would be very much appreciated.

This is my FORM

<form id="PostData" name="PostData" method = "post" enctype="multipart/form-data">
                         <p>Page Title<p>  
                         <label class="narrow-control label-inline" for="VehicleReg">Vehicle Reg:</label>
                         <input class="wide-control" type="text" name="VehicleReg" id="VehicleReg">
                         
                         <label class="narrow-control label-inline" for="Category">Offense:</label>
                         <select class="wide-control" name="Category" id="Category">
                            <option>Select</option>
                            <option>Opt1</option>
                            <option>Opt2</option>
                         </select>
                         <label class="narrow-control label-inline" for="Details">Details</label>
                         <textarea class="wide-control" rows="4" wrap="soft" name="Details" id="Details"></textarea>
                         <input id="mypic" type="file" accept="image/*;capture=camera" width="50%">    
                         
                        
                        <button onclick="sendData(this.form)">Post</button>
               
</form>

and here the JS

<script>
            function sendData(form) 
            {           
            var postform = new FormData(form); 
            var xmlhttp = new XHRObject();                              
            xmlhttp.onreadystatechange=function()
             {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {                    
                //xmlhttp.responsetext will have what is sent back - use Print_R in php                   
                }
             }                            
             xmlhttp.open("POST","http://sxxxx.co.uk/SBPostPost.php", false);
             
             xmlhttp.setRequestHeader("Content-type","multipart/form-data");
             
             // only sends now previous stuff just establishing a connection 
             xmlhttp.send(postform);    
            
            }
                
            
        </script>

When I run in an emulator and look at the console - it IS communicating with my back end; and the headers hold the data fields, but it's failing (I think) on accessing the Picture that has been selected. Error is http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/…ratchdir/e14eb410-7cf2-4bed-ba25-515e6df98e8c/platforms/ios/www/index.html 404 (Not Found)

Any idea?

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

Intel's XDK provides a javascript API that you can tap into for features like this. An example of how to do a file upload using it can be found here:

https://software.intel.com/en-us/node/493213

Please note that some of Intel XDK's features can only be executed if you're testing your app in crosswalk, or if you're running a compiled application.

If you don't want to use their existing APIs, you can always fall back on native JS or on other javascript libraries. There are quite a few examples of this already on StackOverflow. A solid example can be found here:

How can I upload files asynchronously?

As for accessing data from your form, you may want to take a look at the following:

// Vanilla javascript

JavaScript: how to get value of text input field?

var myValue = document.getElementById('textbox_id').value;

// With jQuery

http://api.jquery.com/val/

edited May 23 '17 at 12:14

Community

1
1

answered Sep 09 '15 at 20:45

Daniel Brown

2,354
3
25
39

Thanks Daniel - I am ok with uploading files on their own, but what I need is to include the file with the form data so that they are together in the backend database. If separate it is difficult to tie them together, especially if lots of uploads at the same time. – PhilAJ Sep 10 '15 at 10:21
Try this: http://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax or this: http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload – Daniel Brown Sep 10 '15 at 13:56

Hybrid App in XDK - how to upload Form data and File in same upload

1 Answers1