mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 21:28:11 +09:00 
			
		
		
		
	Refactor image paste code (#13354)
Some minor refactors I did while investigating another issue. Functionalily should be pretty much the same as before. Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
		| @@ -305,42 +305,32 @@ function replaceAndKeepCursor(field, oldval, newval) { | |||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
| function retrieveImageFromClipboardAsBlob(pasteEvent, callback) { | function getPastedImages(e) { | ||||||
|   if (!pasteEvent.clipboardData) { |   if (!e.clipboardData) return []; | ||||||
|     return; |  | ||||||
|  |   const files = []; | ||||||
|  |   for (const item of e.clipboardData.items || []) { | ||||||
|  |     if (!item.type || !item.type.startsWith('image/')) continue; | ||||||
|  |     files.push(item.getAsFile()); | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   const {items} = pasteEvent.clipboardData; |   if (files.length) { | ||||||
|   if (typeof items === 'undefined') { |     e.preventDefault(); | ||||||
|     return; |     e.stopPropagation(); | ||||||
|   } |  | ||||||
|  |  | ||||||
|   for (let i = 0; i < items.length; i++) { |  | ||||||
|     if (!items[i].type.includes('image')) continue; |  | ||||||
|     const blob = items[i].getAsFile(); |  | ||||||
|  |  | ||||||
|     if (typeof (callback) === 'function') { |  | ||||||
|       pasteEvent.preventDefault(); |  | ||||||
|       pasteEvent.stopPropagation(); |  | ||||||
|       callback(blob); |  | ||||||
|     } |  | ||||||
|   } |   } | ||||||
|  |   return files; | ||||||
| } | } | ||||||
|  |  | ||||||
| function uploadFile(file, callback) { | async function uploadFile(file) { | ||||||
|   const xhr = new XMLHttpRequest(); |  | ||||||
|  |  | ||||||
|   xhr.addEventListener('load', () => { |  | ||||||
|     if (xhr.status === 200) { |  | ||||||
|       callback(xhr.responseText); |  | ||||||
|     } |  | ||||||
|   }); |  | ||||||
|  |  | ||||||
|   xhr.open('post', $('#dropzone').data('upload-url'), true); |  | ||||||
|   xhr.setRequestHeader('X-Csrf-Token', csrf); |  | ||||||
|   const formData = new FormData(); |   const formData = new FormData(); | ||||||
|   formData.append('file', file, file.name); |   formData.append('file', file, file.name); | ||||||
|   xhr.send(formData); |  | ||||||
|  |   const res = await fetch($('#dropzone').data('upload-url'), { | ||||||
|  |     method: 'POST', | ||||||
|  |     headers: {'X-Csrf-Token': csrf}, | ||||||
|  |     body: formData, | ||||||
|  |   }); | ||||||
|  |   return await res.json(); | ||||||
| } | } | ||||||
|  |  | ||||||
| function reload() { | function reload() { | ||||||
| @@ -350,33 +340,29 @@ function reload() { | |||||||
| function initImagePaste(target) { | function initImagePaste(target) { | ||||||
|   target.each(function () { |   target.each(function () { | ||||||
|     const field = this; |     const field = this; | ||||||
|     field.addEventListener('paste', (event) => { |     field.addEventListener('paste', async (e) => { | ||||||
|       retrieveImageFromClipboardAsBlob(event, (img) => { |       for (const img of getPastedImages(e)) { | ||||||
|         const name = img.name.substr(0, img.name.lastIndexOf('.')); |         const name = img.name.substr(0, img.name.lastIndexOf('.')); | ||||||
|         insertAtCursor(field, `![${name}]()`); |         insertAtCursor(field, `![${name}]()`); | ||||||
|         uploadFile(img, (res) => { |         const data = await uploadFile(img); | ||||||
|           const data = JSON.parse(res); |         replaceAndKeepCursor(field, `![${name}]()`, ``); | ||||||
|           replaceAndKeepCursor(field, `![${name}]()`, ``); |         const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); | ||||||
|           const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); |         $('.files').append(input); | ||||||
|           $('.files').append(input); |       } | ||||||
|         }); |  | ||||||
|       }); |  | ||||||
|     }, false); |     }, false); | ||||||
|   }); |   }); | ||||||
| } | } | ||||||
|  |  | ||||||
| function initSimpleMDEImagePaste(simplemde, files) { | function initSimpleMDEImagePaste(simplemde, files) { | ||||||
|   simplemde.codemirror.on('paste', (_, event) => { |   simplemde.codemirror.on('paste', async (_, e) => { | ||||||
|     retrieveImageFromClipboardAsBlob(event, (img) => { |     for (const img of getPastedImages(e)) { | ||||||
|       const name = img.name.substr(0, img.name.lastIndexOf('.')); |       const name = img.name.substr(0, img.name.lastIndexOf('.')); | ||||||
|       uploadFile(img, (res) => { |       const data = await uploadFile(img); | ||||||
|         const data = JSON.parse(res); |       const pos = simplemde.codemirror.getCursor(); | ||||||
|         const pos = simplemde.codemirror.getCursor(); |       simplemde.codemirror.replaceRange(``, pos); | ||||||
|         simplemde.codemirror.replaceRange(``, pos); |       const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); | ||||||
|         const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); |       files.append(input); | ||||||
|         files.append(input); |     } | ||||||
|       }); |  | ||||||
|     }); |  | ||||||
|   }); |   }); | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user