Copy and Paste File Upload Using jQuery Ajax

This works only in Mozilla Firefox

Everyone will like an interface that supports rich features like file uploading by just copying the file from desktop and pasting on the browser using jQuery AJAX file uploading. That is cool and awesome.

In this article, I am going to show how to upload a file using jQuery AJAX by copy and paste. In my previous articles, I already have shown how to upload a file using jQuery AJAX. If you have not read yet, please Click Here.

The logic behind this is to read clipboard data in JavaScript, append the clipboard files to a form dynamically, and then submit the form using jQuery AJAX.

In this example not only the desktop image but also the browser image copy paste will work.

This is very simple and amazing. In your HTML document include jQuery and try below code.

/*Document Ready Event*/
            jQuery(document).ready(function () {
                /*Binding Paste Event To The Document*/
                jQuery(document).bind("paste", function (event) {
                    var items = (event.clipboardData || event.originalEvent.clipboardData).items;
                    /*Make Sure Only One File is Copied*/
                    if (items.length != 1) {
                        return;
                    }
                    var item = items[0];
                    /*Verify If The Copied Item is File*/
                    if (item.kind === 'file') {
                        var file = item.getAsFile();
                        var filename = file.name;
                        /*Get File Extension*/
                        var ext = filename.split('.').reverse()[0].toLowerCase();
                        /*Check Image File Extensions*/
                        if (jQuery.inArray(ext, ['jpg', 'png']) > -1) {
                            /*Create FormData Instance*/
                            var data = new FormData();
                            data.append('file', file);
                            /*Request Ajax With File*/
                            request_ajax_file('upload.php', data, file_uploaded);
                        } else {
                            alert('Invalid File');
                        }
                    }
                });
            });

            function file_uploaded(response) {
                /*Process server response*/
            }

            /*Function to Make AJAX Request With File*/
            function request_ajax_file(ajax_url, ajax_data, ajax_callback) {
                jQuery.ajax({
                    url: ajax_url,
                    data: ajax_data,
                    type: 'POST',
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (typeof ajax_callback == 'function') {
                            ajax_callback(response);
                        } else if (typeof ajax_callback == 'string') {
                            if (ajax_callback != '') {
                                eval(ajax_callback + '(response)');
                            }
                        }
                    }
                });
            }

The uploaded file can be processed in this PHP.

Hope this helped.