I did some research for a wysiwyg editor and found ckeditor that seems to be nice however I need to be able to copy/paste an image to the editor.
I found this web site that do exactly what I need http://pasteboard.co/ so its possible however I cannot find how it's done.
Do you have any ideas or solutions?
I would prefer a solution in pure html5/javascript and avoid any plugin but a silverlight or flash is acceptable too.
There are two ways you can handle this, the easy way, and the hard way.
The Easy Way:
Utilize the Clipboard API. This is an "HTML5" API, but it is only properly supported in Chrome. This will allow you to access a pasted image, from your clipboard, as a Blob. You can then send this Blob to your server via an XHR2 request.
The Hard Way:
Unfortunately, this is what you must do for all browsers other than Chrome, and it's not pretty. It involves you creating a hidden content-editable DIV inside of a "paste target element". This will receive the pasted image. You will then need to draw the image onto a <canvas> which will then need to be converted to a Blob. But wait, it gets better. You may also need to proxy cross-domain images (server-side) in some cases (possibly many cases). This may be required if the server hosting the image does not permit CORS requests on the images they host. You can read more about this situation in this MDN article.
A javascript-based uploader I maintain, Fine Uploader, already supports uploading images via paste, but in Chrome only at this time. I figured I would go through the hassle of implementing this in non-Clipboard API browsers if I received enough requests. Quite frankly, though, since handling non-CORS-enabled images in browsers that do not implement the Clipboard API requires proxying the image server-side, it hardly seems like its worth the effort (unless, of course, my user base tells me that they want it).
Hope this helps.
Related
So I created something that allows people to create and download the created .mobileconfig file without the need of a mac (because AC2 is only on macOS) and it's a lot faster to just do it on device. Issue is that when people are downloading it, it prompts as "Do you want to download (filename.mobileconfig) rather than the usual "This website is trying to download a config profile. Do you want to allow this?". This introduces an additional few steps rather than the "click allow, check in settings, and install" option, which is what I'm going for.
I know that it will prompt the correct way if the URL points to the mobileconfig file, except that requires the .mobileconfig file to be stored on the server hosting my site, which I want to avoid if possible, and stick to just HTMl and JavaScript if possible.
This is the JavaScript that's "downloading" the file:
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/xml;charset=UTF-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
document.getElementById("DownloadProfileBTN").addEventListener("click", function(){
var text = document.getElementById("generated_profile_content").textContent;
var filename = "config.mobileconfig";
download(filename, text);
});
You probably cannot control this.
I have tested this extensively in the four major browsers on iOS, MacOS, and Windows (no Android, and no Windows phones). As of Q1 2022, most major mobile browsers still have embarrassingly bad UX for saving files to disk after they have been transferred to the browser using javascript. One notable exception is Safari on iOS, which has a unique (and pleasant) UI download prompt.
Most other mobile browsers have only one path: attempt to render the transferred file in the browser viewport, and rely on the user to long-press on the visible render and choose "Save As...". This is true whether the file is something most browsers can natively render (i.e. images), or is some complex format like an Office document. Edge has a cool footer with a Download button, but when I was doing my research, it literally never worked. (Microsoft has spent >20 years mastering the art of building terrible web browsers.)
Desktop browsers behave much better across the board: the <a download="filename" ...> approach in your sample gives a seamless instant-download experience in the major browsers. You can programmatically create that link, click it, then remove it from the DOM after a brief delay, and the file will immediately materialize in the user's normal downloads folder.
IIRC, this situation is different if you don't use javascript to manage the download. That is: just have an anchor whose href points to a URL that will respond with a Content-Disposition: attachment header. This is vastly simpler for the front-end, but there are other reasons people don't use this approach. If that's your situation, you may be stuck.
None of this is unique to .mobileconfig files. It's been a long time since I read up on those, but I seem to recall that mobile platforms that consume that type have special handling -- but again, only when it's a direct download rather than being transferred via JS.
Note that this doesn't actually have anything to do with the transfer itself. These troubles flow from the fact that after your JS has transferred the data, it still has to do something to instruct the browser to save the data as a file on disk. The transfer itself is unremarkable and creates no problems, but is pointless if you don't then save it. You don't have many options for writing the file to disk. That feature space is still pretty crappy, I suspect because there are so many extremely important security implications of giving random webpages the power to create local files.
Another fun challenge is that feature-detection will not work here. The basic tools for saving a file technically do exist in all the major browsers (FileReader, ObjectURLs, etc), they all just work differently (and badly). (I think this is Goodhart's Law at work.) Edge has a proprietary msSaveBlob, but like I said, their footer button thing still seems pretty shoddy.
One alternative I have not had an opportunity to test is to use a WebWorker to save the file. IIRC, WebWorkers have the ability to write files to disk, and I was hopeful that it might work the same way in all the browsers. But my project timeline did not have room to spend a day or two experimenting.
I was wondering if it is somehow possible to intercept all JavaScript API calls of a website using a browser extension.
The background is that I would like to log what APIs some websites use and even block access to certain APIs or simply provide fake data instead of real data.
I know you can intercept HTTP requests etc, but I would really like to just find out when an API is actually accessed.
So for instance, I would like to find out when webRTC or webGL are being used, when a canvas is being read/manipulated or even when a website checks the mouse cursor position.
I couldn't really find anything on google about this. Did I miss anything? Or are you aware that something like this will be implemented in the future? I would really like to know.
https://webrtchacks.com/webrtc-notify/ describes a chrome extension which shims and detects usage of the WebRTC APIs. Its not perfect as there are ways to prevent the content script from being run.
Firefox has better APIs for intercepting WebRTC described in https://hacks.mozilla.org/2015/09/controlling-webrtc-peerconnections-with-an-extension/
I'm currently building a very bare bones web app, that had the requirement of being able to copy an image while broswing the web, and then pasting it onto my page.
I know that this type of functionality IS possible - as I've pasted images into gmail while writing messages, and into Tumblr (I believe they use TinyMCE as their editor).
After long searching - I've been saddened by the poor quality of explanation for the available solutions out there.
This is what I've gathered:
$(document).bind('paste', function(e){
console.log(e);
})
Inspecting the event object, it seems that data is only included when there is text (in Chrome anyways).
I am aware that IE has a clipboardData object which gives you access to the clipboard contents.
I've also heard of possible solutions using Flash, Java Applets, and HTML 5 Canvas - but I haven't yet been able to find good write ups explaining those solutions.
Anyone done this successfully, and can suggest best practices?
This works fine in Chrome. Here's a live example supporting getting image data in pure JavaScript with no servers involved: http://strd6.com/2011/09/html5-javascript-pasting-image-data-in-chrome/
You could use the Clipboard API: http://dev.w3.org/2006/webapi/clipops/clipops.html
Or you can do is to use Zero ClipBoard. It uses an invisible Flash movie and provides a JavaScript interface to access the clipboard.
I want to show a PREVIEW kind of thing for an post , so took details by JS
but problem comes when it comes to <input type="file" , it's not giving full path to the file
Ex:
if I do
$("#image").val();
it only give "Sunset.jpg" not C:\Documents and Settings\All Users....\Sunset.jpg
any idea how to get that detail value?
Although, as others have already pointed out, you cannot learn the full path to the file in JavaScript, perhaps a completely different approach to the problem might still work for you.
You could upload the photo automatically as soon as the visitor has picked it (the behavior you see in GMail, among other applications), so it's residing on your server even as the visitor continues interacting with your page. At that point, showing a preview is as simple as serving one yourself from your own (now server-side) copy of the image.
This if for security reasons, so you cannot read files from the users system using JavaScript.
If you happen find a workaround, there will probably be security patches released by browser vendors sooner rather than later. I know because in earlier versions if IE, it was possible to read the full path and hence display a preview, at least if the file was an image. I used that in a CMS UI, but of course that nifty feature was ruined by an IE service release :-/
In general the file upload control is somewhat of a "black box" for security reasons. You have only very limited access to scripting and styling it. This is so you can't snoop or upload files without the user knowing, or so you cannot trick the user into uploading files with a deceptive interface.
This is now possible as of Firefox 3.6
https://developer.mozilla.org/en/DOM/FileList
Though the code they show does not seem to work in Chrome, so I'm guessing even the HTML5 JavaScript API for things like this has yet to be standardized.
This is a security feature. You cannot change or get the entire path in secure browsers, so what you want to do, cannot be done. If you use something like Flash, Silverlight or Java, then it should be relatively easy.
As far as I know, there is no way to do what you want to do in javascript. Its a pretty big security issue - having filesystem access in a browser.
There are a few browser plugins (java/flash/gears) that may allow you to do this sort of thing. I know with gears you can get the user to select a file - and open it to read the content using JS.
I have a JavaScript application that an user interacts with. I need to save the appearance of the interface at the current time, crop out the part that I need (or only shot the part that I need by specifying the div), and send it back to the server.
Clearly any external services would not be able to do this, I need a JavaScript (or Flash) script that can save the screen appearance. Is this possible?
Also, as the comment below says, I cannot use ActiveX.
Google is doing this in Google+ and a talented developer reverse engineered it and produced http://html2canvas.hertzen.com/ . To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/
I think using JavaScript, you won't be able to due to the security restrictions. Flash, possibly.
It's impossible in pure JavaScript, without using ActiveX.
It is impossible using JavaScript (nor Flash). It depends on your constraints, and there are some workarounds.
You can take advantage of browser extensions (such as a Firefox add-on), but I guess it does not fit your requierments.
The best option I can think of is to construct the DOM tree on the client side, and then post it to remote server.
On the server side nothing really holds you from doing generally anything. Using WebKit or even launching Internet Explorer or Firefox, you can create the snapshot server-side.
It's far from elegant, but possible.