Upload Image to server from Web API

1

Hello, Currently I am working on uploading image from gallery to remote server using WebAPI. I guess we need to use FileTransfer.Upload(…)

ft.upload(imageURI, "http://myserver/MyAppService.svc/SaveImage", win, fail, options);

Above line I took from google.

As per my requirement, I am having Web API through which I need to upload image to azure blob. Can some one explain me how to do this?Basically, I need to know how Upload works. How my web API method should be implemented? What should be parameters?

Can some one explain this?

2

I just found that FileTransfer.js is missing in org.apache.cordova.file plugin. Is it intentionally removed? How to upload files to server?

3

Can some one please reply to this?

4

This really isn’t an Ionic issue. You should probably be looking at the Cordova forums or StackOverflow to ask questions about them.

Also see :

5

check this

6

Hi mrvamsidhar, There are two approaches to upload images to azure blob.
First : Use http://ngcordova.com to upload file to server
This is approach is well documented on cordova site and http://ngcordova.com
second : use $cordovaCamera ( http://ngcordova.com ) and get image as base64 string then post it server. you can store as its and display back with image attribute to “data:image/jpeg;base64,+ imageBase64 String”.Or you can convert it to WebImage on server and then store it blob store as png or jpeg and then use blob uri in view to display image.

7

Hi rajgadade,

I am taking a picture with ngcordova and convert it to base64. This works perfectly.

I am trying to send the base64 string to my PHP server with the $http from angularjs.

var request = $http({
  method: "post",
  url: mainUrl + "spus.php",
  params: {
    action: "saveLocationPicture",
    hw_id: spuInfo.hw_id,
    locationPicture: spuInfo.locationPicture
  }
});

First of all, have you already try with $http?

If so, do you know if there is a limit of the base64 string that I can send with it? Maybe it is my PHP server that cannot handle it? So for, my test tell me that I cannot go over 835 characters, but I think it does not make sense. What do you think?

Thanks

1 Like
8

Just in case somebody check my previous post. Change params by data:

var request = $http({
  method: "post",
  url: mainUrl + "spus.php",
  data: {
    action: "saveLocationPicture",
    hw_id: spuInfo.hw_id,
    locationPicture: spuInfo.locationPicture
  }
});

And in PHP, use:

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$action = $request->action;
$hw_id = $request->hw_id;
$locationPicture = $request->locationPicture;
9

Where do you learn how to do this? Thanks.

10

rdtran,

I had a similar question and bwasnie1 helped me to discover that I should use “data” instead of “params”.

The PHP part came from other sites (don’t have the links anymore)

It took me some time to gather all the information and solve that issue. :smile:

The only one thing I could not resolve yet is the size of the base64 image. Even if I set the height and width to 100 and quality to 5 in the ngcordova options, the image size is veeeeery big (still 1.6MB and . It maybe right because the conversion will multiply the base image by 4 (I think), but MySql seems to think it is a bit too big (still working on that problem)

Maybe it is because I am using a Blackberry 10? I would doubt, but I am not an expert. Still need some investigation or maybe I will use the file (FILE_URI) instead of the url (DATA_URL).

11

just found why the quality option is ignored. That option is ignored on Blackberry device! ;-(

12

you might need to either inject another library which takes that image and then converts it to what you want. Look into LWIP as a lightweight converter.

Also consider reducing the resolution, rather than the quality of the image. Most cameras are shooting equivalent of 2,500px x 4000x (which equals 10mp). You’ll still be able to view/read that image at 1/5th that size.

13

Check here you may grab a thing or two