h3 Example of how to upload and access a File Upload Button to imgur h3 input type file id myFile button id submitBtn onclick submit this Submit button br br script document body style minHeight 200px async function submit let imgFile document getElementById myFile files 0 console log imgFile imgFile let ret await fetch https api imgur com 3 image headers Content Type application json Content Type application x www form urlencoded Authorization Client ID aca6d2502f5bfd8 Accept application json method post mode cors no cors cors same origin cache no cache body imgFile let res await ret text console log return res let details JSON parse res details details data let link document createElement a link innerHTML Link to img details link link href details link document body appendChild link script Extends previous example but works with base64 h3 Example of how to upload and access a File Upload Button to imgur h3 input type file id myFile button id submitBtn onclick submit this Submit button br br script document body style minHeight 200px async function submit let imgFile document getElementById myFile files 0 console log imgFile imgFile var dataUrl data image gif base64 dataBase64 const reader new FileReader reader readAsDataURL imgFile reader onload async let base64 reader result data image jpeg base64 9j 4AAQSkZJRgABAQEAYAB console log base64 slice 0 100 let database64 base64 split base64 1 console log database64 slice 0 20 let data JSON stringify type base64 image database64 let ret await fetch https api imgur com 3 image headers Content Type application json Content Type application x www form urlencoded Authorization Client ID aca6d2502f5bfd8 Accept application json method post mode cors no cors cors same origin cache no cache body data let res await ret text console log return res let details JSON parse res details details data let link document createElement a link innerHTML Link to img details link link href details link document body appendChild link end onload reader script Copy and paste image directly takes image from clipboad and uploads it then gives you the link document body style minHeight 300px document onpaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes image continue looking for image png image jpg if items i kind file continue var blob items i getAsFile console log blob blob var reader new FileReader reader onload function event console log event target result data url look something like this data image png base64 iVBORw0KGgoA uploadtoimgur event target result reader readAsDataURL blob async function uploadtoimgur base64Img data image png base64 iVBORw0KGgoA let database64 base64Img split base64 1 console log base64 data database64 slice 0 20 let data JSON stringify type base64 image database64 let ret await fetch https api imgur com 3 image headers Content Type application json Content Type application x www form urlencoded Authorization Client ID aca6d2502f5bfd8 Accept application json method post mode cors no cors cors same origin cache no cache body data let res await ret text console log return res let details JSON parse res details details data let link document createElement a link innerHTML Link to img details link link href details link document body appendChild link let img document createElement img document body appendChild img img src details link console log select screen output and paste something Progress status also markdown insert replace 1 select where in the textarea you want to insert the image 2 click page if it s an image not text it will upload it to imgur while uploading it inserts a unique identifier in the format sasdkaflej223 3 when finished uploading and has the correct url it replaces the temp identier with the url textarea id textarea style width 100 min height 300px textarea script async version of the XMLHttpRequest async function asyncXMLHttpRequest method url formData headers return new Promise function resolve reject let xhr new XMLHttpRequest xhr open method url Object keys headers forEach k let v headers k xhr setRequestHeader k v xhr onload function if this status 200 this status 300 resolve xhr response else reject status this status statusText xhr statusText xhr upload onprogress function e if e lengthComputable let percentComplete e loaded e total 100 toFixed 3 console log percentComplete uploaded xhr onerror function reject status this status statusText xhr statusText xhr send formData script script Random string ref url https notebook xbdev net index php page randomstring const randomString len let res for let m 0 m len m ascii 0 9 a z A Z const digit a return a charCodeAt 0 const ascii d return String fromCharCode d let v 0 9 a z A Z let n Math floor Math random 3 let lo digit v n 0 let hi digit v n 1 res ascii lo Math floor hi lo Math random return res script script document body style minHeight 500px function typeInTextarea textToInsert el const start end el selectionStart el selectionEnd update the value with our text inserted el value el value slice 0 start textToInsert el value slice end update cursor to be at the end of insertion el selectionStart el selectionEnd start textToInsert length var dopaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes image continue looking for image png image jpg if items i kind file continue var blob items i getAsFile console log blob blob const uid randomString 20 const uidstring uid typeInTextarea uidstring document getElementById textarea var reader new FileReader reader onload function event console log event target result data url look something like this data image png base64 iVBORw0KGgoA uploadtoimgur event target result uidstring reader readAsDataURL blob document getElementById textarea addEventListener paste dopaste async function uploadtoimgur base64Img uidstring data image png base64 iVBORw0KGgoA let database64 base64Img split base64 1 console log base64 data database64 slice 0 20 let data JSON stringify type base64 image database64 let headers Content Type application json Content Type application x www form urlencoded Authorization Client ID aca6d2502f5bfd8 Accept application json let res await asyncXMLHttpRequest post https api imgur com 3 image data headers console log return res let details JSON parse res details details data const ta document getElementById textarea ta value ta value replaceAll uidstring details link let link document createElement a link innerHTML Link to img details link link href details link document body appendChild link let img document createElement img document body appendChild img img src details link img width 100 img height 100 console log select screen output and paste something script
ste something Progress status also markdown insert replace 1 select where in the textarea you want to insert the image 2 click page if it s an image not text it will upload it to imgur while uploading it inserts a unique identifier in the format sasdkaflej223 3 when finished uploading and has the correct url it replaces the temp identier with the url textarea id textarea style width 100 min height 300px textarea script async version of the XMLHttpRequest async function asyncXMLHttpRequest method url formData headers return new Promise function resolve reject let xhr new XMLHttpRequest xhr open method url Object keys headers forEach k let v headers k xhr setRequestHeader k v xhr onload function if this status 200 this status 300 resolve xhr response else reject status this status statusText xhr statusText xhr upload onprogress function e if e lengthComputable let percentComplete e loaded e total 100 toFixed 3 console log percentComplete uploaded xhr onerror function reject status this status statusText xhr statusText xhr send formData script script Random string ref url https notebook xbdev net index php page randomstring const randomString len let res for let m 0 m len m ascii 0 9 a z A Z const digit a return a charCodeAt 0 const ascii d return String fromCharCode d let v 0 9 a z A Z let n Math floor Math random 3 let lo digit v n 0 let hi digit v n 1 res ascii lo Math floor hi lo Math random return res script script document body style minHeight 500px function typeInTextarea textToInsert el const start end el selectionStart el selectionEnd update the value with our text inserted el value el value slice 0 start textToInsert el value slice end update cursor to be at the end of insertion el selectionStart el selectionEnd start textToInsert length var dopaste function e console log pasted e var items e clipboardData e originalEvent clipboardData items for let i 0 i items length i if items i type includes image continue looking for image png image jpg if items i kind file continue var blob items i getAsFile console log blob blob const uid randomString 20 const uidstring uid typeInTextarea uidstring document getElementById textarea var reader new FileReader reader onload function event console log event target result data url look something like this data image png base64 iVBORw0KGgoA uploadtoimgur event target result uidstring reader readAsDataURL blob document getElementById textarea addEventListener paste dopaste async function uploadtoimgur base64Img uidstring data image png base64 iVBORw0KGgoA let database64 base64Img split base64 1 console log base64 data database64 slice 0 20 let data JSON stringify type base64 image database64 let headers Content Type application json Content Type application x www form urlencoded Authorization Client ID aca6d2502f5bfd8 Accept application json let res await asyncXMLHttpRequest post https api imgur com 3 image data headers console log return res let details JSON parse res details details data const ta document getElementById textarea ta value ta value replaceAll uidstring details link let link document createElement a link innerHTML Link to img details link link href details link document body appendChild link let img document createElement img document body appendChild img img src details link img width 100 img height 100 console log select screen output and paste something script