Lokendra Panwar Lokendra Panwar - 2 months ago 23
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