(#-Solved-#) Upload Images / files to a Webservice issues

[Rodrigo_M_1]

Hi there, I still trying to upload images / files to a webservice, but so far no success...

I have researched a lot on the internet how to do that using a asp.net webservices, but all the information I got is not working.

Here is the example code of my C# .Net webservice:

[WebMethod]
        public string saveFile()
        {
            string msg = "";
            try
            {
                HttpPostedFile file = HttpContext.Current.Request.Files["myfile"];
                string saveFile = file.FileName;
                file.SaveAs(Server.MapPath("/LocationImages/" + saveFile));

                msg = "File uploaded";


            }
            catch (Exception ex)
            {
                msg = "Could not upload file: " + ex.Message;

            }
            return msg;
        }

and here is the code I'm trying on Intel XDK:

function getFileToUpload(){
    var fileURL = "/images/Arrow.png";
    uploadImage(fileURL);
}

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 = "myfile";
    options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
    options.mimeType = "image/jpeg";

    alert(fileURL.substr(fileURL.lastIndexOf('/') + 1));
    var params = {};
    params.value1 = "test";
    params.value2 = "param";

    options.params = params;

    var ft = new FileTransfer();
    ft.upload(fileURL, encodeURI("http://192.168.204.65/Uploader/FileUploader.asmx/saveFile"), win, fail, options);
}

Please help me figure out what is wrong with my code!

Thanks!

[Swati_S_Intel1]

Check few things:

1. Make sure your webservice works through regular browser.

Assuming that your webservice is working :

2. Check if you have included the File Transfer plugin and using the correct version

3. Make sure you have selected appropriate whitelisting criteria in the build settings

4. Your file URL needs to be absolute path when you are trying to run from the device. Try to get the webroot for the device and append your relative path to the webroot. So, instead of var fileURL = "/images/Arrow.png"; 

do the following :

// get the webroot
        var rootpath = window.location.href ;
        rootpath = rootpath.substring( 0, rootpath.lastIndexOf('/') ) ;
 // if it is a real iOS device the webroot is "/"
        var ua = navigator.userAgent;
        if( !window.tinyHippos && ua.match(/(ios)|(iphone)|(ipod)|(ipad)/ig) ) { // it's not an emulator and it's iOS 
            rootpath = "" ;
        }
        var fileURL = rootpath + "/images/Arrow.png";

[Rodrigo_M_1]

SWATI S. (Intel) wrote:

Check few things:

1. Make sure your webservice works through regular browser.

Assuming that your webservice is working :

2. Check if you have included the File Transfer plugin and using the correct version

3. Make sure you have selected appropriate whitelisting criteria in the build settings

4. Your file URL needs to be absolute path when you are trying to run from the device. Try to get the webroot for the device and append your relative path to the webroot. So, instead of var fileURL = "/images/Arrow.png"; 

do the following :

// get the webroot
        var rootpath = window.location.href ;
        rootpath = rootpath.substring( 0, rootpath.lastIndexOf('/') ) ;
 // if it is a real iOS device the webroot is "/"
        var ua = navigator.userAgent;
        if( !window.tinyHippos && ua.match(/(ios)|(iphone)|(ipod)|(ipad)/ig) ) { // it's not an emulator and it's iOS 
            rootpath = "" ;
        }
        var fileURL = rootpath + "/images/Arrow.png";

Hi SWATI , thanks for all the information but it still not working for me...

My webservice is working without problem with a regular browser.

The File Transfer plugin I have included is the version 0.4.8

I don't understante what means: "whitelisting criteria" .. by the way I have tried to build for iOS and Android, but I have no success to send the image to the webservice.

I don't know what more we can do to make it work for file transfer, I have spend about a week researching and trying almost everything, without success.

If you have any other idea what's wrong, I really appreciate!

Thanks again!

[Swati_S_Intel1]

See this article for selecting whitelisting for your app. https://software.intel.com/en-us/articles/cordova-whitelisting-with-intel-xdk-for-ajax-and-launching-external-apps

[Rodrigo_M_1]

SWATI S. (Intel) wrote:

See this article for selecting whitelisting for your app. https://software.intel.com/en-us/articles/cordova-whitelisting-with-inte...

Hi SWATI, thanks for the information! I have checked out, I setup for "http://*" and even for "*", but still not working...

Maybe it's something wrong with the Webservice side ? I'm trying to create a new WS with a PHP instead of .net, but I really would like to make it work with .net webservice!

The strange thing is that I'm facing this issue only with the file transfer process... I have in the same WS server other methods to bring information from a DB, and it's working fine...

If anyone could try replicate my codes on the top of post and make it work to help me, I really appreciate!

Thanks!

[Rodrigo_M_1]

Hi there, I just get it working by using PHP Webservice (I really don't understand why my .Net Webservice don't work...)

I still need to use the .Net webservice because our entire system works on .Net webservice technology, so any help will be really appreciated!

By the way, follow the code that's working with PHP Webservice to check out why it's not working with .Net WS...:

function getFileToUpload(){
    var fileURL = (getWebPath() + "/images/Strabburg.jpg");
    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";

    //alert(fileURL.substr(fileURL.lastIndexOf('/') + 1));
    var params = {};
    //params.value1 = "test";
    //params.value2 = "param";
    params.action = "save";
    params.name = fileURL.substr(fileURL.lastIndexOf('/') + 1);;

    options.params = params;

    var ft = new FileTransfer();
    //ft.upload(fileURL, encodeURI("http://192.168.200.105:8080/example/test.php"), win, fail, options); //This works fine with PHP WS
    ft.upload(fileURL, encodeURI("http://192.168.200.105/Uploader/FileUploader.asmx/SaveImage"), win, fail, options); //This doesn't works... why ?
}

And this is the PHP WS:

<?php
   print_r($_FILES);   
   move_uploaded_file($_FILES["File"]["tmp_name"], "uploads/" . $_FILES["File"]["name"]);
?>

And this is my C#.Net WS that's not working...:

[WebMethod]
        public string SaveImage()
        {
            WriteLogs("SaveImage Method Called!");
            //string rootPathRemote = WebConfigurationManager.AppSettings["UploadedFilesPath"].TrimEnd('/', '\\') + "/";
            //string rootPhysicalPathRemote = rootPathRemote + "\\";
            int fileCount = 0;

            fileCount = HttpContext.Current.Request.Files.Count;
            for (int i = 0; i < fileCount; i++)
            {
                HttpPostedFile file = HttpContext.Current.Request.Files;
                string fileName = HttpContext.Current.Request.Files.FileName;
                if (!fileName.EndsWith(".jpg"))
                {
                    fileName += ".jpg";
                }
                //string sourceFilePath = Path.Combine(rootPhysicalPathRemote, fileName);
                //file.SaveAs(sourceFilePath);
                file.SaveAs(Server.MapPath("/LocationImages/" + fileName));
            }
            return "test";
        }

Also, I found on this post on the Internet that's the same I'm working, and for this guy looks like that's works...

check out: http://stackoverflow.com/questions/13458099/how-to-use-phonegap-filetransfer-parameters-with-asmx-web-service

Any help will be welcome!

Thanks!

[Rodrigo_M_1 · Accepted solution]

All right, I just figure out how to make it work with .Net WS.

So, first this is the working code of Server Side:

	[WebMethod]
        public void SaveImage()
        {
            if (!System.IO.Directory.Exists(HttpContext.Current.Server.MapPath("~/devimg")))
            {
                System.IO.Directory.CreateDirectory(HttpContext.Current.Server.MapPath("~/devimg/"));
            }

            string path = HttpContext.Current.Server.MapPath("~/devimg/").ToString();

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

Another important thing is that you need to give the properly access (user access) in the WS folder, and also in: "C:\Windows\temp" folder that WS use for create a temp image blob file during the transfer.

You also need to edit your WS  "web.config" file to add some protocols that by default it's disabled, and also you may want to increase the file size up to 1GB instead of 4MB that is the default file size.

In the web.config file, add the follow lines after the "<system.web>":

<httpRuntime maxRequestLength="1048576" />
  <webServices>
        <protocols>
            	<add name="HttpSoap"/>
   		<add name="HttpPost"/>
   		<add name="HttpGet"/> 
   		<add name="HttpPostLocalhost"/>
        </protocols>
  </webServices>

I hope this help some one else on this forum!

[Swati_S_Intel1]

Glad it worked for you!