Lorenz Hübschle-Schneider
10 years ago
commit
8a7a173cb7
@ -1,9 +1,14 @@ |
||||
<form class="form form-horizontal" id="inputform" ng-submit="sendMessage()"> |
||||
<form class="form form-horizontal" id="inputform" ng-submit="sendMessage()" imgur-drop> |
||||
<div class="input-group"> |
||||
<textarea id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()"> |
||||
</textarea> |
||||
<span class="input-group-btn"> |
||||
<label class="btn btn-send-image unselectable" for="imgur-upload" title="Send image"> |
||||
<i class="glyphicon glyphicon-picture"></i> |
||||
<input type="file" accept="image/*" multiple title="Send image" id="imgur-upload" class="imgur-upload" file-change="uploadImage($event, files)"> |
||||
</label> |
||||
<button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button> |
||||
</span> |
||||
</div> |
||||
<div id="imgur-upload-progress"></div> |
||||
</form> |
||||
|
||||
@ -0,0 +1,23 @@ |
||||
(function() { |
||||
'use strict'; |
||||
|
||||
var weechat = angular.module('weechat'); |
||||
|
||||
weechat.directive('fileChange', ['$parse', function($parse) { |
||||
|
||||
return { |
||||
restrict: 'A', |
||||
link: function ($scope, element, attrs) { |
||||
var attrHandler = $parse(attrs.fileChange); |
||||
var handler = function (e) { |
||||
$scope.$apply(function () { |
||||
attrHandler($scope, { $event: e, files: e.target.files }); |
||||
}); |
||||
}; |
||||
element[0].addEventListener('change', handler, false); |
||||
} |
||||
}; |
||||
|
||||
}]); |
||||
|
||||
})(); |
||||
@ -0,0 +1,49 @@ |
||||
(function() { |
||||
'use strict'; |
||||
|
||||
var weechat = angular.module('weechat'); |
||||
|
||||
weechat.directive('imgurDrop', ['connection','imgur','$rootScope', function(connection, imgur, $rootScope) { |
||||
return { |
||||
restrict: 'A', |
||||
link: function($scope, element, attr) { |
||||
var elem = element[0]; |
||||
elem.ondragover = function () { this.classList.add('imgur-drop-hover'); return false; }; |
||||
elem.ondragend = function () { this.classList.remove('imgur-drop-hover'); return false; }; |
||||
elem.ondrop = function(e) { |
||||
// Remove hover class
|
||||
this.classList.remove('imgur-drop-hover'); |
||||
|
||||
// Get files
|
||||
var files = e.dataTransfer.files; |
||||
|
||||
// Stop default behaviour
|
||||
e.stopPropagation(); |
||||
e.preventDefault(); |
||||
|
||||
// Send image url after upload
|
||||
var sendImageUrl = function(imageUrl) { |
||||
|
||||
// Send image
|
||||
if(imageUrl !== undefined && imageUrl !== '') { |
||||
$rootScope.insertAtCaret(String(imageUrl)); |
||||
} |
||||
|
||||
}; |
||||
|
||||
// Check files
|
||||
if(typeof files !== "undefined" && files.length > 0) { |
||||
|
||||
// Loop through files
|
||||
for (var i = 0; i < files.length; i++) { |
||||
// Upload to imgur
|
||||
imgur.process(files[i], sendImageUrl); |
||||
} |
||||
|
||||
} |
||||
}; |
||||
} |
||||
}; |
||||
}]); |
||||
|
||||
})(); |
||||
@ -0,0 +1,128 @@ |
||||
(function() { |
||||
'use strict'; |
||||
|
||||
var weechat = angular.module('weechat'); |
||||
|
||||
weechat.factory('imgur', ['$rootScope', function($rootScope) { |
||||
|
||||
var process = function(image, callback) { |
||||
|
||||
// Is it an image?
|
||||
if (!image || !image.type.match(/image.*/)) return; |
||||
|
||||
// New file reader
|
||||
var reader = new FileReader(); |
||||
|
||||
// When image is read
|
||||
reader.onload = function (event) { |
||||
var image = event.target.result.split(',')[1]; |
||||
upload(image, callback); |
||||
}; |
||||
|
||||
// Read image as data url
|
||||
reader.readAsDataURL(image); |
||||
|
||||
}; |
||||
|
||||
// Upload image to imgur from base64
|
||||
var upload = function( base64img, callback ) { |
||||
// Set client ID (Glowing Bear)
|
||||
var clientId = "164efef8979cd4b"; |
||||
|
||||
// Progress bars container
|
||||
var progressBars = document.getElementById("imgur-upload-progress"), |
||||
currentProgressBar = document.createElement("div"); |
||||
|
||||
// Set progress bar attributes
|
||||
currentProgressBar.className='imgur-progress-bar'; |
||||
currentProgressBar.style.width = '0'; |
||||
|
||||
// Append progress bar
|
||||
progressBars.appendChild(currentProgressBar); |
||||
|
||||
// Create new form data
|
||||
var fd = new FormData(); |
||||
fd.append("image", base64img); // Append the file
|
||||
fd.append("type", "base64"); // Set image type to base64
|
||||
|
||||
// Create new XMLHttpRequest
|
||||
var xhttp = new XMLHttpRequest(); |
||||
|
||||
// Post request to imgur api
|
||||
xhttp.open("POST", "https://api.imgur.com/3/image", true); |
||||
|
||||
// Set headers
|
||||
xhttp.setRequestHeader("Authorization", "Client-ID " + clientId); |
||||
xhttp.setRequestHeader("Accept", "application/json"); |
||||
|
||||
// Handler for response
|
||||
xhttp.onload = function() { |
||||
|
||||
// Remove progress bar
|
||||
currentProgressBar.parentNode.removeChild(currentProgressBar); |
||||
|
||||
// Check state and response status
|
||||
if(xhttp.status === 200) { |
||||
|
||||
// Get response text
|
||||
var response = JSON.parse(xhttp.responseText); |
||||
|
||||
// Send link as message
|
||||
if( response.data && response.data.link ) { |
||||
|
||||
if (callback && typeof(callback) === "function") { |
||||
callback(response.data.link); |
||||
} |
||||
|
||||
} else { |
||||
showErrorMsg(); |
||||
} |
||||
|
||||
} else { |
||||
showErrorMsg(); |
||||
} |
||||
|
||||
}; |
||||
|
||||
if( "upload" in xhttp ) { |
||||
|
||||
// Set progress
|
||||
xhttp.upload.onprogress = function (event) { |
||||
|
||||
// Check if we can compute progress
|
||||
if (event.lengthComputable) { |
||||
// Complete in percent
|
||||
var complete = (event.loaded / event.total * 100 | 0); |
||||
|
||||
// Set progress bar width
|
||||
currentProgressBar.style.width = complete + '%'; |
||||
} |
||||
}; |
||||
|
||||
} |
||||
|
||||
// Send request with form data
|
||||
xhttp.send(fd); |
||||
|
||||
}; |
||||
|
||||
var showErrorMsg = function() { |
||||
// Show error msg
|
||||
$rootScope.uploadError = true; |
||||
$rootScope.$apply(); |
||||
|
||||
// Hide after 5 seconds
|
||||
setTimeout(function(){ |
||||
// Hide error msg
|
||||
$rootScope.uploadError = false; |
||||
$rootScope.$apply(); |
||||
}, 5000); |
||||
}; |
||||
|
||||
return { |
||||
process: process |
||||
}; |
||||
|
||||
}]); |
||||
|
||||
})(); |
||||
Loading…
Reference in new issue