Skip to content

Instantly share code, notes, and snippets.

@maruf89
Last active January 12, 2017 23:48
Show Gist options
  • Save maruf89/5528df53b133d442b292 to your computer and use it in GitHub Desktop.
Save maruf89/5528df53b133d442b292 to your computer and use it in GitHub Desktop.
Angular ng-flow + jcrop + Cloudinary upload
'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)
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()"
)
@maruf89
Copy link
Author

maruf89 commented May 7, 2015

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment