Get image from clipboard and save the image - clipboard

event.clipboardData.setData('image/jpg', "mapImage");
How to use this code get image from clipboard
And how to send email

I can't quite remember the javascript method, if it is javascript you're using, but whatever it is, it's most likely the getting of the image is as simple as substituting 'set' with 'get':
var img = event.clipboardData.getData("mapImage");
As for sending an email, I think it goes something like this:
<button onclick="mailto:fred#example.com">Send Email</button>

Despite AFAIK this wasn't possible at the time this question was asked, I want to point out this is possible today, at least in Google Chrome. They implemented it to use in GMail, but it is available for all websites.
How does the paste image from clipboard functionality work in Gmail and Google Chrome 12+?

Related

restricting access to files

I'm currently developing a picture-storage on MVC3 and have a question how to restrict access to images.
If I insert image into HTML lice <img src="/ImagesFolder/image0001.jpg"> it will be shown correctly, but anyone who write full path in browser will get that image too. I don't wand to permit it.
One way is to embed image as base64 string, but it is suitable only for small images, I have large ones.
I've seen recommendations to create image-accessing action, and use something like
<img src="/GetImage?ID=1123">, but at that GetImage page I will still use either direct-path or base64 methods? and in first way full path to imagefile will be translated into parent view and still can be seen in picture properties?
Is there a way to use System.Drawing.Image in <img src=""> or any other way? Do you know any samples?
One way to do this is put all of the images into a path which is not published by the http server. This way there is no direct path users can put into the browser.
Scripts themselves are on the server so they can access this path. Your image-access method should be a script which returns actual data and identify itself as the data it is serving image/jpeg for jpegs for example. This way if somebody accesses GetImage method by some other means than the one you have designed the script can detect it (by referer, or other means) and return nothing.
I think that the "image-accessing action" solution you mention is the easiest one to implement. The GetImage script could for example check for a cookie that you set in your application, so that only people that have first visited your site can receive the images.
Now, if you want to prevent people to display the images by typing the URL in the browser after they visited your site, this is more tricky and in my opinion there isn't an easy solution for that. You might check the Referer HTTP header to see if the request is related to your website (as Referer will be empty when putting the URL into the URL bar, but will contain the URL of the page containing the image when it is included with <img src=...>), but this solution has a drawback, as it will prevent browsers not sending the Referer header (generally for privacy reasons; it is not a very wide-spread configuration but this happens) from seeing your images at all. A second possible drawback is that people will probably be able to see the images that are already cached in your browser by typing their URL, unless you can configure the server to serve them with some headers disallowing caching.

IE history push state

I have a webpage where the user has the possibility to display the terms and conditions without reloading the page, via AJAX. That, in itself, is no problem, however, I am also trying to push a history state.
That works fine in most browsers, except in IE. For some inexplicable reason, there, the content is loaded via AJAX, but also, a new tab is opened with the previous page. How can I fix this?
You can see the example on this webpage ( http://galaxy-battle.de ), try clicking on "T&Cs" in the "Join"-box.
IE9 and below doesn't support pushState. You have an exception when calling the following line
window.history.pushState(null, null, pathFullPage);
SCRIPT438: Object doesn't support property or method 'pushState'
?terms_and_conditions, line 62 character 21
You may probably be interesting looking on some workarounds discussed at Emulate/polyfill history.pushstate() in IE
Old but still current question. I just want to say I would recommend not to try to emulate pushState on IE.
Instead of that, you can use a feature detection :
if history.pushState is not null (browser supports pushState), you use it and load your content with nifty javascript
if history.pushState is null (browser does not support pushState), you change url / follow the link and make a full page change
Of course, this means IE<=9 users won't have all the cool animations other users have. But the question I want to ask is : do you want to see on the net links to your website containing # ?
Users may think your app is useful and paste links to it on the web. That's cool, because it brings you some google juice. Now, if that user uses IE and you use history.js, user will paste a link containing a hash.
This will defeats proper indexation of public pages of your app, and also will look ugly. My personal opinion is that having a js animation or lightbox for IE users doesn't worth those trade off.

Pasting images from clipboard in Firefox suddenly enabled (tinymce)

I'm using TinyMCE for richtext editing in a webmail client. Suddenly, after years and years of begging us to build something like this, customers are able to paste images directly from the clipboard in tiny. While I always try to achieve to be as smart as Google, I immediately logged in to my Gmail account and started pasting away.. Yep, paste also worked in Gmail and, yep, images were also broken in the sent e-mail.
Here is a shortened part of the html, as generated by firefox after pasting my screenshot into the textarea:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABDgAAA<andsoonfor100k>"/>
I have to say, I'm very excited about this new feature, but I cannot seem to find anything (literally!) about this topic, so any suggestions about when this was added to firefox, or even how to make this actually work in e-mail clients will be really appreciated!
This is a bit old, but this was added to Firefox since version 4, and Thunderbird (sort-of) since version 6 (it seems it could read them since version 3).
In the case of Thunderbird, even if Thunderbird support Data URIs, other email clients may not, so Thunderbird convert them to classic MIME attachments (with CIDs as URL).
In the case of GMail, as of today (march 2013), pasted image data is included as data URIs, while drag-and-droped images (at least in Linux, with Gnome, from Nautilus to Firefox) include them as common MIME attachments. So, if you send an email with a data URI image, some email clients will display it correctly, some will not. (Ironic thing, Gmail cannot display them, at least not with Firefox and Chrome).
BTW, in Thunderbird at least, as the data URI don't have full information about the image, if you try to save it you need to provide the name or use the "image.jpeg" generic name.
Information about Data URIs:
https://www.rfc-editor.org/rfc/rfc2397
http://en.wikipedia.org/wiki/Data_URI_scheme
Information about how to remove or convert Data URIs from pasted data in CKEditor (some people don't like them for some [valid] reasons):
http://ckeditor.com/forums/Plugins/ImagePaste-plugin-for-Firefox
http://dev.ckeditor.com/ticket/8208
So, there is much information, maybe just searching for "data uri" would return more results.

HTML codes showing in viewpage HTML data

I’m a new to Codeigniter. Just using it in my project from last 2 months. I’ve a comment section in my project. Where any one can give comments. Every things are going perfect but when ever any one putting HTML content(image/videos) & then when those are showing back in the comment section… direct HTML codes are showing in the comment page rather than HTML content(image/videos).
ex: when i’m saving any “embed youtube video code” in the comment box & save that the out put comes as “raw Embed Video codes” rather than Youtube Video…..
I feel like it must be a minor thing but really can’t understand where the fault has occurring. Plz, if any body have the solution reply me back as soon as possible.
Couldn't one devise a system where somebody just posts the youtube link itself and through a combination of regular expressions your own system generates the object/embed code itself so there's no security risk possible?
I had a similar problem a while back - wanting to give end users the ability to post YouTube videos, but not allow them to just post anything without some sort of XSS protection.
I ended up using htmlpurifier - http://htmlpurifier.org/ to filter the contents being submitted in the form.
There is a modification that can be made to the whitelist that allows YouTube code through the purifier.
http://htmlpurifier.org/docs/enduser-youtube.html
So far, that's working well, but my system is still in development.
As a quick hack you can do htmlspecialchars_decode when displaying the comment in your view. This is very dangerous though without the use of sanitization when you receive the comment - search xss_clean on this page. You should also use strip_tags to remove all the HTML tags you don't need (everything except the video tags) prior to inserting the comment in the database.

how to upload a file with ajax,like what gmail does?

I know how to POST/GET text values with ajax,
but never know how to upload files with ajax.
Can someone just give a simple demo here?
GMail is actually using Flash for uploading files now... You could try looking into something like SWFUpload.
Ajax could certainly upload files by posting a HTML form with a input type="file" in it.
Some links to get you started:
http://www.webtoolkit.info/ajax-file-upload.html
http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html
Depending on the server/server side language you could probably send some kind of progress info to the client to render as a progress bar.
Check out this Ajax upload scripts, it has examples in Php and .Net. The basic idea behind the script is that you have to create an iFrame to handle this.
The YUI uploader is a flash based uploader that is designed to be very easy to integrate into javascript, with minimal knowledge of flash.
If you want a progress bar, I believe a pure javascript solution would require a server side piece to send back the current completion percentage via ajax, which would add quite a bit of complexity compared to a flash solution.

Resources