Skip to content

Instantly share code, notes, and snippets.

@furi2
Created November 19, 2011 07:36
Show Gist options
  • Save furi2/1378595 to your computer and use it in GitHub Desktop.
Save furi2/1378595 to your computer and use it in GitHub Desktop.
Uploading multipart/form-data type data from Titanium
var content = '';
var boundary = '---------------------------170062046428149';
content += '--'+ boundary + '\r\n';
content += 'Content-Disposition: form-data; name="uploadToken"\r\n';
content += '\r\n';
content += upload_token + '\r\n';
content += '--'+ boundary + '\r\n';
content += 'Content-Disposition: form-data; name="destFolderPath"\r\n';
content += '\r\n';
content += '/Images\r\n';
content += '--'+ boundary + '\r\n';
content += 'Content-Disposition: form-data; name="fileContent"; filename="test.jpg"\r\n';
content += 'Content-Type: binary/octet-stream\r\n';
content += '\r\n';
var file = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'test.jpg');
var full_content = Ti.createBuffer({value: content});
var fileStream = Ti.Stream.createStream({ source : file.read(), mode : Titanium.Stream.MODE_READ});
var content_size = full_content.append(Ti.Stream.readAll(fileStream));
Ti.API.debug('Appended File Size : ' + content_size ); // ==> same as file.size
content = '\r\n'
content += '--'+ boundary + '--\r\n';
full_content.append(Ti.createBuffer({value : content}));
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
var send_data = full_content.toBlob();
Ti.API.debug(send_data);
// xhr.send(send_data); // ==> According to the server response, it sends more bytes than the original file size. (original 105kb, sent data 180kb)
// xhr.send({image : send_data }); // ==> Content length becomes 0
// xhr.send({image : file.read() }); // ==> Content length becomes 0
@yagitoshiro
Copy link

var upload_token = "hi! I am a token!";

var content = '';
var boundary = '---------------------------170062046428149';

content += '--'+ boundary + '\r\n';
content += 'Content-Disposition: form-data; name="uploadToken"\r\n';
content += '\r\n';
content += upload_token + '\r\n';
content += '--'+ boundary + '\r\n';
content += 'Content-Disposition: form-data; name="destFolderPath"\r\n';
content += '\r\n';
content += '/Images\r\n';
content += '--'+ boundary + '\r\n';
content += 'Content-Disposition: form-data; name="fileContent"; filename="test.jpg"\r\n';
content += 'Content-Type: binary/octet-stream\r\n';
content += '\r\n';

//var file = Ti.Filesystem.getFile(Ti.Filesystem. applicationDataDirectory, 'test.jpg');
var file = Ti.Filesystem.getFile(Ti.Filesystem.resourcesDirectory, 'test.jpg');
var full_content = Ti.createBuffer({value: content});
var fileStream = Ti.Stream.createStream({ source : file.read(), mode : Titanium.Stream.MODE_READ});
var content_size = full_content.append(Ti.Stream.readAll(fileStream));
Ti.API.debug('Appended File Size : ' + content_size ); // ==> same as file.size

content = '\r\n'
content += '--'+ boundary + '--\r\n';
full_content.append(Ti.createBuffer({value : content}));

xhr = Ti.Network.createHTTPClient();
var send_data = full_content.toBlob();
Ti.API.debug(send_data);

var url = 'http://192.168.1.7/android_test/';
xhr.onload = function(){
  alert("done");
};
xhr.onerror = function(){
  alert("go ahead, make my day...");
};
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
xhr.send({image:send_data});

@pdichone
Copy link

Guys, I know this is from a long time ago, but I am very desperate at this point. I am trying to send an image to my server and it's not working. Below is my code:

   var win = Ti.UI.createWindow({

   backgroundColor : "#FFF"
    });

    var ind = Titanium.UI.createProgressBar({
   width : 200,
   height : 50,
   min : 0,
      max : 1,
  value : 0,
  style : Titanium.UI.iPhone.ProgressBarStyle.PLAIN,
  top : 10,
  message : 'Uploading Image',
  font : {
    fontSize : 12,
    fontWeight : 'bold'
  },
  color : '#888'
   });

   win.add(ind);
   ind.show();

   win.open();

   Titanium.Media.openPhotoGallery({

success : function(event) {
    alert("success! event: " + JSON.stringify(event));
    alert('Our type was: ' + event.mediaType);
    var image = event.media;
      alert(image);
    var xhr = Titanium.Network.createHTTPClient();

    xhr.onerror = function(e) {
        Ti.API.info('IN ERROR ' + e.error);
    };
    xhr.onload = function() {
        Ti.API.info('IN ONLOAD ' + this.status + ' readyState ' + this.readyState);
    };
    xhr.onsendstream = function(e) {
        ind.value = e.progress;
        //Ti.API.info('ONSENDSTREAM - PROGRESS: ' + e.progress + ' ' + this.status + ' ' +   this.readyState);

    };
    // open the client
    xhr.open('POST', 'http://198.252.76.187/scripts/photoUploader.php');
    xhr.setRequestHeader("ContentType", "image/jpeg");
    //xhr.setRequestHeader("Connection", "close");
    // send the data
    xhr.send({
        media : image
    });

  },
  cancel : function() {

  },
  error : function(error) {
  },
  allowImageEditing : true
  }); 

and here's my php server-side script:

    print_r ( $_FILES [ 'media' ] );
     $target = "upload/";
     $target = $target . basename( $_FILES['media']['name']) ;
    $ok=1;
    if(move_uploaded_file($_FILES['media']['tmp_name'], $target))
    {
         echo "The file ". basename( $_FILES['media']['name']). " has been uploaded";
    }
    else {
         echo "Sorry, there was a problem uploading your file.";
    }

Any help, guidance you can send my way is highly appreciated. I have been trying to get this to work for about 2 weeks now, and no luck. Thank you very much for your help in advance.

Regards

@chrisribe
Copy link

Has anyone progressed on this. I got my code to work on iOS but NOT on android.... WTF !?

@SquirrelMobile
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment