Image getting corrupted on Upload to the file storage

Connecting to File Storage
1

Not sure is its a DSP issue, but seeking help in case someone has come across the same issue.

I am using Camera Plugin of Phonegap to take a picture and upload the same using Dreamfactory Angular JS API.

I have already tried the strategies mentioned below:-

  1. Local Storage
  2. File URL
  3. DATA_URL
  4. Encode URI as well

Nothing works in getting the data correctly to the server.
The image is correct on the Phone, as I can see the image correctly, on setting it to an image source, before uploading.

My code is below:-
$scope.uploadImage = function(){
navigator.camera.getPicture(onSuccess, onFail,
{ quality: 100,
//destinationType: Camera.DestinationType.FILE_URI,
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 200,
targetHeight: 200
});
}
function onSuccess(imageData) {
console.log(“imageData”);
$scope.img = {};
$scope.img.src = “data:image/jpeg;base64,”+imageData;
window.localStorage.setItem(“ImageClicked”, “data:image/jpeg;base64,”+imageData);
//$scope.img.src = imageData;
//FileService.createFile(encodeURI(imageData));
//FileService.createFile(“data:image/jpeg;base64,”+imageData);
FileService.createFile(window.localStorage.getItem(“ImageClicked”));
//FileService.createFile(imageData);
}

function onFail(message) {
alert('Failed because: ’ + message);
}

.factory(‘FileService’, function(DreamFactory){
return {
createFile:function(body){
console.log(“entered here”);
var request={};
request.container = “containerName”;
request.file_path = “/image8.jpeg”;
request.body=body;
return DreamFactory.api.files.createFile(request);
}
};
})

1 Like
2

Did You try to fetch image from server after upload? Compare differences between retrieved and sent data.
May You test it with some static URI image (not generated from Your camera) like 10px x 10px and post the results here? Just to know more about nature of this corruption.

3

@prosto_lyubo
I tried with the option sourceType : Camera.PictureSourceType.PHOTOLIBRARY,
of cordova camera plugin.

But it also has the same fate.
Shows up fine on the local image src, but the file after upload can’t be opened.

4

@benbusse , @toddappleton, @jeffreystables

I am unable to get a file uploaded without it being corrupted to the File storage using the Angular JS File API.

Pleas tell me how to get this uploaded?
Below is the code for the same.

I am uploading this from the camera plugin from a mobile, but even if I directly go and upload from your API_DOCs its failing, which signals me that I am doing something wrong.

It is a small png file, which I am assigning to a body variable and then calling the following:-
var request={};
request.container = “container_name”;
request.file_path = “/image23.png”;
request.body=body;
DreamFactory.api.files.createFile(request);

This without fail corrupts the file. It gets uploaded though.
Can you please correct the mistake I am making.

var body="âPNG

Here above, I had actually pasted the whole content of a small png file, but it vanished, may be due to some invalid characters.

5

@praveen Can you please post the original uploaded data as well as the full request and response sent to and returned from your DSP? If you are unable to format it for the forum, please post it somewhere such as Pastebin.

And was @tborja’s code example not useful for you?

6

@jeffreystables
I just opened a small png file in a text edit, and have pasted the characters inside that:- http://pastebin.com/a2yytTLZ

However, I dont know if simply assigning the body to the content like this is the way.

Yes, I have tried the @tborja example as well, and also pasted there. But, I am not sure why getting corrupted.

7

Can you please verify at your end that the Angular SDK based fileservice works fine for images, and does not corrupt them.
As I see the same behavior with the API Docs as well.

You can explain me the process with a small word doc as well. Basic process would do.
I can see it has a body parameter, but do I just pour in the content of the file or how else its to be done?

I tried Cordova’s File Transfer Plugin, but it uploads a zero size file.
Below imageURI is the fileURI I get from Camera Plugin or Phone Gap.

and this is what I do there:-
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey=“file”;
// options.fileName=imageURI.substr(imageURI.lastIndexOf(’/’)+1);
options.fileName=“hello123.jpeg”;
options.mimeType=“image/jpeg”;
var params = new Object();
params.value1 = “test”;
params.value2 = “param”;

        options.params = params;
        options.chunkedMode = false;

        var ft = new FileTransfer();
        ft.upload(imageURI, "http://URL/rest/file/container//hello123.jpeg?app_name=hospi", win, fail, options);
    }
8

“Uploaded photo image to DreamFactory folder is corrupted” seems a common problem for many mobile developers. We have encountered this problem as well. Still struggle to find out a solution.
Upload photo is a common feature for many MBaaS but it is difficult to do in DreamFactory backend.

It will be good for DreamFactory developers if some one (e.g. DreamFactory) can share a workable code sample code (e.g. in AngularJS) for the photo image upload function.

Thanks

Benny

9

Here is a link provided previously to users having trouble uploading and retrieving base64-encoded images. Be sure that you are encoding and decoding properly.

http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript

10

Same problem when uploading images as multipart file in android. Tested using Ion library and AsyncHttpClient (loopj).