JSFiddle - React, Tailwind, and code Playground

by samu_eyes

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div>
  <input data-my-Directive type="file" name="file">
  <p>
    post request with this data:
  </p>
  <pre ng-repeat="(key, value) in fileLog">
    {{key}} {{ value }}
  </pre>
</div>

JavaScript

var app = angular.module('myApp', []);

app.directive('myDirective', function(httpPostFactory) {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      element.bind('change', function() {
        var formData = new FormData();
        formData.append('file', element[0].files[0]);

        // optional front-end logging 
        var fileObject = element[0].files[0];
        scope.fileLog = {
          'lastModified': fileObject.lastModified,
          'lastModifiedDate': fileObject.lastModifiedDate,
          'name': fileObject.name,
          'size': fileObject.size,
          'type': fileObject.type
        };
        scope.$apply();

        /*  ---> post request to your php file and use $_FILES in your php file   < ----
        httpPostFactory('your_upload_image_php_file.php', formData, function (callback) {
            console.log(callback);
        });
        */
      });

    }
  };
});

app.factory('httpPostFactory', function($http) {
  return function(file, data, callback) {
    $http({
      url: file,
      method: "POST",
      data: data,
      headers: {
        'Content-Type': undefined
      }
    }).success(function(response) {
      callback(response);
    });
  };
});