Dropzone.jsの仕組み
依存API
ドラッグ&ドロップ イベント
ドラッグ&ドロップでイベントが発生した際に、ドロップされたファイル情報eventオブジェクトのdataTransferプロパティに格納される
Dropzone.prototype.drop = function(e) { var files, items; if (!e.dataTransfer) { return; } this.emit("drop", e); files = e.dataTransfer.files; if (files.length) { items = e.dataTransfer.items; if (items && items.length && (items[0].webkitGetAsEntry != null)) { this._addFilesFromItems(items); } else { this.handleFiles(files); } } };
FileReader - Web API インターフェイス | MDN
ファイルを選択した際に、Fileオブジェクトから画像データを取得し、imgエレメントを作成し、表示させている。
Dropzone.prototype.createThumbnail = function(file, callback) { var fileReader; fileReader = new FileReader; fileReader.onload = (function(_this) { return function() { var img; img = document.createElement("img"); img.onload = function() { var canvas, ctx, resizeInfo, thumbnail, _ref, _ref1, _ref2, _ref3; file.width = img.width; file.height = img.height; resizeInfo = _this.options.resize.call(_this, file); if (resizeInfo.trgWidth == null) { resizeInfo.trgWidth = resizeInfo.optWidth; } if (resizeInfo.trgHeight == null) { resizeInfo.trgHeight = resizeInfo.optHeight; } canvas = document.createElement("canvas"); ctx = canvas.getContext("2d"); canvas.width = resizeInfo.trgWidth; canvas.height = resizeInfo.trgHeight; drawImageIOSFix(ctx, img, (_ref = resizeInfo.srcX) != null ? _ref : 0, (_ref1 = resizeInfo.srcY) != null ? _ref1 : 0, resizeInfo.srcWidth, resizeInfo.srcHeight, (_ref2 = resizeInfo.trgX) != null ? _ref2 : 0, (_ref3 = resizeInfo.trgY) != null ? _ref3 : 0, resizeInfo.trgWidth, resizeInfo.trgHeight); thumbnail = canvas.toDataURL("image/png"); _this.emit("thumbnail", file, thumbnail); if (callback != null) { return callback(); } }; return img.src = fileReader.result; }; })(this); return fileReader.readAsDataURL(file); };