Upload Mage to Imgur Using Fetch Api

Let's write a minor application to upload an image to an Imgur anthology using the API. Hither's how we'll do it (and, more chiefly, how I figured out what to do):

Note: This is a long mail service that shows y'all how to use documentation to notice what'south of import and apply it while building your application. In the process, we will build a small app that uploads a photo to an album using the Imgur API. If yous're only interested in the code, skip downwards to the embedded demo which includes the terminal code for the app.

Annals the App

I commencement at the Imgur API documentation. The "Intro" section tells me I need to annals an awarding before I tin can brand API calls.

I do that and get a client ID and secret for my application.

Authentication

I read a little further into the hallmark department and notice I can cosign my calls in one of two ways: via OAuth or via the client ID I obtained earlier. The OAuth authentication is used "for accessing a user'southward account," so I don't retrieve I need that. If I were edifice a total-fledged Imgur customer, I would employ OAuth, but, since I but want to upload to an bearding anthology, I can use the client ID instead. The docs tell me I can do this past adding this authentication header to my HTTP request to the API:

              Authorisation: Client-ID <YOUR_CLIENT_ID>            

Finding the Correct Endpoint

At present, I know how I'll send an authenticated request. I just demand to know which endpoint to send it to. Since I desire to upload to an album, the "Album" endpoints seem like a good place to start looking. I find i chosen "Add together Images to an Album (United nations-Authed)." Sounds right. Here'south the clarification:

Takes parameter, deletehashes[], as an array of deletehashes to add to the album. Alternatively, the deletehashes parameter tin have a comma delimted string of deletehashes.

That clarification leads me to believe this is not the right endpoint for what I want to do. Delete hashes are a unique identifier Imgur uses for some of its resources. Knowing that and reading this description, I empathize this endpoint is intended to have a delete hash for an existing paradigm which will then be added to the album.

I desire to upload an epitome and add it to the anthology. This might really require ii calls: one for the upload and another to add to the album. Let's keep looking for the correct endpoint. I'll try to find one that lets me upload an image.

Later expanding "Epitome," I notice "Image Upload." This is definitely the right ane for uploading. I see I take to submit the image parameter. The endpoint also accepts some optional parameters:

• album
• type
• name
• title
• clarification

Knowing the endpoint accepts an album parameter makes my life a lot easier. Rather than first uploading the image with one request and so adding it to an album with a dissever request, I tin can do both with a request to the image upload endpoint.

The album parameter description reads like this:

The id of the album y'all desire to add the image to. For anonymous albums, album should be the deletehash that is returned at creation.

I added the emphasis there because this is important to united states of america. We want to upload the prototype to an anonymous album. Albums can be identified by either an ID or a delete hash. Since we want to upload to an anonymous album, we'll need to place it in the image upload parameters using the delete hash.

The Imgur API documentation has a sample request alongside each endpoint. By looking at the sample request for the epitome upload endpoint, I can come across the request is sent with a content-blazon of multipart/class-information. I too take note of the endpoint (https://api.imgur.com/three/image) and the asking method (Postal service). I'll need to know all of this when I'm making the upload request later.

Creating an Album

Before I can practise whatsoever of that, though, I need an anthology I can upload to. Since I already take API access, I'll utilise the API to create one. I'm only going to practise this once, so it doesn't need to exist role of the app. I'll use a common unix tool curlicue (available from the Mac terminal emulator and in most Linux distros) to create the album. Hither's the command I'll utilise:

              roll --request POST \   --url https://api.imgur.com/3/album \   --header 'Authorization: Client-ID 90ef1830bd083ba' \   --header 'Content-Type: multipart/grade-information' \   --form 'title=Album upload demo' \   --form 'description=Demo of album uploading via API'            

This command sends a Postal service request to the album endpoint to create a new anthology. The request has an Authorization header with my app's customer ID and a header defining the Content-Blazon as multipart/course-information. Then, in the form data, information technology sends a title and a description for the new anthology.

The command will then print the response from the API. Here'southward the response from creating the album:

              {"information":{"id":"bKbM4","deletehash":"EVGILvAjGfArJFI"},"success":true,"status":200}            

The API responds with the new anthology'south ID, delete hash, and some properties indicating our request was successful. We'll need this delete hash for our image upload requests to add together the new images to the album.

Creating the Image Upload Form

At present, I'thousand ready to build my application. I'll start with a basic HTML form that volition let users to select a file.

              <form>   <input type="file" required>   <button blazon="submit">Submit</button> </form>            

Processing the Grade

Time to beginning thinking in Javascript. I'm going to need to piece of work with a couple of my DOM elements. I'll need to put an event listener on my class so I know when the user submits it, and I need to be able to go the file the user selected in the file input. I'll first select the form, and I'll drill down from it into the file input element later when I need information technology.

              const class = certificate.querySelector('grade');            

Responding to the Submit Event

I'll listen for the form to be submitted.

              grade.addEventListener('submit', event => {   // Logic will go here });            

I could take listened for a click on the submit button instead, merely I like this method of listening to the form for a submit meliorate. It also catches a press of the enter key in one of the fields.

Grabbing the File

Once the form is submitted, I need to grab the file and fire off a request to the API. I know Javascript has a file API, only I'm non sure how to use information technology. I search for it on MDN. I demand to see an example of how to employ it, so I click through to their article with examples. This example shows what I need to do:

              var selectedFile = document.getElementById('input').files[0];            

Hither'south the first role of my submit event handler that grabs the user-selected file:

              const fileInput = event.target.querySelector('input'); const imageFile = fileInput.files[0];            

Building the Form Data

I know I demand a FormData object since that's the content type the API expects. From the MDN folio on FormData, I find their article on how to use the objects. I decide to create the object from scratch rather than initializing it from my grade. I'yard going to need to add together a parameter for the anthology anyway, so I may as well create it manually.

              const formData = new FormData(); formData.append('image', imageFile); formData.append('album', 'EVGILvAjGfArJFI');            

This uses the imageFile I grabbed previously from the form and adds both that and the album's delete hash (Call back, we have to use a delete hash since this is an anonymous album.) to the FormData object.

Sending the Asking

I'm at present ready to build my request and transport it off to the Imgur API. In the past, I would have reached for jQuery or used XMLHTTPRequest to send the asking, merely I know Javascript at present has a more than mod Fetch API that uses promises. (Promises are a really cool manner to write asynchronous code that makes information technology much more readable than callbacks.) I'll employ it instead. Here's my request:

              fetch('https://api.imgur.com/3/image', {   method: 'Postal service',   headers: new Headers({     Potency: 'Client-ID 90ef1830bd083ba'   }),   torso: formData }).then(response => {   if (response.ok) {     alert('Image uploaded to album');          } }).catch(fault => {   console.error(JSON.stringify(error));   alert('Upload failed: ' + error); });            

The first argument to fetch is the endpoint. The 2nd is an options object in which I ready the HTTP method to POST, add together my dominance header with my app's client ID, and specify the data for the trunk of the asking (in this case, the formData object I congenital earlier). I chain off that with a and then method which specifies which function should run on a success. I chain off that with a catch method that specifies what to run on a failed request. This is Javascript Promises at piece of work.

Fixing the Issues

That'due south almost everything. I exam the app… and it doesn't work. I keep getting my failure warning whenever I try to upload an image. I pull up Chrome DevTools to become some more than insight into what's happening. (If you lot're not using Chrome DevTools, yous should give it a try. CodeSchool has a great free course to get y'all up to speed on how to apply it.)

Oddly, the error doesn't get logged to the panel as I'd await. I switch to the network tab to run into what happens with the request, and I find it'south existence canceled. I really spent several days puzzling over what the problem was and concluded up posting on StackOverflow (a great resource for getting aid with evolution). I got an respond which eventually led me to the realization.

When an HTML form is submitted, by default, the browser sends a request to an endpoint with the form data. The endpoint is defined past the class's action attribute and the request method is divers by the class's method aspect. Those don't really apply in our instance since we will handle the form in Javascript. As a result, I haven't defined them on the form (which technically makes the lawmaking invalid since the activeness aspect is required). The browser will use the default method of Get and will submit the class data to the electric current URL since we oasis't set the action aspect.

This triggers the current page to be reloaded interrupting our fetch asking triggered via Javascript. That's why the asking was canceled: it was interrupted by a new request for the current URL. It was difficult to see what was happening because the page was just being reloaded, and, since I wrote the awarding in CodePen, the network history wasn't beingness refreshed since the residuum of the site wasn't existence reloaded — only my application.

Fortunately, Javascript has a unproblematic way to bargain with this. If you lot'll remember, way back when we wrote the submit outcome handler, nosotros named an upshot parameter to the event handler function. When the result triggers, the event object is passed to the upshot handler function. Each Javascript upshot objects has a preventDefault method which does exactly what nosotros want hither: information technology suppresses the default browser event handler which would normally be triggered by the result. I added this code to the top of the upshot handler:

              event.preventDefault();            

and just like that, the browser stops interrupting my fetch asking and lets me handle the form submission as I please.

Get Free Mentoring!

Every calendar week, I requite away four complimentary 30-minute mentoring sessions. Permit me help you figure out the adjacent steps on your journeying to a new career in web development!

Demo

That'south it! Our simple app that uploads images to an imgur album is up and working. Here'due south a CodePen you tin can try:

Encounter the Pen Imgur upload and add to album by Devon Campbell (@raddevon) on CodePen.

Once you've uploaded something, check out your prototype in the album at the Imgur anthology page.

killeenthatter1999.blogspot.com

Source: https://raddevon.com/articles/learn-read-api-documentation-building-imgur-album-specific-uploader/