1
0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-16 03:06:27 +00:00

drag and drop image from browser

This commit is contained in:
Baptiste Augrain
2018-11-25 15:56:11 +01:00
parent a6eddb5798
commit 2908884202

View File

@@ -18,15 +18,23 @@ const PATH_SEPARATORS = escapeStringRegexp(path.posix.sep) + escapeStringRegexp(
* @returns {Promise<Image>} Image element created * @returns {Promise<Image>} Image element created
*/ */
function getImage (file) { function getImage (file) {
return new Promise((resolve) => { if (_.isString(file)) {
const reader = new FileReader() return new Promise(resolve => {
const img = new Image() const img = new Image()
img.onload = () => resolve(img) img.onload = () => resolve(img)
reader.onload = e => { img.src = file
img.src = e.target.result })
} } else {
reader.readAsDataURL(file) return new Promise(resolve => {
}) const reader = new FileReader()
const img = new Image()
img.onload = () => resolve(img)
reader.onload = e => {
img.src = e.target.result
}
reader.readAsDataURL(file)
})
}
} }
/** /**
@@ -253,23 +261,57 @@ function generateAttachmentMarkdown (fileName, path, showPreview) {
* @param {Event} dropEvent DropEvent * @param {Event} dropEvent DropEvent
*/ */
function handleAttachmentDrop (codeEditor, storageKey, noteKey, dropEvent) { function handleAttachmentDrop (codeEditor, storageKey, noteKey, dropEvent) {
const file = dropEvent.dataTransfer.files[0] if (dropEvent.dataTransfer.files.length > 0) {
const filePath = file.path const file = dropEvent.dataTransfer.files[0]
const originalFileName = path.basename(filePath) const filePath = file.path
const fileType = file['type'] const originalFileName = path.basename(filePath)
const isImage = fileType.startsWith('image') const fileType = file['type']
let promise const isImage = fileType.startsWith('image')
if (isImage) { let promise
promise = fixRotate(file).then(base64data => { if (isImage) {
return copyAttachment({type: 'base64', data: base64data, sourceFilePath: filePath}, storageKey, noteKey) console.log(file)
promise = fixRotate(file).then(base64data => {
return copyAttachment({type: 'base64', data: base64data, sourceFilePath: filePath}, storageKey, noteKey)
})
} else {
promise = copyAttachment(filePath, storageKey, noteKey)
}
promise.then((fileName) => {
const imageMd = generateAttachmentMarkdown(originalFileName, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName), isImage)
codeEditor.insertAttachmentMd(imageMd)
}) })
} else { } else {
promise = copyAttachment(filePath, storageKey, noteKey) for (let i = 0; i < dropEvent.dataTransfer.items.length; i++) {
const item = dropEvent.dataTransfer.items[i]
if (item.type === 'text/html') {
const html = dropEvent.dataTransfer.getData('text/html')
const match = /<img[^>]*src="([^"]+)"/.exec(html)
if (match) {
const imageURL = match[1]
getImage(imageURL)
.then(image => {
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
canvas.width = image.width
canvas.height = image.height
context.drawImage(image, 0, 0)
return copyAttachment({type: 'base64', data: canvas.toDataURL(), sourceFilePath: imageURL}, storageKey, noteKey)
})
.then(fileName => {
const imageMd = generateAttachmentMarkdown(imageURL, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName), true)
codeEditor.insertAttachmentMd(imageMd)
})
break
}
}
}
} }
promise.then((fileName) => {
const imageMd = generateAttachmentMarkdown(originalFileName, path.join(STORAGE_FOLDER_PLACEHOLDER, noteKey, fileName), isImage)
codeEditor.insertAttachmentMd(imageMd)
})
} }
/** /**