I tried unsuccessfully to send a Blob file (which is a .OBJ file type) to the server using AJAX. I want to be able to do this without using the input file field. I am creating an online avatar creator, so the Blob file that will be sent to the server is generated from the symbol that was originally imported into my Three.js scene. I was able to send the Blob file containing String to the server and save it in the specified folder (which I am trying to do with the BLOB.OBJ file). I tried converting Blob to Base64 before sending it to a POST request, but that didn't work. The file I'm trying to send is 3 MB.
Here is my JavaScript code to create a Blob file and send it to my PHP script on the server using AJAX.
//Create OBJ var exporter = new THREE.OBJExporter(); var result = exporter.parse(child); //Generate file to send to server var formData = new FormData(); var characterBlob = new Blob([result], {type: "octet/stream"}); var reader = new FileReader(); reader.readAsDataURL(characterBlob); reader.onloadend = function() { formData.append('file', reader.result); $.ajax({ url: "ExecuteMaya.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: formData, // Data sent to server, a set of key/value pairs (ie form fields and values) processData:false, // To send DOMDocument or non processed data file it is set to false contentType: false, // The content type used when sending data to the server }).done(function(data) { console.log(data); }); }
Here is my PHP script to process the submitted file.
<?php $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable $targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>"; echo "<br/><b>File Name:</b> " . $_FILES["file"]["name"] . "<br>"; echo "<b>Type:</b> " . $_FILES["file"]["type"] . "<br>"; echo "<b>Size:</b> " . ($_FILES["file"]["size"] / 1024) . " kB<br>"; echo "<b>Temp file:</b> " . $_FILES["file"]["tmp_name"] . "<br>"; ?>
Any help would be greatly appreciated!
UPDATE 1: var result = exporter.parse(child); is a string, and whenever I print this variable on the console, it takes a few minutes to load. Will the size of this line be a possible problem when I try to send it to the server?
UPDATE 2: this will be printed on the console after executing the PHP script, which makes me think that nothing is being sent to the server, or the data sent is being processed correctly by the PHP script.
Image uploaded successfully ... !!
File name:
A type:
Size: 0 kB
Temp File:
UPDATE 3: Here is the link to the file I'm trying to send. http://www.filehosting.org/file/details/578744/CleanFemaleOBJ.obj
You can view this file in TextEdit / NotePad to view the line I want to send. This is pretty much a text file with the extension .obj to convert it to this format so it can be opened in Maya.
UPDATE 4: I have now changed my JavaScript code so that Blob is added to FormData and not the result of reading .readAsDataURL (characterBlob).
//Create OBJ var exporter = new THREE.OBJExporter(); var result = exporter.parse(child); //Generate file to send to server var formData = new FormData(); var characterBlob = new Blob([result], {type: "octet/stream"}); formData.append('file', result); $.ajax({ url: "ExecuteMaya.php", // Url to which the request is send type: "POST", // Type of request to be send, called as method data: formData, // Data sent to server, a set of key/value pairs (ie form fields and values) processData: false, // To send DOMDocument or non processed data file it is set to false }).done(function(data) { console.log(data); });