Lokendra Panwar Lokendra Panwar - 11 days ago 7
AngularJS Question

How to upload file in fat free frame work?

How to upload file in fat free framework.i am send post request at fat free framework using angularjs. I would like to use file extension .jpg and size 2mb and limit only 4 file. please guide me.

here is my html code-

<div class="col-md-9" style="margin-bottom: 40px" ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<h3> upload</h3>
<div ng-show="uploader.isHTML5">

<input type="file" nv-file-select="" uploader="uploader" multiple /><br/>

<table class="table">
<tr ng-repeat="item in uploader.queue">
<td><strong>{{ item.file.name }}</strong></td>
<td ng-show="uploader.isHTML5" nowrap>{{ item.file.size/1024/1024|number:2 }} MB</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }"></div>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
<button type="button" class="btn btn-warning btn-xs" ng-click="item.cancel()" ng-disabled="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove


here is my angular controller

'use strict';


.module('app', ['angularFileUpload'])

.controller('AppController', ['$scope', 'FileUploader', function($scope, FileUploader) {
var uploader = $scope.uploader = new FileUploader({
url: 'uploadfile'


name: 'customFilter',
fn: function(item /*{File|FileLikeObject}*/, options) {
return this.queue.length < 10;

console.info('uploader', uploader);

here is my fat free code

$f3->route('GET|POST|PUT /uploadfile',
function($f3) use($db){
$data = $f3['BODY'];
$file_name = $data['filename'];
$file = "/ui/uploads";
$file .= $id . "/";
$file .= $file_name;
$f3->set('SESSION.id', $file);
echo var_dump($file);


$f3->route('GET|POST|PUT /uploadfile',
    function($f3) use($db){
     $f3->set('UPLOADS','uploads/'); // don't forget to set an Upload directory, and make it writable!

        $overwrite = false; // set to true, to overwrite an existing file; Default: false
        $slug = true; // rename file to filesystem-friendly version
        $web = \Web::instance();
        $files = $web->receive(function($file,$formFieldName){
                /* looks like:
                  array(5) {
                      ["name"] =>     string(19) "csshat_quittung.png"
                      ["type"] =>     string(9) "image/png"
                      ["tmp_name"] => string(14) "/tmp/php2YS85Q"
                      ["error"] =>    int(0)
                      ["size"] =>     int(172245)
                // $file['name'] already contains the slugged name now

                // maybe you want to check the file size
                if($file['size'] > (2 * 1024 * 1024)) // if bigger than 2 MB
                    return false; // this file is not valid, return false will skip moving it

                // everything went fine, hurray!
                return true; // allows the file to be moved from php tmp dir to your defined upload dir

        //$files will contain all the files uploaded, in your case 1 hence $files[0];
        $answer = array( 'answer' => 'Files transfer completed' );
        $json = json_encode( $answer );
        echo $json;


File uploads are done via POST (according to your angularUploadModule) You can see more here : http://fatfreeframework.com/web#receive