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"> |
<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 id="{{inputId}}" class="form-control favorite-font" ng-trim="false" rows="1" ng-change="inputChanged()" autocomplete="on" ng-model="command" ng-focus="hideSidebar()"> |
||||||
</textarea> |
</textarea> |
||||||
<span class="input-group-btn"> |
<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> |
<button class="btn btn-send unselectable"><i class="glyphicon glyphicon-send"></i></button> |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
|
<div id="imgur-upload-progress"></div> |
||||||
</form> |
</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