Created
December 26, 2016 14:43
-
-
Save kinka/1b99060a8699511758a951d1e1fced0d to your computer and use it in GitHub Desktop.
Extend Stackedit's editor so that capable to upload image file from local system or clipboard automically
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function armAutoUpload() { | |
| var inputInsertImage = $('#input-insert-image') | |
| inputInsertImage.append($("<input type='file' id='attach_image' accept='image/*'/>")) | |
| var attachImage = $('#attach_image') | |
| attachImage.change(function() {startUpload(this.files[0])}) | |
| inputInsertImage.prev('.input-group-addon') | |
| .css({cursor: 'pointer'}).attr('title', 'click to upload image') | |
| .click(function() {attachImage.click()}) | |
| var editor = $('.editor-content')[0] | |
| editor.addEventListener('paste', function(evt) { | |
| var items = evt.clipboardData.items | |
| console.log(items) | |
| if (!items) return | |
| if (items.length == 1) { | |
| var item = items[0], | |
| m = item.type.match(/image\/(jpeg|png|gif)/i) | |
| if (!m) return | |
| var file = item.getAsFile() | |
| file.name = Date.now() + '.' + m[1].replace('e', '') | |
| $('#wmd-image-button').click() | |
| startUpload(file) | |
| } else if (items.length == 2) { | |
| var text = items[0], | |
| data = items[1]; | |
| // right click and choose copy image from browser | |
| var imageType = data.type.match(/image\/(jpeg|png|gif)/i) | |
| imageType = imageType && imageType[1] | |
| if (text.type !== 'text/html' || !imageType) return | |
| var file = data.getAsFile() | |
| if (!file) return | |
| text.getAsString(function(html) { | |
| var m = html.match(/src="(.*?)"/) | |
| if (m && m[1] && m[1].search("data") !== 0) { | |
| // getfilename | |
| var a = document.createElement('a') | |
| a.href = m[1] | |
| var name = a.pathname.split('/').pop() | |
| if (name) file.name = name | |
| if (!file.name) file.name = Date.now() + '.' + imageType.replace('e', '') | |
| $('#wmd-image-button').click() | |
| startUpload(file) | |
| } | |
| }) | |
| } | |
| }) | |
| } | |
| function startUpload(file) { | |
| if (!file) return | |
| if (file.size >= 1 * 1024 * 1024) return alert('file size too large') | |
| var inputInsertImage = $('#input-insert-image') | |
| var attachImage = $('#attach_image') | |
| var url = settings.couchdbUrl.replace('documents', 'images'); | |
| var formData = new FormData() | |
| formData.append('_attachments', file, file.name) | |
| var currentFile = fileMgr.currentFile | |
| var oldPH = inputInsertImage.attr('placeholder') | |
| $.ajax({type: 'GET', url: url+'/'+currentFile.title, cache: false, dataType: 'json'}).done(function(meta) { | |
| formData.append('_rev', meta._rev) | |
| $.ajax({ | |
| url: url + '/' + currentFile.title, | |
| type: 'POST', | |
| data: formData, | |
| xhr: function() { | |
| var xhr = $.ajaxSettings.xhr() | |
| xhr.upload.addEventListener('progress', function(evt) { | |
| var percent = (evt.loaded/evt.total * 100).toFixed(0) | |
| inputInsertImage.val('').attr('placeholder', percent + '%') | |
| }) | |
| return xhr | |
| }, | |
| contentType: false, | |
| processData: false | |
| }).done(function(res) { | |
| inputInsertImage.val(url + '/' + currentFile.title + '/' + file.name) | |
| .attr('placeholder', oldPH) | |
| attachImage.val('') | |
| eventMgr.onMessage('file uploaded: ' + file.name) | |
| console.log(res) | |
| }) | |
| }).error(function(xhr) { | |
| if (xhr.status != 404) return alert(xhr.status) | |
| $.ajax({ | |
| url: url, | |
| type: 'POST', | |
| contentType: 'application/json', | |
| dataType: 'json', | |
| data: JSON.stringify({ | |
| _id: currentFile.title, | |
| updated: Date.now() | |
| }) | |
| }).done(function(res) { | |
| startUpload(file) | |
| }) | |
| }) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment