<!DOCTYPE html>
<html ng-app="plot">
<head>
<script data-require="jquery@2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js@~1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="angular-sanitize@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="stamp" ng-controller="mainController">
<form id="mediaForm" name="mediaForm" class="upload-form" novalidate="" method="get" autocomplete="on" ng-submit="uploadMedia.submit()">
<input type="text" name="from" id="fromField" required="" class="form-control margin-bottom" placeholder="your name" ng-model="uploadMedia.from" ng-minlength="3" ng-maxlength="32" />
<textarea name="message" id="msgField" class="form-control margin-bottom" placeholder="message (max 140 characters)" rows="3" ng-model="uploadMedia.message" ng-maxlength="140" ng-disabled="mediaForm.from.$invalid" ng-class="{disabled: mediaForm.from.$invalid}"></textarea>
<input type="file" name="media" id="fileBtn" class="form-control margin-bottom" accept="video/*,image/*" update-media-file="" ng-disabled="mediaForm.from.$invalid" ng-class="{disabled: mediaForm.from.$invalid}" />
<input type="submit" name="submitBtn" id="submitBtn" value="Send" class="btn btn-info btn-block" ng-disabled="mediaForm.$invalid || (uploadMedia.message.length == 0 && uploadMedia.file == null)" ng-class="{disabled: mediaForm.$invalid || (uploadMedia.message.length == 0 && uploadMedia.file == null)}" />
<div name="preloader" class="preloader" ng-show="mediaForm.$submitted"></div>
<div name="messageBoard" class="message-board" ng-show="uploadMedia.error != ''" ng-cloak="">
<div ng-bind-html="uploadMedia.error"></div>
<div class="message-board-button-wrapper"></div>
<button class="btn btn-danger btn-xs block margin-center padding-left-2x padding-right-2x" type="button" ng-click="resetMediaForm();">ok</button>
</div>
</form>
</div>
</body>
</html>
// Code goes here
// @codekit-prepend "jquery-2.1.4.js", "angular-1.4.1/angular.js", "angular-1.4.1/angular-sanitize.js", "angular-1.4.1/angular-cookies.js", "plugins/angular.dcb-img-fallback.js", "plugins/ng-infinite-scroll.js", "bootstrap.js", "masonry.pkgd.js", "imagesloaded.pkgd.js", "plugins/angular-masonry-directive.js";
window.plot = (function (angular, $, console) {
'use strict';
var plot = angular.module('plot', []);
// Custom filter to return the file portion of a url path:
plot.filter('filefrompath', function () {
return function (path) {
if (path === null || path === undefined) {
return path;
}
var segments = path.split('/'),
file = segments[segments.length - 1],
file = file.split('?')[0],
file = file.split('#')[0];
return file;
};
});
plot.filter('trim', function () {
return function (str) {
return !str ? '' : str.trim();
};
});
plot.service('plotRemoteAPI', ['$http', '$log', function ($http, $log) {
var self = this;
self.postMedia = function (mediaData, success, error) {
// $http.post('/submit/' + appid, mediaData)
// .success(function (data, status) {
// $log.info('$scope.uploadMedia.submit().success()');
// success(data, status);
// })
// .error(function (data, status) {
// $log.error('error!', data);
// error(data, status);
// });
alert('submitted: {from:' + mediaData.from + ', message:' + mediaData.message + '}');
};
}]);
// Main Application Controller:
plot.controller('mainController', ['$scope', '$http', '$location', '$filter', '$timeout', '$log', 'plotRemoteAPI', function ($scope, $http, $location, $filter, $timeout, $log, plotRemoteAPI) {
$scope.resetMediaData = function() {
$scope.uploadMedia = {};
$scope.uploadMedia.from = ''
$scope.uploadMedia.message = ''
$scope.uploadMedia.file = null;
$scope.uploadMedia.fileType = '';
$scope.uploadMedia.fileName = '';
$scope.uploadMedia.done = false;
$scope.uploadMedia.error = '';
};
$scope.resetMediaForm = function() {
if ($scope.mediaForm) {
$scope.mediaForm.$setUntouched();
$scope.mediaForm.$setPristine();
//$('form[name="'+$scope.mediaForm.$name+'"]')[0].reset();
}
};
$scope.resetMediaData();
$scope.uploadMedia.submit = function() {
$log.info('$scope.uploadMedia.submit()');
var data = {
from: $scope.uploadMedia.from,
message: $scope.uploadMedia.message,
file: $scope.uploadMedia.file,
fileType: $scope.uploadMedia.fileType,
fileName: $scope.uploadMedia.fileName
};
$scope.resetMediaData();
plotRemoteAPI.postMedia(data, function (data, status) {
if (status >= 200 && status < 300) {
if (data.success === true) {
} else {
$log.info('$scope.uploadMedia.submit().data.success !== true', data);
// TODO: Fix error.
$scope.uploadMedia.error = data.error;
}
} else {
$log.info('$scope.uploadMedia.submit().success() status < 200 OR >= 300...');
$scope.uploadMedia.error = status;
}
$scope.resetMediaForm();
}, function (data, status) {
$log.error('error!', data);
$scope.uploadMedia.error = data.error;
});
};
}]);
var MAX_FILE_SIZE_MB = 40;
plot.directive('updateMediaFile', function () {
return {
link: function(scope, elem, attr, ctrl) {
$(elem).on('change', function(event) {
var $input = $(this),
files = event.target.files,
reader = new FileReader(),
mediaFile;
if(!files || !files.length) {
return;
}
$input.blur();
mediaFile = files[0];
if(mediaFile && mediaFile.size) {
var Mb = Math.round(mediaFile.size / 1024 / 1024);
if (Mb > MAX_FILE_SIZE_MB) {
alert('File exceeds ' + MAX_FILE_SIZE_MB + 'Mb limit. Please choose a smaller file.');
scope.$apply(function () {
scope.uploadMedia.file = null;
scope.uploadMedia.fileName = '';
scope.uploadMedia.fileType = '';
$input.val(null);
});
return;
}
}
// Closure to capture the file information.
reader.onload = (function($theInput, theMediaFile) {
return function(progressEvent) {
if (progressEvent && progressEvent.currentTarget && progressEvent.currentTarget.result) {
scope.$apply(function () {
scope.uploadMedia.file = progressEvent.currentTarget.result;
scope.uploadMedia.fileName = theMediaFile.name;
scope.uploadMedia.fileType = theMediaFile.type;
});
}
};
})($input, mediaFile);
// Read in the image file as a data URL.
reader.readAsDataURL(mediaFile);
});
}
};
});
return plot;
}(window.angular, window.jQuery, window.console));
/* Styles go here */
.stamp {
width: 200px;
padding: 2%;
background-color: #ddd;
}
.stamp * {
width: 98%;
color: #000;
}