Upload File To server using XDK

moere_i_ · ‎04-12-2016

Hi all, I am a beginner in XDK from few weeks only, I have an important task and it is urgent

I am trying to upload image from my mobile app to a server using a WebService and I tried this code

https://software.intel.com/en-us/forums/intel-xdk/topic/599993

but it is not working for me,Here is my code

this is web service

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
// [System.Web.Script.Services.ScriptService]
public class FileUploader : System.Web.Services.WebService {

    public FileUploader () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public void SaveImage()
    {
        if (!System.IO.Directory.Exists(HttpContext.Current.Server.MapPath("~/Folder Name on the server")))
        {
            System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/Folder name on server/"));
        }

        string path = HttpContext.Current.Server.MapPath("~/Folder Name on server/").ToString();

        var Request = HttpContext.Current.Request;
        if (Request.Files.Count > 0)
        {
            var file = Request.Files[0];
            file.SaveAs(path + file.FileName);
        }
    }
}

And here is the xdk code

<!DOCTYPE html>
 
<html>
 
<head>
 
    <title>Take or select photo(s) and upload</title>
 
    <script type="text/javascript">
 var filename;
      function fileSelected() {
 
        var count = document.getElementById('fileToUpload').files.length;
 
              document.getElementById('details').innerHTML = "";
 
              for (var index = 0; index < count; index ++)
 
              {
 
                     var file = document.getElementById('fileToUpload').files[index];
 
                     var fileSize = 0;
 
                     if (file.size > 1024 * 1024)
 
                            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
 
                     else
 
                            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
 
                     document.getElementById('details').innerHTML += 'Name: ' + file.name + '<br>Size: ' + fileSize + '<br>Type: ' + file.type;
 
                     document.getElementById('details').innerHTML += '<p>';
                filename = file.name;
              }
      }
        
function getFileToUpload(){
    var fileURL = (getWebPath() + filename);
    uploadImage(fileURL);
    
}

function getWebPath() {
    "use strict" ;
    var path = window.location.pathname ;
    path = path.substring( 0, path.lastIndexOf('/') ) ;
    return 'file://' + path ;
}

function uploadImage(fileURL)
{
    var win = function (r) {
        alert("Code = " + r.responseCode);
        alert("Response = " + r.response);
        alert("Sent = " + r.bytesSent);
    };

    var fail = function (error) {
        alert("An error has occurred: Code = " + error.code);
        alert("upload error source " + error.source);
        alert("upload error target " + error.target);
    };
  
    var options = new FileUploadOptions();
    options.fileKey = "File";  
    options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    //options.fileName = "Strabburg.jpg";
    options.mimeType = "image/jpeg";
    var params = {};
    params.action = "save";
    params.name = fileURL.substr(fileURL.lastIndexOf('/') + 1);

    options.params = params;
    var ft = new FileTransfer();
    ft.upload(fileURL, encodeURI("http://www.serverURL/FileUploader.asmx/SaveImage"), win, fail, options); 
}
    </script>

     <script src="intelxdk.js"></script>        
     <script src="cordova.js"></script>         
     <script src="xhr.js"></script>             


     <script src="js/app.js"></script>
     <script src="js/init-app.js"></script>
     <script src="js/init-dev.js"></script>
</head>
 
<body>
 
  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
 
    <div>
 
      <label for="fileToUpload">Take or select photo(s)</label><br />
 
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" accept="image/*" capture="camera" />
 
    </div>
 
    <div id="details"></div>
 
    <div>
 
      <input type="button" onclick="getFileToUpload()" value="Upload" />
 
    </div>
 
    <div id="progress"></div>
 
  </form>
 
</body>
 
</html>

PaulF_IntelCorp · ‎04-12-2016

I've asked one of my colleagues to help you.

moere_i_ · ‎04-13-2016

Thanks a lot for your effort, but really I need this problem to be solved as soon as possible and I need your help

I tried to solve the problem, but now when I click on the upload button I have error says: An error has occurred: Code = 1

Thanks in advance

moere_i_ · ‎04-13-2016

when I take the photo using the camera the Image URL is correct and there is no errors

But when I take the Photo from photo library using (pictureSource.PHOTOLIBRARY) the Image URl is incorrect file:///storage/emulated/0/Android/data/demo.ionicangularjsstarter/cache/image_name.jpg?1460538221110

at the end of the URL after the extension .jpg there is ?1460538221110 and I don't know what is this

function onPhotoDataSuccess(imageURI) {
 alert("fire");
    // Uncomment to view the base64-encoded image data
    console.log(imageURI);
    // Get image handle
    //
    var cameraImage = document.getElementById('image');
    // Unhide image elements
    //
    cameraImage.style.display = 'block';
    // Show the captured photo
    // The inline CSS rules are used to resize the image
    //
    cameraImage.src = imageURI;
}
// Called when a photo is successfully retrieved
//

function onPhotoURISuccess(imageURI) {
 alert("fire");
    // Uncomment to view the image file URI
    console.log(imageURI);
    // Get image handle
    //
    var galleryImage = document.getElementById('image');
    // Unhide image elements
    //
    galleryImage.style.display = 'block';
    // Show the captured photo
    // The inline CSS rules are used to resize the image
    //
    galleryImage.src = imageURI;
}
// A button will call this function
//

function capturePhoto() {
    // Take picture using device camera and retrieve image as base64-encoded string
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
        quality: 30,
        targetWidth: 600,
        targetHeight: 600,
        destinationType: destinationType.FILE_URI,
        saveToPhotoAlbum: true
    });
}
// A button will call this function
//

function getPhoto(source) {
    // Retrieve image file location from specified source
    navigator.camera.getPicture(onPhotoURISuccess, onFail, {
        quality: 30,
        targetWidth: 600,
        targetHeight: 600,
        destinationType: destinationType.FILE_URI,
        sourceType: source
    });
}

Rakshith_K_Intel · ‎04-13-2016

@moere i. send me the server-url in private message so I can test.

moere_i_ · ‎04-26-2016

Thank you @Rakshith Krishnappa , I made a quick solution that I substring the image URL from ? to the end of the URL and it is working.

But this function pictureSource.SAVEDPHOTOALBUM or this pictureSource.PHOTOLIBRARY is not working on some android mobile.

how can I use this function on all android mobiles.

Thanks in advance

Eliezer_R_ · ‎09-22-2016

Good morning,

I hope you can help me, I’m developing an enterprise application that work. is made in HTML, PHP, JavaScript as the design for a web environment, only the android application made XDK place it in an iframe It works well hsta the point where I have to upload some files to the server from the browser I can upload multiple files at once, but from the android application I can only upload one at a time.

I could help’ll be very grateful.

sorry for my English.

Thank you!

PaulF_IntelCorp · ‎09-22-2016

Eliezer -- please search the web for "cordova phonegap app upload files" for help.