How do I upload a (.OBJ) Blob file to the server using PHP and jQuery?

Question

I have been trying to upload a file from my webpage to a folder on the server using jQuery and PHP.

Here is my JavaScript code for generating the file to send and then using a POST request to send the file to my PHP script so that it can then handle the file and save it to a particular folder.

//Generate file to send to server
var formData = new FormData();
var characterBlob = new Blob([result], {type: "octet/stream"});
formData.append('Character', characterBlob);

//Communicate with the server
$.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 (i.e. form fields and values)
    contentType: false,       // The content type used when sending data to the server.
    cache: false,             // To unable request pages to be cached
    processData:false,        // To send DOMDocument or non processed data file it is set to false
    success: function(data)   // A function to be called if request succeeds
{
    $('#loading').hide();
    $("#message").html(data);
}
});

Here is my PHP script to handle the sent file and save it in a specified folder.

<?php
$sourcePath = $_FILES['file']['tmp_name'];       // Storing source path of the file in a variable
$targetPath = "/Applications/AMPPS/www/webGL/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>";
?>

When I try to send the file from my webpage nothing appears in the 'Upload' folder that I am trying to save the file to.

Could someone please tell me why a file is not saved in the 'Upload' folder? I am eventually looking to open this file in a Maya application on the server and run some Python code. Would I even need to save the file on the server before opening it in Maya? Or could I open Maya with the file straight away?

Answer 1

It seems you are not appending the file to uploaded to the form data, May be you need something like this.

var elem = $(this).val() // lets say this is the element where you uploaded the photo
var formData = new FormData();
formData.append('file', elem[0].files[0]);
$.ajax({
    url: "ExecuteMaya.php",
    type: "POST",
    data : formData,
    processData: false,  // tell jQuery not to process the data
    contentType: false,
    success: function(result){
 // your code executed successfully
}

Answer 2

Try use my code and tell me if it works. This should work if you adapt it to your filenames and input, and other elements ids, it's tested by me:

$('#upload').on('click', function(e) {
  $('#message').fadeOut();
  e.preventDefault();
  if ($('#file')[0].files.length == 0) {
    alert('Choose a file!');
  } else {
    var file_data = $('#file').prop('files')[0]; //file object details  
    var form_data = new FormData($('#form')[0]);
    form_data.append('file', file_data);
    var unique_identifier = $('#unique_identifier').val();
    $.ajax({
      url: 'upload.php',
      dataType: 'text', // what to expect back from the PHP script, if anything
      cache: false,
      contentType: false,
      processData: false,
      data: form_data,
      type: 'post',
      success: function(php_script_response) {
        $('#message').html(php_script_response).fadeIn();
        //alert(php_script_response); // display response from the PHP script, if any
      }
    });
  }
});

<form id='form' action='' method='post' enctype='multipart/form-data'>
  <input type='hidden' name='unique_identifier' id='unique_identifier' placeholder='unique identfier' value="<?php echo rand(1000000, 9999999); ?>">
  <input type='file' name='file' id='file' />
  <a id='upload'>Upload</a>
</form>

And the PHP script I made:

$unique_identifier = (isset($_POST['unique_identifier']))?trim($_POST['unique_identifier']):'';
$upload_directory = 'upload/' . $unique_identifier . '/';
if (!file_exists($upload_directory)) {
    mkdir ($upload_directory, 0777);
}
$original_filename = basename($_FILES['file']['name']);
$destination = $upload_directory . $original_filename;

move_uploaded_file($_FILES['file']['tmp_name'], $destination)

Also, I recomend you to do some PHP validation.