drag_drop_fotouploader.user.js

// ==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);
}