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

 

 

 

index.html

 

 

<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>
    <div class="card-footer text-muted">powered by Bibooki</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>

 

 

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

 

 

style.css

 

 

@import url("https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic");
body {
  color: #222;
  background-color: #f8f8f8;
  font-family: 'Noto Sans', Arial, "Lucida Grande", sans-serif;
}
h1,
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

 

 

script.js

 

 

// UTILS
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)
    .then(processStatus)
    .then(parseBlob)
}

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

  return fetch('https://api.imgur.com/3/upload.json', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      Authorization: 'Client-ID 1bddacd2afe5039'// imgur specific
    },
    body: formData
  })
    .then(processStatus)
    .then(parseJson)
}


// --- ACTION ---

var sourceImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/9/98/Pet_dog_fetching_sticks_in_Wales-3April2010.jpg'


$('#log-box').logbox()

$('#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="https://imgur.com/
  ${data.data.id}">imgur.com url</a>`);
      $.log(`<img src="${data.data.link}"/>`)
    })
    .catch(function(error) {
      $.error(error.message || error);
    })

  ev.stopPropagation()
})

Leave a Reply