Skip to content
This repository has been archived by the owner on Nov 16, 2024. It is now read-only.

Commit

Permalink
Enabled client-side image resize
Browse files Browse the repository at this point in the history
  • Loading branch information
@matpompili
matpompili committed Dec 16, 2015
1 parent 73bc744 commit 41f1479
Show file tree
Hide file tree
Showing 8 changed files with 230 additions and 125 deletions.
2 changes: 2 additions & 0 deletions bootstrap.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ public function subscribe(Dispatcher $events) {
public function prepareApiAttributes(PrepareApiAttributes $event) {
if ($event->isSerializer(ForumSerializer::class)) {
$event->attributes['imgurClientID'] = $this->settings->get('matpompili.imgur-upload.clientID');
$event->attributes['maxImageWidth'] = $this->settings->get('matpompili.imgur-upload.maxImageWidth');
$event->attributes['maxImageHeight'] = $this->settings->get('matpompili.imgur-upload.maxImageHeight');
}
}
}
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "matpompili/imgur-upload",
"description": "Enable the upload of images to imgur directly from the composer",
"version": "v1.0.0-beta.4",
"version": "v1.0.0-beta.5",
"type": "flarum-extension",
"license": "MIT",
"authors": [
Expand Down
25 changes: 24 additions & 1 deletion js/admin/dist/extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,33 @@ System.register('matpompili/imgur-upload/components/ImgurUploadSettingsModal', [
m(
'a',
{ href: 'https://api.imgur.com/oauth2/addclient' },
app.translator.trans('matpompili-imgur-upload.admin.get-id')
m(
'small',
null,
app.translator.trans('matpompili-imgur-upload.admin.get-id')
)
)
),
m('input', { className: 'FormControl', bidi: this.setting('matpompili.imgur-upload.clientID') })
), m(
'p',
null,
app.translator.trans('matpompili-imgur-upload.admin.leaveEmpty')
), m(
'div',
{ className: 'Form-group' },
m(
'label',
null,
app.translator.trans('matpompili-imgur-upload.admin.maxImageWidth')
),
m('input', { className: 'FormControl', bidi: this.setting('matpompili.imgur-upload.maxImageWidth') }),
m(
'label',
null,
app.translator.trans('matpompili-imgur-upload.admin.maxImageHeight')
),
m('input', { className: 'FormControl', bidi: this.setting('matpompili.imgur-upload.maxImageHeight') })
)];
}
}]);
Expand Down
16 changes: 12 additions & 4 deletions js/admin/src/components/ImgurUploadSettingsModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,18 @@ export default class ImageUploadSettingsModal extends SettingsModal {

form() {
return [
<div className="Form-group">
<label>Imgur Client ID (OAuth {app.translator.trans('matpompili-imgur-upload.admin.without')} callback) - <a href="https://api.imgur.com/oauth2/addclient">{app.translator.trans('matpompili-imgur-upload.admin.get-id')}</a></label>
<input className="FormControl" bidi={this.setting('matpompili.imgur-upload.clientID')}/>
</div>
<div className="Form-group">
<label>Imgur Client ID (OAuth {app.translator.trans('matpompili-imgur-upload.admin.without')} callback)
- <a href="https://api.imgur.com/oauth2/addclient"><small>{app.translator.trans('matpompili-imgur-upload.admin.get-id')}</small></a></label>
<input className="FormControl" bidi={this.setting('matpompili.imgur-upload.clientID')}/>
</div>,
<p>{app.translator.trans('matpompili-imgur-upload.admin.leaveEmpty')}</p>,
<div className="Form-group">
<label>{app.translator.trans('matpompili-imgur-upload.admin.maxImageWidth')}</label>
<input className="FormControl" bidi={this.setting('matpompili.imgur-upload.maxImageWidth')}/>
<label>{app.translator.trans('matpompili-imgur-upload.admin.maxImageHeight')}</label>
<input className="FormControl" bidi={this.setting('matpompili.imgur-upload.maxImageHeight')}/>
</div>
];
}
}
151 changes: 92 additions & 59 deletions js/forum/dist/extension.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@ System.register('matpompili/imgur-upload/main', ['flarum/extend', 'flarum/compon
'use strict';

var extend, TextEditor, Button;

function isNumber(x) {
return !isNaN && x == '';
}
return {
setters: [function (_flarumExtend) {
extend = _flarumExtend.extend;
Expand Down Expand Up @@ -62,66 +66,95 @@ System.register('matpompili/imgur-upload/main', ['flarum/extend', 'flarum/compon
$("#composer").on("change", "#imgur-upload-input", function () {
var reader = new FileReader();
reader.onload = function (e) {
//This formats the file for base64 upload
var data = e.target.result.substr(e.target.result.indexOf(",") + 1, e.target.result.length);
//Get the elements with jQuery to act on them later
var icon = $(".imgur-upload-button > i");
var buttonText = $(".imgur-upload-button > span.Button-label");
var submitButton = $(".item-submit > button");
//Show a loading icon and a loading text
icon.removeClass('fa-paperclip').addClass('fa-spin fa-circle-o-notch');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.loading')[0]);
//Disable the submit button until the upload is completed
submitButton.attr("disabled", true);
//Actually upload the image
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {
'Authorization': 'Client-ID ' + app.forum.attribute('imgurClientID')
},
type: 'POST',
data: {
'image': data,
'type': 'base64'
},
success: function success(response) {
//Remove the loading icon and text, and show the success
icon.removeClass('fa-spin fa-circle-o-notch').addClass('fa-check green');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.loaded')[0]);
//Get the link to the uploaded image and put https instead of http
var linkString = '\n![alt text](' + response.data.link.replace('http:', 'https:') + ')\n';
//Place the Markdown image link in the Composer
textAreaObj.insertAtCursor(linkString);
$("#imgur-upload-input").val("");
//If we are not starting a new discussion, the variable is defined
if (typeof textAreaObj.props.preview !== 'undefined') {
// Show what we just uploaded
textAreaObj.props.preview();
}
//After 1sec
setTimeout(function () {
//Enable the submit button
submitButton.attr("disabled", false);
//Restore the Attach button and text for a new upload
icon.removeClass('fa-check green').addClass('fa-paperclip');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.attach')[0]);
}, 1000);
}, error: function error(response) {
//Remove the loading icon and text, and show the error
icon.removeClass('fa-spin fa-circle-o-notch').addClass('fa-times red');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.error')[0]);
//Output the error to the console, for debug purposes
console.log(response);
//After 1sec
setTimeout(function () {
//Enable the submit button
submitButton.attr("disabled", false);
//Restore the Attach button and text for a new upload
icon.removeClass('fa-times red').addClass('fa-paperclip');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.attach')[0]);
}, 1000);

// create an off-screen canvas and an Image object
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();

var maxWidth = app.forum.attribute('maxImageWidth'),
maxHeight = app.forum.attribute('maxImageHeight');

img.onload = function () {
// evaluate the scaling factor
var scale = 1;
if (isNumber(maxWidth) && isNumber(maxHeight)) {
scale = Math.min(maxWidth / img.width, maxHeight / img.height);
scale = Math.max(scale, 1);
}
});
// set canvas' dimension to target size
canvas.width = img.width * scale;
canvas.height = img.height * scale;

// draw source image into the off-screen canvas:
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

// encode image to data-uri with base64 version of compressed image
var resizedImage = canvas.toDataURL();

//This formats the file for base64 upload
var data = resizedImage.substr(resizedImage.indexOf(",") + 1, resizedImage.length);
//Get the elements with jQuery to act on them later
var icon = $(".imgur-upload-button > i");
var buttonText = $(".imgur-upload-button > span.Button-label");
var submitButton = $(".item-submit > button");
//Show a loading icon and a loading text
icon.removeClass('fa-paperclip').addClass('fa-spin fa-circle-o-notch');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.loading')[0]);
//Disable the submit button until the upload is completed
submitButton.attr("disabled", true);
//Actually upload the image
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {
'Authorization': 'Client-ID ' + app.forum.attribute('imgurClientID')
},
type: 'POST',
data: {
'image': data,
'type': 'base64'
},
success: function success(response) {
//Remove the loading icon and text, and show the success
icon.removeClass('fa-spin fa-circle-o-notch').addClass('fa-check green');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.loaded')[0]);
//Get the link to the uploaded image and put https instead of http
var linkString = '\n![alt text](' + response.data.link.replace('http:', 'https:') + ')\n';
//Place the Markdown image link in the Composer
textAreaObj.insertAtCursor(linkString);
$("#imgur-upload-input").val("");
//If we are not starting a new discussion, the variable is defined
if (typeof textAreaObj.props.preview !== 'undefined') {
// Show what we just uploaded
textAreaObj.props.preview();
}
//After 1sec
setTimeout(function () {
//Enable the submit button
submitButton.attr("disabled", false);
//Restore the Attach button and text for a new upload
icon.removeClass('fa-check green').addClass('fa-paperclip');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.attach')[0]);
}, 1000);
}, error: function error(response) {
//Remove the loading icon and text, and show the error
icon.removeClass('fa-spin fa-circle-o-notch').addClass('fa-times red');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.error')[0]);
//Output the error to the console, for debug purposes
console.log(response);
//After 1sec
setTimeout(function () {
//Enable the submit button
submitButton.attr("disabled", false);
//Restore the Attach button and text for a new upload
icon.removeClass('fa-times red').addClass('fa-paperclip');
buttonText.text(app.translator.trans('matpompili-imgur-upload.forum.attach')[0]);
}, 1000);
}
});
};
//Load the file in the image Object
img.src = e.target.result;
};
//Actually run everything on the file that's been selected
reader.readAsDataURL($("#imgur-upload-input")[0].files[0]);
Expand Down
Loading

0 comments on commit 41f1479

Please sign in to comment.