Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
ciiko
Posts: 30
Registered: ‎06-14-2012
My Device: 9810
My Carrier: Telkomsel
Accepted Solution

Save form to server

Hi All,

 

I really need help in here, I'm newbie in here.

I want to ask how to insert data to server, using regular form with method='POST' but there is <input type='file' /> in there to upload image.

I tried using form action='http://server.com/file.php to catch the $_POST, it's work, but how to get back to apps after save the data??

If there is any easy way to save some data and upload image, please help me guys

Please use plain text.
Regular Contributor
liammccann
Posts: 68
Registered: ‎06-12-2012
My Device: Blackberry Bold 9780
My Carrier: Vodafone

Re: Save form to server

Not 100 percent sure, but i would rewrite the submit method using jQuery then send all the details to the server without opening the page in a new window if that makes sense?
Please use plain text.
Developer
ciiko
Posts: 30
Registered: ‎06-14-2012
My Device: 9810
My Carrier: Telkomsel

Re: Save form to server


liammccann wrote:
Not 100 percent sure, but i would rewrite the submit method using jQuery then send all the details to the server without opening the page in a new window if that makes sense?

Yes, it makes sanse, but how to send and the input file for upload an image using jquery ?

Please use plain text.
Regular Contributor
liammccann
Posts: 68
Registered: ‎06-12-2012
My Device: Blackberry Bold 9780
My Carrier: Vodafone

Re: Save form to server

Encode it to base x64 http://webcodertools.com/imagetobase64converter/ , i think blackberry my do it on its own
Please use plain text.
Developer
nunodonato
Posts: 313
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: Save form to server

Hi
I agree with Liam. Use ajax to send the data, your app should not change the page, you just need to wait for the response and change the UI accordingly.
Nuno
theBBthing.wordpress.com - my BlackBerry development blog: news, tips and tutorials
bitoutsidethebox.com - re-imagining digital solutions


Please use plain text.
Regular Contributor
liammccann
Posts: 68
Registered: ‎06-12-2012
My Device: Blackberry Bold 9780
My Carrier: Vodafone

Re: Save form to server

Yes, It would give an example but don't have time but bas icily you want to :

Give details and image from use
Encode the image
Put the data and image in a json e.g.
{"Name": "Liam", "Encoded": "encoded string here"}
Post it to the server like filename.php?name=encoded=?
Or even send it more securely
Once the server responds and you receive it alert the user or update the UI.

Do not change the page to send information sounds like very bad practice.
Please use plain text.
Developer
ciiko
Posts: 30
Registered: ‎06-14-2012
My Device: 9810
My Carrier: Telkomsel

Re: Save form to server


liammccann wrote:
Encode it to base x64 http://webcodertools.com/imagetobase64converter/ , i think blackberry my do it on its own

Hi Liam,

 

This is my code for encode using base64 :

 

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
document.getElementById('gambarnya').src=oFREvent.target.result;
};

function loadImageFile() {

if (document.getElementById("uploadImage").files.length === 0) { return; }
var oFile = document.getElementById("uploadImage").files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);

}

 

and this is my html :

<input id="uploadImage" type="file" name="myPhoto" onChange="loadImageFile();" />

<img id='gambarnya' width='20px' height='20px' />

 

When I testing in my device. it's not working. but when I test in ripple or browser, it's run.

Hope you can help me again 

Please use plain text.
Regular Contributor
liammccann
Posts: 68
Registered: ‎06-12-2012
My Device: Blackberry Bold 9780
My Carrier: Vodafone

Re: Save form to server

Im not able to test it currently, but use web console and javascritp alerts to work out any issues/bugs
Please use plain text.
Developer
ciiko
Posts: 30
Registered: ‎06-14-2012
My Device: 9810
My Carrier: Telkomsel

Re: Save form to server

[ Edited ]

liammccann wrote:
Im not able to test it currently, but use web console and javascritp alerts to work out any issues/bugs

I'm pretty sure, the code stop when I start using FileReader function

 

oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

 

function loadImageFile() {
 if (document.getElementById("uploadImage").files.length === 0) {return; }
var oFile = document.getElementById("uploadImage").files[0]; 
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}

 

//The code stop working in this function

oFReader.onload = function (oFREvent) {

document.getElementById("uploadPreview").src=oFREvent.target.result;
document.getElementById('gambarnya').src=oFREvent.target.result;
};

Please use plain text.
Regular Contributor
liammccann
Posts: 68
Registered: ‎06-12-2012
My Device: Blackberry Bold 9780
My Carrier: Vodafone

Re: Save form to server

Please use plain text.