// ==UserScript== // @name drag & drop fotolife uploader // @namespace http://rails2u.com/* // @description フォトライフでローカルファイルから drag & drop でファイルアップロード (HTML5 File API 対応ブラウザのみ) // @include http://f.hatena.ne.jp/*/up* // ==/UserScript== var upForm = document.getElementById('upload'); var FotoUploader = unsafeWindow ? unsafeWindow.FotoUploader : window.FotoUploader; FotoUploader.FotoList.getFID = function () { if (!this.fid) this.fid = 0; return this.fid++; } function makePostData(data) { var pairs = []; var regexp = /%20/g; for (var k in data) { if (!data[k]) continue; var v = data[k].toString(); var pair = encodeURIComponent(k).replace(regexp,'+') + '=' + encodeURIComponent(v).replace(regexp,'+'); pairs.push(pair); } return pairs.join('&'); } var _upload = function() { var params = this.getUploadParams(); var file = this.fileReference; params.ext = this.fileExt; var img = document.createElement("img"); var reader = new FileReader(); var self = this; reader.onloadend = function() { var fileName = file.name; var fileSize = file.size; params.image = reader.result.replace(/.+?base64,/, ''); params.model = 'quickfix'; var body = makePostData(params); var uri = params.uploadURL.replace('/upbyswf', '/haiku'); var xhr = new XMLHttpRequest(); if (xhr.upload) xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { self.imagesize = e.total; self.progressHandler(self, e.loaded); } }, false); xhr.open("POST", uri, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if ((xhr.status >= 200 && xhr.status <= 200) || xhr.status == 304) { var hatenaTexts = xhr.responseText.split(':'); self.uploadCompleteHandler(self, hatenaTexts[2], parseInt(hatenaTexts[3]), params.ext); } } } self.openHandler(self); xhr.send(body); } reader.readAsDataURL(file); } var fotolist = FotoUploader.FotoList.instance; var dropbox = document.createElement('div'); with (dropbox.style) { width = '400px'; height = '150px'; border = '1px solid #A2B8EE'; backgroundColor = '#F1F5FF'; textAlign = 'center'; padding = '100px 20px'; fontWeight = 'bold'; fontSize = '80%'; color = '#102C73'; } dropbox.innerHTML = 'ここに png/jpeg ファイルをドラッグしてアップロード'; dropbox.addEventListener("dragenter", dragenter, false); dropbox.addEventListener("dragover", dragover, false); dropbox.addEventListener("drop", drop, false); function dragenter(e) { e.stopPropagation(); e.preventDefault(); } function dragover(e) { e.stopPropagation(); e.preventDefault(); } function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files; if (files.length == 0) { files = [dt]; } for (var i = 0; i < files.length; i++) { var file = files[i]; handleFile(file); } if (i > 0) { fotolist.selected(); } } function handleFile(file) { var filetype; if (file.type.indexOf('image/png') >= 0) filetype = 'png'; else if (file.type.indexOf('image/jpeg') >= 0) filetype = 'jpeg'; if (filetype) { var fid = FotoUploader.FotoList.getFID(); fotolist.addFile(fid, file.name, file.size); var fd = fotolist.fotodata[fid]; fd.fileReference = file; fd.fileExt = filetype; fd.upload = _upload; } } var classic_link_container = document.getElementById('classic_link_container'); if (classic_link_container) { classic_link_container.parentNode.insertBefore(dropbox, classic_link_container); } else { upForm.appendChild(dropbox); }