The goal is to be able to create multiple image uploaders with editors per page with little HTML markup.
-
-
Save happygrizzly/a70e4b2b3040f14e7d14 to your computer and use it in GitHub Desktop.
Angular.js Uploadify Directive with Image Editor and Laravel Backend
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
App.directive('caUploaderInput', ["uploadConfig",'$log','$compile',function(uploadConfig,$log,$compile) { | |
var directive = { | |
restrict: 'A', | |
transclude:false, | |
replace:true, | |
scope:{ | |
prefill:"@" | |
}, | |
link: function(scope, element, attrs, ctrl) { | |
$log.debug("Init caUploader"); | |
if(scope.prefill){ | |
scope.fileName=scope.prefill; | |
} | |
var setFileName = function(name){ | |
scope.fileName=name.name; | |
scope.orgFileName=name.origName; | |
scope.$apply(); | |
}; | |
$(element.find("input").first()).uploadify({ | |
'uploader' : "/upload", | |
'swf' : "/js/uploadify/uploadify.swf", | |
'cancelImg' : '', | |
'folder' : "/images/uploads", | |
'queueID' : "queue", | |
'auto' : true, | |
'multi' : false, | |
'buttonImg' : '', | |
'width' : '117', | |
'height' : '34', | |
'onSelect' : function(e, q, f) { | |
$log.debug("On select"); | |
}, | |
'onError' : function (event,ID,fileObj,errorObj) { | |
alert(errorObj.type + ' Error: ' + errorObj.info); | |
}, | |
'onUploadSuccess' : function(file,data,response) { | |
setFileName($.parseJSON(data)); | |
} | |
}); | |
} | |
}; | |
return directive; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div ca-uploader-input prefill="image on disc"> | |
<input id="imageOne"> | |
<input name="imageOne" type="text" ng-model="fileName"> | |
<div ng-show="fileName" style="clear: both"> | |
shows editor | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class UtilityController extends BaseController { | |
public function upload() | |
{ | |
$file = Input::file('Filedata'); | |
$name = Date("now").'-'.$file->getClientOriginalName(); | |
$uploadSuccess = $file->move(public_path().'/uploads',$name); | |
if( $uploadSuccess ) { | |
return Response::json(array( | |
"status"=>"200", | |
"name"=>$name, | |
"origName"=>$file->getClientOriginalName() | |
),200); | |
} else { | |
return Response::json('error', 400); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment