JQuery ajax post jpg images in .net webservice. Image results are corrupted
I have a jQuery phonegap app that opens a camera and takes a picture.
Then I will post this image to the .net web service that I have coded.
I cannot use PhoneGap FileTransfer because it is not supported by Bada os, this is a requirement.
I have successfully uploaded an image from Phonegap FileSystem API, I bound it to .ajax: post type, I even got it from .net, but when .net saves the image to the server, the image results are corrupted
- → This is a valid Base64 encoded file, but there is this header "data: image / jpeg; base64, / 9j / 4AAQ ..... ="
How do I get rid of this header? should i trim it from .net or from ajax?
Any help would be appreciated.
This is my code:
//PHONEGAP CAMERA ACCESS (summed up)
navigator.camera.getPicture(onGetPictureSuccess, onGetPictureFail, { quality: 50, destinationType:Camera.DestinationType.FILE_URI });
window.resolveLocalFileSystemURI(imageURI, onResolveFileSystemURISuccess, onResolveFileSystemURIError);
fileEntry.file(gotFileSuccess, gotFileError);
new FileReader().readAsDataURL(file);
//UPLOAD FILE
function onDataReadSuccess(evt) {
var image_data = evt.target.result;
var filename = unique_id();
var filext = "jpg";
$.ajax({
type : 'POST',
url : SERVICE_BASE_URL+"/fotos/"+filename+"?ext="+filext,
cache: false,
timeout: 100000,
processData: false,
data: image_data,
contentType: 'image/jpeg',
success : function(data) {
console.log("Data Uploaded with success. Message: "+ data);
$.mobile.hidePageLoadingMsg();
$.mobile.changePage("ok.html");
}
});
}
In my .net web service, this is the method that gets called:
public string FotoSave(string filename, string extension, Stream fileContent)
{
string filePath = HttpContext.Current.Server.MapPath("~/foto_data/") + "\\" + filename;
FileStream writeStream = new FileStream(filePath, FileMode.OpenOrCreate, FileAccess.Write);
int Length = 256;
Byte[] buffer = new Byte[Length];
int bytesRead = readStream.Read(buffer, 0, Length);
// write the required bytes
while (bytesRead > 0)
{
writeStream.Write(buffer, 0, bytesRead);
bytesRead = readStream.Read(buffer, 0, Length);
}
readStream.Close();
writeStream.Close();
}
source to share
Ok, I got it working. The problem is that when we use $ .ajax (), the result is something that needs to fit into the text in the html, so for example you can put it directly in the tag
<textarea> background-image: data:data:image/jpeg;base64,/9j/4AAQ.....=</textarea>
But when trying Convert.FromBase64String (thestring) even .net tells you that "Invalid character in Base64 string".
In conclusion, leaving $ .ajax as it is, I changed my .net function like this:
//Convert input stream into string
StreamReader postReader = new StreamReader(inputStreamFromWebService);
string base64String = postReader.ReadToEnd();
if (base64String.StartsWith("data:"))
{
//remove unwanted ajax header
int indexOfBase64String = base64String.IndexOf(",") + 1;
int lenghtOfBase64String = base64String.Length - indexOfBase64String;
base64String = base64String.Substring(indexOfBase64String, lenghtOfBase64String);
}
//Convert from base64 string to byte[]
byte[] byteFromString;
byteFromString = Convert.FromBase64String(base64String);
MemoryStream stream = new MemoryStream(byteFromString);
System.IO.FileStream outFile;
outFile = new System.IO.FileStream(filePath, System.IO.FileMode.Create, System.IO.FileAccess.Write);
outFile.Write(byteFromString, 0, byteFromString.Length);
outFile.Close();
source to share