-1

I am making a phonegap app, in which the user submits a photo from his camera, i get it in a Base64 encoding form.

var posData=extImage1;
            $.ajax({
                type: 'POST',
                data: posData,
                timeout:50000,
                url: 'http://192.168.137.1/bee/services/add_photo.php',
                success: function(data){
                        alert(data);
                        addToList();
                },
                error: function(){
                    alert('Please check your internet connection');
                }
            });

server side the code is saved to the database, but when selected and used as div background; it won't work no matter what!

BG='url(' + "data:image/jpeg;base64," + item.car_intImage3+ ')';
    $('#item').css('background',BG);

why this is happening ? my guess is that during posting the data it got scrambled somehow.

I tried to save the image on server using the code from this question, but it just gives a corrupted image.

Update:

Using this decoder i submitted the posted 64 code and it also gives corrupted image. i think that means that there is something wrong with my post method. any suggestions?

Community
  • 1
  • 1
Zahema
  • 1,345
  • 2
  • 19
  • 35
  • is the image already correctly saved to your web storage? – oshell Jul 10 '15 at 09:29
  • what response you are getting/ – Ganesh K Jul 10 '15 at 09:30
  • Try [this](http://stackoverflow.com/questions/15709515/save-base64-encoded-image-with-ajax-request-in-php). – Abey Jul 10 '15 at 09:33
  • @HoschNok it's stored in a var, the posted to server. why would i need to save to web storage?! – Zahema Jul 10 '15 at 11:14
  • @vrs nothing, just an empty div and a corrupted image. – Zahema Jul 10 '15 at 11:15
  • @a3ey I was gonna try this, then i found out that the posted data that got inserted in the DB is corrupted. – Zahema Jul 10 '15 at 11:21
  • @IbrahimHero means your ajax success callback is getting called right? check how your php service is defined, it may be expecting some other params like {image:posData, type:"image/*", name:"sample image"} – Ganesh K Jul 10 '15 at 12:09
  • @vrs I am sorry, not sure if you are following-or maybe it's me?-. the data get posted but it's corrupted. – Zahema Jul 11 '15 at 13:41
  • @IbrahimHero I think you are getting corrupted image error message from your php service, right? My guess is your php service is expecting some other meta data along with base64 string. As you are using phonegap camera api, then there is no way the returned base64 is corrupted unless you did something on top of it. I don't see any code related to it. – Ganesh K Jul 13 '15 at 04:16
  • @vrs `var posData='extImage1='+extImage1` this is what i post. how to check the error message?! – Zahema Jul 15 '15 at 12:03

1 Answers1

0

It would be a lot cleaner and easier if you use Dropzone.js

Take a look at Dropzone.js Implementation. It is quite easy

This is how you can instantiate it 

var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

You can also listen to a lot of events like Adding a file, Removing a file

For Ex:

Dropzone.options.myAwesomeDropzone = {
  init: function() {
    this.on("addedfile", function(file) { alert("Added file."); });
  }
};

EDIT: The Above solutions will work if you are storing the image in your disk and just the image location in your database. In fact it would be a lot better if you do this way.

Now coming to your method of working with images, You would want to go through this link how-can-i-store-and-retrieve-images-from-a-mysql-database-using-php which has a straight forward answer

Also, Check the datatype that you are using, may be its truncating he encoded data that you are storing in the database and hence you might be getting corrupted images. Also check with the above method of storing the images in the database mentioned in the link.

Hope this solves your problem

Community
  • 1
  • 1
Abhinav
  • 8,028
  • 12
  • 48
  • 89
  • I am not sure how it would work with phonegap, anyway i don't get the image as an actual file but as Base64 encoding. – Zahema Jul 11 '15 at 13:46
  • i am sorry still doesn't help :D . i have a proplem getting the image to DB in 1st place – Zahema Jul 15 '15 at 12:06