3

I'm new to mobile apps and developing an APP where I need to upload the photo and store in to the server.

I have the JS code as follows to store photo in to the localstorage first and then get that photo using getitem and convert in to base64 and finally move it to server with image conversion technique (base64_decode) using PHP

function saveImage(photoURI,task_id) {
alert("in save image");
//remove the old photo if exists
var old_photoURI;
if (old_photoURI = loadImage(task_id)) {
    deleteImage(old_photoURI,task_id);
}

//update the local database
localStorage.setItem("tmp_photo_"+task_id, photoURI); 
return true; }

code to get the image stored on localstorage

function loadImage(task_id) {
alert("in load image")
//read the current photo
return localStorage.getItem("tmp_photo_"+task_id); }

and below code is to convert the image in to base64

var dt = new Date();
                var timeupload = dt.getDate() + "" + (dt.getMonth()+1) + "" + dt.getFullYear() + "" + dt.getHours() + "" + dt.getMinutes() + "" + dt.getSeconds();
                imgname = task_id+"_"+timeupload+'.jpeg';

                alert(loadImage(task_id) + "load image task id");

                var filesSelected = loadImage(task_id);

                alert(filesSelected + "files selected");
                alert(filesSelected.length + "files lenth");

                if (filesSelected.length > 0)
                {
                    var fileToLoad = filesSelected[0];

                    var fileReader = new FileReader();

                    fileReader.onload = function(fileLoadedEvent) {
                        var srcData = fileLoadedEvent.target.result; // <--- data: base64

                        var newImage = document.createElement('img');
                        newImage.src = srcData;
                        base64_string = newImage.outerHTML;
                        alert(srcData + "srouce data  now");

                    }
                    fileReader.readAsDataURL(fileToLoad);
                }

and finally pass this srcData value to Service, which has all functionality to convert into image again and save it into folder on server.

I have save functionality (uploading the signature to server) which works perfectly with the same code.

halfer
  • 19,824
  • 17
  • 99
  • 186
Kiran Kumar
  • 181
  • 1
  • 4
  • 13
  • You said: `I have save functionality (uploading the signature to server) which works perfectly with the same code.`. So what's your problem? – Marcos Pérez Gude Aug 31 '15 at 07:37
  • @MarcosPérezGude, the same functionality doesnt work for Photo Upload local storage, I checkec it by adding alerts, control dors not go into save image method for PhotoUpload – Kiran Kumar Aug 31 '15 at 07:44
  • Adding alerts is not a good practice to debug. Use the browser's debugger instead. You can use chrome or firefox developer tools, both of them have an excellent debugger. Notice that `FileReader` is not compatible with all browsers. You must to be much specific with the problem, with your code i can't see any problems – Marcos Pérez Gude Aug 31 '15 at 07:50
  • @MarcosPérezGude, you are right, I have used console.log to write in to the console for firefox and chrome tools, in order to check on the real device I have used alerts... and also I too see no problem with the code but it doesnt work for the Photo Upload functionality bro... – Kiran Kumar Aug 31 '15 at 07:54
  • What is the error? This alert happens? `alert(srcData + "srouce data now");` – Marcos Pérez Gude Aug 31 '15 at 08:39
  • no bro.. that doesn't come in, alert(filesSelected.length + "files lenth"); return 0 always – Kiran Kumar Aug 31 '15 at 09:20
  • Are you sure that the image data is stored in `localStorage`? Are you making debug? To use debugger of your browser is not equal to put `console.log` or `alerts`. Please, look at your `localStorage` if is filled or not. It's hard to help you with this information or if you can't debug your own script. Take a look: https://developer.mozilla.org/es/docs/Tools/Debugger (translate to your language) – Marcos Pérez Gude Aug 31 '15 at 09:31
  • no.. its doesn't store into localStorage... thats my problem. – Kiran Kumar Aug 31 '15 at 09:40
  • Ok, so your problems is before of `function saveImage(photoURI,task_id) {`, in the function caller, but you don't share it. Please, be more specific in the problem. You can say in the beggining that your problem is that object is not stored in localStorage. – Marcos Pérez Gude Aug 31 '15 at 09:42
  • @MarcosPérezGude, as the title says, localstorage upload photo doesn't work... and one more thing is that I directly call the SaveImage method, nothing there before it. only the Upload Photo button and a submit button to submit the form. the submit button will call the SaveImage method with the URI of the Photo – Kiran Kumar Aug 31 '15 at 09:54
  • Removed FileReader functionality and just added this line of code to convert in to base 64 `var photoImage = "data:image/jpeg;base64," + photoURI;`, solved my issue. – Kiran Kumar Sep 22 '15 at 02:44

0 Answers0