Uploading image to imgur album

JavaScript
1

There is a post on imgur that is sort of like my question, but it’s using jquery and I don’t want to just copy and paste it. I’ve tried implementing what I saw into my code though.

I can upload an image to my imgur account, But I can’t upload it to an album I have. I’ve tried implementing some code I’ve seen like:

    var fd = new FormData();
    fd.append(image, img);
    fd.append(album, albumId);
    ...
    xhr.send(fd);

and something like:

    var payload = {image: img, album: albumId};
    ...
    xhr.send(payload);

and using every combination of url I could, but nothing uploads the image to the album.

The only thing that works is: xhr.send(img);, and no matter what url I use, it only uploads it to my account, not my album.

The docs say to use this url: https://api.imgur.com/3/album/{{albumHash}}/add
so I changed albumhash to my albums id and tried sending the image, but it only uploads it to my account not my album.

My code:

function upload(img)
{
  imgur_access_token = 'access token';

  albumId = 'album id';
  url = 'https://api.imgur.com/3/album/' + albumId + '/add';

  var xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.open('POST', url);
  xhr.setRequestHeader('Authorization', 'Bearer ' + imgur_access_token);
  xhr.setRequestHeader('Content-Type', 'multipart/form-data;');
  xhr.onload = function()
  {
    var response = xhr.response;
    if (response.success)
    {
      var link = response.data.link;
      console.log('link: ' + link);
    }
    else
    {
      console.log('not successful');
    }
   }
   xhr.send(img);
}

So, my question is - How come the code in question that I linked works, but I haven’t had any success with mine? What should I change in my code to get it working?

2

Based on my read of the documentation, you don’t actually upload an image at this endpoint. Instead, you upload at the image upload endpoint before then adding that image to an album at the album add endpoint you’re trying to use here.

When you post the image, the response will include the ID. Pull that out of the response and use it in the body of your request to the album add endpoint to include that image in your album.

2 Likes
3

I’m a little confused. I got the image id, but where do I upload the image to the album? So I’ll have 2 urls - image and album id/add. open with the image url, then use the link and open with the album url and send the image?

4

You don’t upload it a second time. Instead, as raddevon said:

tell imgur to add that already uploaded image (using the image id) to one of your albums.

5

how?

6

Based on what @raddevon was saying, here is the documentation to add images to an album.

7

I meant like how would I go about this. Like Post again using the album url and sending the link? Because When I tried that it didn’t work, so I’m kinda just more confused about this.

8

According to the add images to an album documentation, you give it the image id using a parameter key called deletehashes

It’s not an intuitive way to do things, which is why documentation is so vitally useful.

9

I see all the documentation thats been linked… I was asking:

after I xhr.open('POST', 'https://api.imgur.com/3/image');, I guess I set ids = [img], then how do I send this to the album…

Do I open another xhr.open('POST', 'https://api.imgur.com/3/album/' + ids + '/add') and xhr.send(null) or something?

this is where I’m confused…

10

[quote=“erkneorhNO, post:9, topic:287287, full:true”]
I see all the documentation thats been linked… I was asking:

after I xhr.open('POST', 'https://api.imgur.com/3/image');, I guess i set ids[/quote]

Don’t guess - read the documentation.

1 Like
11

… I’m gonna be honest. You’re not helping much at all.

I see in the documentation (add images to an album - authed) that I create and array of ids and add the link to it.
Again, do I xhr.open with the album url and then do I send the image or the ids after? I tried this and it didn’t work, so obviously that isn’t right and I still don’t know what to do.
I also tried creating a formdata and sending the formdata with the id. That didn’t work either…so I’m no closer to solving this then I was when I asked this question.

Sorry if I’m sounding like a broken record, it’s just you keep sending me the same links to the docs that I’ve already seen and it’s obviously not helping. I can upload the image to imgur, but I don’t see how to add that image to an album.

12

The documentation doesn’t say to use ids. Here’s what I said about it earlier.

13

I’m using the authed version with the access token for the account…

This is what I added to my code. It still doesn’t work though, the error I get is
POST https://api.imgur.com/3/album/album_id/add 401 ()

  xhr.onload = function()
  {
	var response = xhr.response;
	if (response.success)
	{
	  var id = response.data.id;
	  var ids = [];
	  ids.push(id);
	  
	  var fd = new FormData();
	  fd.append('ids[]', ids[0]);
	  
	  xhr.open('POST', album_url);
	  xhr.send(fd);
	}
	else
	{
	  console.log('not successful');
	}
   }
14

I see that you are sill using ids when I and the documentation have said on multiple occasions that you shouldn’t do things that way.

1 Like
15

when I and the documentation have said on multiple occasions that you shouldn’t do things that way.

Add Images to an Album (Authed):

“You must specify ids or deletehashes in order to add an image to an album.”
“–form ‘ids={{imageHash}}’”

?

Regardless, I did just try it with deletehashes and using client id, and it still didn’t work so…

16

The most recent code you posted should work if you add your auth header on the add to album request (just like you do on the first request, but you’ll have to do it again on the second). The 401 you’re getting back is the error code for Unauthorized. You might need to set the content type header on the second request too.

17

I added both headers, but I get back a loop that looks like this:

index.js:456 XHR finished loading: OPTIONS "https://api.imgur.com/3/image".
...
XHR finished loading: POST "https://api.imgur.com/3/image".
index.js:437 id: <image id>
index.js:443 XHR finished loading: OPTIONS "https://api.imgur.com/3/album/album_id/add".
...
XHR finished loading: POST "https://api.imgur.com/3/album/album_id/add".
index.js:437 id: undefined
index.js:443 XHR finished loading: POST "https://api.imgur.com/3/album/album_id/add".
xhr.onload @ index.js:443
index.js:437 id: undefined
index.js:443 XHR finished loading: POST "https://api.imgur.com/3/album/album_id/add".
xhr.onload @ index.js:443
index.js:437 id: undefined
...
continues with POST and id: undefined
18

OK. Can you share all the code for your AJAX calls? I feel like I need a little more context before I can help you with that problem.

19

Just noticed you can do this with a single request by adding the album ID when you upload the image. Check the album parameter on the image upload endpoint documentation.

20

I can upload the image to my album with this code:

//img = html2canvas 'image'
function upload(img)
{
  imgur_client_id = 'client_id';
  imgur_access_token = 'client_access_token';

  albumId = 'album_id';
  img_url = 'https://api.imgur.com/3/image';
  album_url = 'https://api.imgur.com/3/album/' + albumId + '/add';

  var xhr = new XMLHttpRequest();
  xhr.responseType = 'json';
  xhr.open('POST', img_url);
  xhr.setRequestHeader('Authorization', 'Bearer ' + imgur_access_token);
  //xhr.setRequestHeader('Content-Type', 'multipart/form-data;');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function()
  {
	var response = xhr.response;
	if (response.success)
	{
	  console.log(response.data);
	}
	else
	{
	  console.log('not successful');
	}
   }
   xhr.send(JSON.stringify({'image': img, 'album': albumId}));
}

But I can’t upload it to the album with the xhr.setRequestHeader('Content-Type', 'multipart/form-data;'); and using form data or just sending the image…
It works, but I’m not sure if it’s right…The docs say to use the multipart/form-data request header and the above code seems a little slow posting.