PDA

View Full Version : Uploading A picture



pkanyerezi
21 Oct 2013, 1:20 AM
I was so excited when i learnt of the new capabilities of ST2.3, including uploading files using XHR2. But am having some hard time implementing it.

Am trying to follow the examples in http://docs.sencha.com/touch/2.3.0/#!/guide/xhr2_guide .
And my problem is i don't know how to get the image on the server side using php because $_FILE[] can not get raw data which is sent from the client side(through the Ajax request).
I don't know if i have to break down the raw data into filename,size etc (xhr.setRequestHeader("X-File-Name", request.binaryData.name);) and send it as a RequestHeader. Or there is a way i can manipulate the binaryData on the server side using php.

Here is my sencha code.

{
xtype:"fileinput",
name:'File',
itemId:'File',
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});


var request = {
url: 'http://localhost/scout/webroot/img/pic/getfile.php',
method: 'POST',
xhr2: true,
requestHeader:{

},
progress:progressIndicator,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};


Ext.Viewport.add(progressIndicator);
var files = input.dom.files;

if (files.length) {
request.binaryData = files[0];
console.log(request.binaryData.name);
console.log(request);
request.setRequestHeader("X-File-Name", request.binaryData.name);
Ext.Ajax.request(request);
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
},

Thank you in Advance :-/

ram.pekam
24 Oct 2013, 6:35 AM
I am trying to upload image to JAVAServer, Following are the details :

I am using server : JAVA Spring with REST Services and Extjs 4.

I need to upload image using base64 to Server.

1. What are the best practices for uploading image to server ?

2. How to convert image to base64 string in extjs4 ?

3. How to submit form along with form data ?

With this I am able to hit server but every parameter is null i.e. no data is being transferred
var form = Ext.getCmp('member_form').getForm();


if (form.isValid()) // Validation
{
// communicating with server for registering member info
form.submit({
url : '/my/Test',
// standardSubmit: true,
method : 'POST',
waitMsg : 'Registring...',
success : function(form, o) {
console.log(form);
msg('Success', 'Processed file "'
+ o.result.file
+ '" on the server');
},
failure : function() {
alert('Registration failed...');
}
});
}

Please help me I am stucked at this point.

fmoseley
25 Oct 2013, 2:19 AM
See the php code from the following example.
http://docs.sencha.com/touch/2.3.0/#!/guide/xhr2_guide-section-example-6%3A-ajax-array-buffer-response
It is in comments of the following html file.
https://github.com/senchalabs/ajax_demos/blob/master/ajax-upload-arraybuffer.html

pkanyerezi
26 Oct 2013, 1:38 AM
Thank you for the response.

I had already tried that out and it did not help. I want to upload a file to a folder on the serverside and store the file name in a mysql database using php. like the normal uploads.