How to save uploaded images with ng-flow VB.NET

Hey guys i'm having some problems with how to upload and save images using angularjs and flowjs.

I'm new to angularjs and had my problems trying to make an image upload but i got it working with ng-flow, still i'm having some problems trying to save the image to some designed path.

One exemple and similar problem is this one How and where save uploaded files with ng-flow? , but i still couldn't made it work.

Here's the code for the upload and preview, working fine so far so good:

<div class="ng-scope add-file" flow-init="{target:'../WebService/WebService.asmx/setImage'}"
 flow-name="image.flow" flow-files-submitted="$flow.upload()"
 flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
<div class="row" style="margin-top: 0px!important;">
    <div class="col-sm-10">
        <p><label for="image">ADD PHOTO</label></p>
        <table style="border: 0px;">
            <tr>
                <td ng-repeat="file in $flow.files" class="ng-scope thumbnail" style="margin: 3px 3px 3px 3px;">
                    <div class="text-right">
                        <a class="glyphicon glyphicon-remove" ng-click="file.cancel()"
                           style="color:#ff4b4b; text-decoration: none!important;"></a>
                    </div>
                    <div class="frame" ng-show="$flow.files.length" style="min-width: 210px!important;">
                        <span class="helper"></span>
                        <img flow-img="file" src="" class="image-thumbnail">
                    </div>
                    <div class="progress progress-striped" ng-class="{active: file.isUploading()}">
                        <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                             aria-valuemax="100" ng-style="{width: (file.progress() * 100) + '%'}">
                        </div>
                        <span class="sr-only ng-binding">1% Complete</span>
                    </div>
                </td>
            </tr>
        </table>
    </div>
    <div class="col-sm-2 text-right drop" flow-drop="" ng-class="dropClass">
        <span class="file-upload btn btn-primary" flow-btn="">
            Choose file
            <input type="file" multiple="multiple" style="visibility: hidden; position: absolute;">
        </span>
    </div>
</div>

But here's the problem, i don't know how or what to do to create this image in some path...

I'm passing to ng-flow-init my webservice method as it will send via url parameters like this:

flow-init="{target:'../WebService/WebService.asmx/setImage'}"

and the ws receive it like the following example:

../setImage?flowChunkNumber=1&flowChunkSize=1048576&flowCurrentChunkSize=198637&flowTotalSize=198637&flowIdentifier=198637-1jpg&flowFilename=1.jpg&flowRelativePath=1.jpg&flowTotalChunks=1

    'flowChunkNumber=1
    'flowChunkSize=1048576
    'flowCurrentChunkSize=111168
    'flowTotalSize = 111168
    'flowIdentifier=111168-Figura1png
    'flowFilename=Figura1.png
    'flowRelativePath=Figura1.png
    'flowTotalChunks = 1

What should i do with these informations or what do i need to send the data (binary, base64, etc) and save/create the image on my server?

Edit 1: I already know that i need the file data and figured that i do need an upload.php to transform and send the file. Still can't even think about how to create an upload.php for vb.net

Solution

After a long time searching i decided to move forward and do with an entirely different way, i removed pretty much all my custom css and style to make it more clean to read.

Before anything i changed somethings like i'm not using ng-flow anymore, it's purely angularjs and javascript, and i'm encoding the file to Base64 and decoding it on my server side.

HTML:

<div class="row">
<div class="col-sm-10">
    <table>
        <tr>
            <td ng-repeat="image in images">
                <div>
                    <img id="imagePreview{{$index}}" src="#" alt="" />
                </div>
            </td>
        </tr>
    </table>
</div>
<div class="col-sm-2 text-right">
    <input type="file" id="img" />

    <button ng-click="addImage()" type="button">ADD</button>
</div>
</div>

AngularJS Controller:

    $scope.images = [];

//Don't let the same file to be added again
$scope.removeImage = function (index) {
    $scope.images.splice(index, 1);
}

//Add new file to $scope.images
$scope.addImage = function () {

    var
      reader = new FileReader(),
      $img = $("#img")[0],
      index = $scope.images.length;

    reader.onload = function (e) {

        if ($scope.images.indexOf(e.target.result) > -1) return;

        $scope.images.push(e.target.result);
        if (!$scope.$$phase) $scope.$apply();

        $("#imagePreview" + index).attr('src', e.target.result);

        $scope.uploadImage(index);
    }

    reader.readAsDataURL($img.files[0]);
};

And here it is how to get the files converted to Base64:

$scope.uploadImage = function (index) {
    var res = $scope.images[index];
    //{...} Your code here, method call etc.
}