Struggling to get at data upload

[philaj]

$headers = getallheaders();

	if ($headers["Content-Type"] == "application/json") {
 	 	$jsondata = file_get_contents("php://input");    
		$data = json_decode($jsondata,TRUE); 	  	  				
  		echo ($data['SBP_Category']."/".$data['SBP_Details']);
  		echo ($data['upload_file']);  	
  	}
  	
	if (isset($_FILES['upload_file'])) {
    	if(move_uploaded_file($_FILES['upload_file']['tmp_name'], "temp/" . $_FILES['upload_file']['name'])){
        echo $_FILES['upload_file']['name']. " OK";
    } else {
        echo $_FILES['upload_file']['name']. " KO";
    }
    exit;
} else {
    echo "No files uploaded ...";
}

Request URL:http://strxxx.co.uk/SBPostPost.php
Request Method:POST
Status Code:200 OK
Request Headers
Provisional headers are shown
Content-type:application/json
Origin:http://127.0.0.1:58889
Referer:http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/Phils/AppData/Local/XDK/xdk-scratchdir/e14eb410-7cf2-4bed-ba25-515e6df98e8c/platforms/ios/www/index.html
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4
X-DevTools-Emulate-Network-Conditions-Client-Id:BFC389F1-2AF4-4347-8AC1-F9144DC2DA25
Request Payloadview source
{SBP_Category:Select, SBP_Details:xxxxx Detail xxxx, upload_file:[object File]}
SBP_Category: "Select"
SBP_Details: "xxxxx Detail xxxx"
upload_file: "[object File]"
Response Headers
Content-Encoding:gzip
Content-Length:251
Content-Type:text/html
Date:Sun, 20 Sep 2015 13:11:33 GMT
Server:Microsoft-IIS/8.5
Vary:Accept-Encoding

<script>
            function sendDataJS()
             {
                 var xmlhttp = new XHRObject();                
                 xmlhttp.onreadystatechange=function()
                 {
                     if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {  
                    document.getElementById('ResponseDiv').innerHTML = "Entry Posted";                       
                    }
                 }                               
                 var postdata = '{';
                 postdata += '"SBP_Category": "' + document.getElementById('Category').value + '"';
                 postdata += ',"SBP_Details": "' + document.getElementById('Details').value + '"';
                 postdata += ',"upload_file": "' + document.getElementById('mypic').files[0] + '"';
                 
                 postdata += '}';
                     
                 xmlhttp.open("POST","http://strxxx.co.uk/SBPostPost.php", false);
                 xmlhttp.setRequestHeader("Content-type","application/json");
                 
                xmlhttp.send(postdata);
             }

Getting very confused by all the options available - could someone please help.

 

I'm developing a hybrid HTML5/JS App in XDK that sends data to a PHP server. I can get at the data fields but struggling with a file (image).

 

The JS that sends is as above; preceded by the console Log - which looks like it is sending the file ok as an object

 

The PHP is also attached -

 

What happens is that the Data in Category and Detail is echoed back fine; the echo of $Data['ipload_file'[ shows 'object' - BUT the If ISSET echoes 'No Files uploaded'

 

Any help appreciated.

 

By the way - the extracts above may be in wrong order - had trouble getting them into the post

 

 

 

 

 

 

[Ch0cu3r]

When handling file uploads with ajax you cant just add the file field to the data string you pass to xmlhttp.send. Instead you have to use the FormData object. Tutorial showing usage

http://blog.teamtreehouse.com/uploading-files-ajax

 

For additional info read up on the documentation for handling file uploads using xmlhttprequest

https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files

[philaj]

<script>
            function sendData(form) 
            {           
            var postform = new FormData(); 
            var fileselect = document.getElementById('mypic');
            var files = fileselect.files;    
            postform.append('SBP_Details', document.getElementById('Details'));
            // Loop through each of the selected files.
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                // Check the file type.
                if (!file.type.match('image.*')) {
                    continue;
                }
                // Add the file to the request.
                postform.append('upload_file[]', file, file.name);
            }    

    //        postform.append('upload_file', document.getElementById('mypic'));
      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://stxxx.co.uk/SBPostPost.php", false);
             
             xmlhttp.setRequestHeader('Content-Type','multipart/form-data');
             
             xmlhttp.send(postform);    
            
            }     
        </script> 

Thanks Ch0cu3r

 

Went thru that tutorial and coded as it says - also took the php bits from the other article;

 

I now have as above in Jscript - and just echo $_POST, $_GET and $_Files but only get empty Arrays.....

...it's the PHP bit I need to

 

Phil

[Ch0cu3r]

A few problems with your javascript.

 

1) Assuming your sendData function is being called from the forms onsubmit event then you need to call  .preventDefault()  to stop the form submitting. Your function definition need to start with

function sendData(event) 
{
    event.preventDefault(); // stop the form from being submitted

    ... rest of function code

2) Is XHRObject a custom function of yours for returning the XMLHttpRequest object? If not then  new XHRObject  needs to be  new XMLHttpRequest();  . Another change you need to make is append  .value  to  document.getElementById('Details')  so its  document.getElementById('Details').value  

 

3) Remove the mulitpart form data header  xmlhttp.setRequestHeader('Content-Type','multipart/form-data');  it is not needed when using FormData objects

 

4) To see the output of the PHP code you need to use  xmlhttp.responsetext   inside this if statement  if (xmlhttp.readyState==4 && xmlhttp.status==200). Example

if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
   // write response of PHP script to <div id="info"> element
   document.getElementById('info').innerHTML = xmlhttp.responseText;
}

Edited September 21, 2015 by Ch0cu3r