Last active
January 12, 2017 23:48
-
-
Save maruf89/5528df53b133d442b292 to your computer and use it in GitHub Desktop.
Angular ng-flow + jcrop + Cloudinary upload
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
| 'use strict' | |
| angular.module('uploadApp', [ | |
| 'flow' | |
| 'ngJcrop' | |
| ]).config [ | |
| 'flowFactoryProvider' | |
| 'ngJcropConfigProvider' | |
| (flowFactoryProvider, ngJcropConfigProvider) -> | |
| flowFactoryProvider.defaults = { | |
| permanentErrors: [404, 500, 501] | |
| maxChunkRetries: 1 | |
| chunkRetryInterval: 5000 | |
| testChunks: false | |
| simultaneousUploads: 4 | |
| } | |
| ngJcropConfigProvider.setJcropConfig({ | |
| bgColor: 'black', | |
| bgOpacity: .4, | |
| aspectRatio: 1 | |
| }) | |
| ngJcropConfigProvider.setJcropConfig({ | |
| maxWidth: 600 | |
| maxHeight: 600 | |
| }) | |
| ] | |
| photoUploadFlowCtrl = -> | |
| self = this | |
| _.each arguments, (val, index) -> | |
| self[photoUploadFlowCtrl.$inject[index]] = val | |
| return | |
| self.uploadConfig = { | |
| target: 'https://api.cloudinary.com/v1_1/' + cloud_name + '/image/upload' | |
| singleFile: true | |
| uploadMethod: 'POST' | |
| query: { | |
| upload_preset: preset | |
| } | |
| } | |
| self.flow = null | |
| self.obj = { | |
| src: null | |
| coords: [100, 100, 200, 200, 100, 100] | |
| thumbnail: false | |
| } | |
| return self | |
| photoUploadFlowCtrl:: = _.extend photoUploadFlowCtrl::, | |
| # Load the image element to be cropped for Jcrop | |
| photoAdded: ($file) -> | |
| self = this | |
| fileReader = new FileReader() | |
| fileReader.onload = (event) -> | |
| self.$scope.$root.$apply -> | |
| self.obj.src = event.target.result | |
| fileReader.readAsDataURL($file.file) | |
| uploaded: ($file, $message) -> | |
| console.log($file) | |
| console.log($message) | |
| photoUploadFlowCtrl.$inject = [ | |
| '$scope' | |
| ] | |
| require('app').controller('photoUploadFlowCtrl', photoUploadFlowCtrl) |
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
| doctype html | |
| | <!--[if lte IE 8]> <html class="no-js lt-ie9"> <![endif]--> | |
| | <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> | |
| head | |
| title Upload + Resize Sample | |
| script(src="bower_components/angular/angular.min.js") | |
| script(src='bower_components/ng-flow/dist/ng-flow-standalone.min.js') | |
| script(src="bower_components/jcrop/js/jquery.Jcrop.min.js") | |
| script(src="bower_components/ng-jcrop/ng-jcrop.js") | |
| script(src="script.js") | |
| body(ng-app="uploadApp") | |
| .controller(ng-controller="photoUploadFlowCtrl as Photo") | |
| .upload-container( | |
| flow-init="Photo.uploadConfig" | |
| flow-files-added="Photo.photoAdded($files[0])" | |
| flow-success="Photo.uploaded($file, $message)" | |
| ) | |
| .drop-zone( | |
| ng-if="!Photo.obj.src" | |
| flow-drop | |
| flow-btn | |
| flow-drag-enter="style={border:'3px dotted #04304A'}" | |
| flow-drag-leave="style={}" | |
| ng-style="style" | |
| ) | |
| .crop-container(ng-if="Photo.obj.src") | |
| .img-crop( | |
| ng-jcrop="Photo.obj.src" | |
| data-selection="Photo.obj.coords" | |
| data-thumbnail="Photo.obj.thumbnail" | |
| ) | |
| .crop-controls.fluffy | |
| button.btn-red( | |
| i18n="common.CANCEL" | |
| ng-click="Photo.obj.src = null" | |
| ) | |
| button.btn-blue( | |
| i18n="common.UPLOAD" | |
| ng-click="$flow.upload()" | |
| ) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is not a standalone tested example. Might need some more config.
The purpose of this gist is to highlight the ng-flow => cloudinary upload feature