Usage of file input unclear

[brospars]

Hi !
I've been using dyn-form for a while and it's great, it helps me a lot ! So thanks !

One thing I didn't use so far was the <input type="file"/>, and I had trouble using it. Your readme file misses maybe some usage example (or I missed it)

1. Unclear if you have to use the "callback":"readFile()" (ng-change) or "attributes": {"on-change":"readFile()"} (it's the latter)
2. Don't forget to had fileReader injected in your controller
3. In the example linked in your readme, the function is fileReader.readAsDataUrl in your plugin it's fileReader.readAsDataURL (URL full caps ^^)

Example for one image file :

$scope.formData = {};
$scope.imageSrc = ""

 $scope.formTemplate = [
    {
        "type": "file",
        "model": "image",
        "label": "Image",
        "attributes": {"on-change":"readFile()"}
    }
];

$scope.readFile = function () {
    fileReader.readAsDataURL($scope.formData["image"][0], $scope)
    .then(function(result) {
        //display the image on file change
        $scope.imageSrc = result;
    });
};

// ... do some stuff

<dynamic-form template="formTemplate"
        ng-model="formData"
        ng-submit="processForm()">
</dynamic-form>

<!-- image preview -->
<img ng-src="{{imageSrc}}"/>

Not much but if it can help people (like me) understand better how it works without looking to the source file, I leave it here !

[abku]

@brospars
Did you manage to get this all working with the file uploading to a server? Could you post some sample code?

[brospars]

Yes I did, with PHP (and node-webkit but I don't think it's what you're loking for). Here's how :

client side :

fileReader.readAsDataURL(file, $scope)
.then(function(result) {
    $http({
        method: 'POST',
        url: 'path/to/phpscript.php',
        data: result
     }).then(function successCallback(response) {
        //handle success
     }, function errorCallback(response) {
        //handle error
     });
});

server side :

<?php 
$filepath = 'path/to/newfile';
//retrieve raw data 
$rawData = file_get_contents('php://input');
//get the base64 image from the data 
$encodedData = substr($rawData, strpos($rawData, ",")+1);
//decode it
$data = base64_decode($encodedData);
//save it to the new file
file_put_contents($filepath, $data);

You should do a service and add some error handling but you get the idea ;) hope that helps