Upload image to server angularjs

Question

I need to upload an image taken from my mobile device to my server. I found the angular-upload library to which makes reference. I need to do is to transform the image base 64, send it by post to my server because the server is where I will work with her. And the other, send from my server and work it from the application to run.

var server = URL_BASE+'addView/';

var trustAllHosts = true;

var ftOptions = new FileUploadOptions();
ftOptions.fileKey = 'file';
ftOptions.fileName = $scope.imagen.substr($scope.imagen.lastIndexOf('/') + 1);
ftOptions.mimeType = 'image/jpeg';
ftOptions.httpMethod = 'POST';

console.log(ftOptions);

$cordovaFileTransfer.upload(encodeURI(server), $scope.imagen, ftOptions, trustAllHosts)
.then(function(result) {
  console.log(result)
}, function(err) {
  // Error
  console.log(err);
}, function (progress) {

});

You haven't provided either a problem statement or a question.... so what's the problem and what's the question? — charlietfl, May 07 '15 at 13:08
More than problem I need some advice, the best way to do it. At the moment following this tutorial I'm having problems with my server running on other security Cake. I'm trying to send the picture as $ _FILE, but what I like to do is the hosted image on the device pass that string to base64 and send it to the server. Even I am not able to do the conversion from image to base64. — NHTorres, May 07 '15 at 13:18

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

ionic file transfer

I'm personally using Cordova file transfer for upload & download content from a server.

Base64 encoding

Don't know where is your image stored and how you retrieve it, but, either you specify that the image is base64 encode into the HTML file delimiter OR You transform your image using a canvas See that post for more info : https://stackoverflow.com/a/20285053/3687474

edited May 23 '17 at 10:29

Community

1
1

answered May 07 '15 at 13:24

aorfevre

5,034
3
21
51

Try FileTransfer but always get the same error Error: undefined is not a constructor (evaluating 'new FileTransfer') – NHTorres May 07 '15 at 15:35
show your code, can't help with just that. Also, have you "cordova plugin add org.apache.file" and "cordova plugin add org.apache.file-transfer" ? – aorfevre May 07 '15 at 15:37
I'll let my code, I got it to work, I realized I was installing the plugin I was not a mistake by adding 400 ng-cordova Search and worked well. Now I have problems with my server lol – NHTorres May 07 '15 at 15:52
@aorfevre i used cordova file transfer http://stackoverflow.com/questions/36981211/how-to-transfer-the-taken-image-using-ngcordova-file-transfer-plugin-to-my-ftp but i am invoking only error call back – Mohan Gopi Jun 25 '16 at 10:14

score 2 · Answer 2 · answered May 07 '15 at 14:15

You haven't specified what you really need so: Here you have a factory

//Factory you register on your module
angular
    .module('myApp')
    .factory('sendBase64Image', sendBase64Image)

function sendBase64Image($http) {
    var urlBase; //url to be filled in

    var base64 = {};
    base64.sendBase = function (baseImg) {
        var request = $http({
            method: "post",
            url: urlBase,
            headers: {
                'Content-type': 'application/json'
            },
            data : baseImg 
        });
    }
    return base64;
}

You should then inject it via dependency injection to your controller and perform call to the server. If you want to do something with a response use success() method to handle promise response.

I had to do this for an app at work. We just http posted the base64 string since we had issues with the file upload since our node server is running on IIS. We used the LZString.js compression library to cut down on the size but if you run into issues with the file upload you can simple do a http post with a json object. justMe is completely right — Jess Patton, May 07 '15 at 19:16

Upload image to server angularjs

2 Answers2

Linked