How to Download Image From URL Using Fetch API and Upload to Imgur in Javascript Full Project For Beginners



Welcome folks today in this blog post we will be downloading image from url using fetch api and upload to imgur api in javascript. All the full source code of the application is shown below.





Get Started




In order to get started you need to make an index.html file and copy paste the following code







<div class="card text-center">
    <div class="card-header">Bootstrap 4 card example</div>
    <div class="card-body">
        <div class="card-title">Hello World, this is PugHtml</div><i class="fa fa-home fa-2x text-primary"></i>
    <div class="card-footer text-muted">powered by Bibooki</div>
<script src=""></script>
<script src=""></script>



Now make a style.css file and copy paste the following code






@import url(",700,400italic,700italic");
body {
  color: #222;
  background-color: #f8f8f8;
  font-family: 'Noto Sans', Arial, "Lucida Grande", sans-serif;
h2 {
  margin: 5px 0 10px;
h1 {
  font-size: 24px;
h2 {
  font-size: 22px;
#log-box {
  width: 90%;
  margin-top: 4em;


See also  Deno.js Tutorial to Convert JSON File to .env File Using TypeScript Full Project For Beginners


Now make a script.js file and copy paste the following code






function processStatus(response) {
  if (response.status === 200 || response.status === 0) {
    return Promise.resolve(response)
  else {
    return Promise.reject(new Error(`Error loading: ${url}`))

function parseBlob(response) {
  return response.blob()

function parseJson(response) {
  return response.json()

// download/upload
function downloadFile(url) {
  return fetch(url)

function uploadImageToImgur(blob) {
  var formData = new FormData()
  formData.append('type', 'file')
  formData.append('image', blob)

  return fetch('', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      Authorization: 'Client-ID 1bddacd2afe5039'// imgur specific
    body: formData

// --- ACTION ---

var sourceImageUrl = ''


$('#start').on('click', function(ev) {
  $.log(`Started downloading image from <a href="${sourceImageUrl}">image url</a>`)

  downloadFile(sourceImageUrl)  // download file from one resource
    .then(uploadImageToImgur)   // upload it to another
    .then(function(data) {
      $.log(`Image successfully uploaded to <a href="
  ${}"> url</a>`);
      $.log(`<img src="${}"/>`)
    .catch(function(error) {
      $.error(error.message || error);


Leave a Reply