How to change DropBox chooser button to an Image? - javascript

I need to use an Image instead of using dropbox default chooser button. I have gone through their API docs and I couldn't find any such ways to use other elements for dropbox chooser. Can anyone provide me a solution for this?
Thanks in Advance.

This is actually quite easy. The documentation on https://www.dropbox.com/developers/dropins/chooser/js has a section called "Triggering the Chooser with JavaScript" that shows how to do it. Here's some not-really-tested code:
<img id="chooser-image" src="whatever.jpg" />
<script>
document.getElementById("chooser-image").onclick = function () {
Dropbox.choose({
linkType: "direct",
success: function (files) {
alert(files[0].link);
}
});
};
</script>

Related

Sign in Google - Customize button appearance

I use the following code to authenticate a user on my website:
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
window.onload = function() {
google.accounts.id.initialize({
client_id: "XXXXXXX.apps.googleusercontent.com",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large" }
);
<div id="buttonDiv"></div>
But I need to customize the button with the design of my site...
Is it possible to create my own button like this ?
<button type="button" onclick="googleLogin();">Connection with Google</button>
And with the onlick I can connect. I tested several variants but it does'nt work, the initialization does'nt happen...
how i can customize the button keeping the current code (or just modifying it a bit) ?
Do you have an idea ?
Okay, probably there is no other way to modify the button style other than using renderButton options or just simply CSS.
But there is another option, there is a 'second' API. Afaik, that JS API is considered outdated and Google wants you to use the second one.
So it's here about integrating it into an app, and here about customizing the button itself.

Import file and submit when popup closes AngularJS

I am trying to submit the file I am importing once I click OK on system's window for uploading files, but i don't know how to do it... This is what I've done so far:
<input type="file" id="file-input" style="display:none" />
<button class="btn pull-right" ng-click="submitCashierFile()">Import</button>
JS:
$scope.submitCashierFile = function () {
angular.element('#file-input').trigger('click');
// I should have something like this next i guess?
$scope.cashierfile.upload = Upload.upload({
url: config.baseAddress + 'test/uploadCashierExcel',
data: { file: $scope.cashierfile }
});
$scope.cashierfile.upload.then(function (response) {
$timeout(function () {
$scope.cashierfile.result = response.data;
toastService.success('You have added .xlsx');
});
}, function (response) {
toastService.error(response);
});
};
So I triger the click, open the modal to choose file, the problem for me is how to submit it on clicking OK in that modal. Any suggestions?
Your question is not clear to me, but I will give it a shot base on what I did understand.
You should map the control's onchange event. This will fire right after selecting the file to upload.
Then you should do the actual upload of the file.
When I need to do this task, I drop use of Angular and go for HTML5 file upload mechanism. That one is working as you describe...

Froala Editor - inserting multiple images

I'm using Froala Editor and stumbled upon a problem while trying to insert multiple images. The problem is that only the first image gets inserted and not the rest. I have searched the web for answers but can't find any. Is it possible to insert more then one images at a time?
Here is my code:
function show() {
$current_image = editor.image.get();
var image = {
id: 0
}
angular
.element($('html'))
.scope()
.showImageManager(image)
.then(function (imageList) {
for (var i = 0; i < imageList.length; i++) {
insert(imageList[i].url);
}
});
}
function insert(url) {
if (!$current_image) {
// Make sure we have focus.
editor.events.focus(true);
editor.selection.restore();
}
else {
$current_image.trigger('click');
}
editor.undo.saveStep();
editor.image.insert(url, false, {}, $current_image, { });
}
I have solved multiple image upload issue manually.
please find attached image.min.js and replace it with floara editor image.min.js.
it's work fine for me. And let me know if you have any issue so ill update it base on your requirement.
Please change image.min.txt to image.min.js.
image.min.txt
Thanks.
Sanjay Parmar
For resolve this problem I have created the plugin for Froala Editor - Images Multi Upload.
The plugin uses options from image.js plugin and allows to send many images to the server.
Enjoy!

In CKEditor inline instances, how does one disable drag and dropping?

In CKEditor, how does one disable drag and dropping?
I do not want people to accidentally drag and drop other elements of the page into their respective editors.
I assume this requires intercepting browser specific events and blocking them but I am unsure how to do this in CKEditor.
Thanks for your help!
TAKEN FROM THIS STACKOVERFLOW ANSWER
At first I try disable with config.removePlugins = 'dragdrop,basket'; but it doesn't work at all.
Then I found this link, which help me to solved this problem and write a plugin to do the job.
Anyway I wrote here how to do the trick too.
With a Litle modification I wrote this plugin:
To use it you have to create a folder inside of ./plugins named "dropoff". Then create a file named plugin.js and put this content:
CKEDITOR.plugins.add('dropoff', {
init: function (editor) {
function regectDrop(event) {
event.data.preventDefault(true);
};
editor.on('contentDom', function() {
editor.document.on('drop',regectDrop);
});
}
});
After it, you have to registrate it on ckeditor config.js.
config.extraPlugins = 'dropoff';
If you already using an extra pluging just put a "," before like this:
config.extraPlugins = 'mypreviousplugin,dropoff';
And be Happy! \o/

TinyMCE 4 replicate clicking of a toolbar icon

I have recently migrated from TinyMCE v3 to v4. I have a custom image inserter which was development on v3 and can't get some elements to work on v4.
I'm having issues opening the default image dialog box. In version 3 this was completed using tinyMCE.execCommand('mceAdvImage');. I am aware mceAdvImage has been removed and have tried using tinymce.activeEditor.windowManager.open('mceImage');.
Anyone know how to do this? I'm ripping out my hair trying to find a solution.
I also faced this issue today and found a solution.
My usecase was to open image dialog on double click.
In tinyMCE.init function you need to add this (example):
tinyMCE.init({
...
ed.on('DblClick', function(e) {
if (e.target.nodeName=='IMG') {
tinyMCE.activeEditor.execCommand('mceImageDialog');
}
});
...
});
I used a command name 'mceImageDialog' but you can use whatever you want. The key to making this command work is to open image plugin.js and add these lines
Path: plugins/image/plugin.js (plugin.min.js):
...
editor.addCommand("mceImageDialog", function(ui, val) {
showDialog();
});
...
And thats it. After doubleclick on image element, the image dialog appears. For your solution you need i think only the plugin addCommand and use this command for your purposes.
Hope this helps.

Categories

Resources