Uploading images doesn't work

[Reinmar]

📝 Provide detailed reproduction steps (if any)

1. Drop/paste an image into the content
2. It's visible while being uploaded
3. But then the image stays in the content (as an element) but the src is broken
4. After saving the content all's fine, though

It's a weird issue because when I inspect the DOM in step 3, I copy the URL and try to see it, it gives me 404.

But then, when I save the content or switches to the GitHub's native preview mode, it works.

So, unfortunately, it seems that GH is delaying generating the asset until it's really needed.

---

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

[Reinmar]

This is how it looks after I drop an image:

And this is the data of the editor:

![](https://github.com/ckeditor/github-writer/assets/156149/bafd445b-09fc-4088-b49a-d58f04ae2053)

What's new here is that this is not the URL of an image, but rather some kind of ID. When I save that and load as a comment the URL I get is this:

https://user-images.githubusercontent.com/156149/237419443-b33d0511-319f-4ce4-bf35-554de8f67286.png

[pszczesniak]

Before save, the correct img url is very close to the URL which looks like after the save but temporary (until save) it's only served when correct JWT token is passed as an URL parameter; for example:

https://private-user-images.githubusercontent.com/7074833/243368952-eb356c5c-f8dc-4f1b-9e57-55ce2da13937.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJrZXkiOiJrZXkxIiwiZXhwIjoxNjg1OTcyNDk1LCJuYmYiOjE2ODU5NzIxOTUsInBhdGgiOiIvNzA3NDgzMy8yNDMzNjg5NTItZWIzNTZjNWMtZjhkYy00ZjFiLTllNTctNTVjZTJkYTEzOTM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzA2MDUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMwNjA1VDEzMzYzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTliMTJkM2Y4OGRlMjZmYjM1MWE4MGM3ZTI3NTVhMTM5ODU4NzU2OTU1MTliNGQxYmRjNDBiYTAwYjc1ZDFlODEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.HD7WnSA6CczxzKYda4a3SOlUN_alQp8kvfCqA_Kkc34

This link is expired, but just wanted to show the structure.

While uploading we get an object:

{
    "upload_url": "https://github-production-user-asset-6210df.s3.amazonaws.com",
    "header": {},
    "asset": {
        "id": 243370250,
        "name": "Screenshot.2023-06-02.at.14.51.48.png",
        "size": 4541,
        "content_type": "image/png",
        "href": "https://github.com/pszczesniak/ghw-tests/assets/7074833/bd2ece12-acd7-4319-8223-9222f26d97ec",
        "original_name": "Screenshot 2023-06-02 at 14.51.48.png"
    },
    "form": {
        "key": "7074833/243370250-bd2ece12-acd7-4319-8223-9222f26d97ec.png",
        "acl": "private",
        "policy": "eyJleHBpcmF0aW9uIjoiMjAyMy0wNi0wNVQxNDoxMTozNFoiLCJjb25kaXRpb25zIjpbeyJidWNrZXQiOiJnaXRodWItcHJvZHVjdGlvbi11c2VyLWFzc2V0LTYyMTBkZiJ9LHsia2V5IjoiNzA3NDgzMy8yNDMzNzAyNTAtYmQyZWNlMTItYWNkNy00MzE5LTgyMjMtOTIyMmYyNmQ5N2VjLnBuZyJ9LHsiYWNsIjoicHJpdmF0ZSJ9LFsiY29udGVudC1sZW5ndGgtcmFuZ2UiLDQ1NDEsNDU0MV0seyJ4LWFtei1jcmVkZW50aWFsIjoiQUtJQUlXTkpZQVg0Q1NWRUg1M0EvMjAyMzA2MDUvdXMtZWFzdC0xL3MzL2F3czRfcmVxdWVzdCJ9LHsieC1hbXotYWxnb3JpdGhtIjoiQVdTNC1ITUFDLVNIQTI1NiJ9LHsieC1hbXotZGF0ZSI6IjIwMjMwNjA1VDAwMDAwMFoifSx7IkNvbnRlbnQtVHlwZSI6ImltYWdlL3BuZyJ9LHsiQ2FjaGUtQ29udHJvbCI6Im1heC1hZ2U9MjU5MjAwMCJ9LHsieC1hbXotbWV0YS1TdXJyb2dhdGUtQ29udHJvbCI6Im1heC1hZ2U9MzE1NTc2MDAifV19",
        "X-Amz-Algorithm": "AWS4-HMAC-SHA256",
        "X-Amz-Credential": "AKIAIWNJYAX4CSVEH53A/20230605/us-east-1/s3/aws4_request",
        "X-Amz-Date": "20230605T000000Z",
        "X-Amz-Signature": "e26190deb213ba24852db5fc400f968f8f7010d3af6c9126cb9faae85ff83680",
        "Content-Type": "image/png",
        "Cache-Control": "max-age=2592000",
        "x-amz-meta-Surrogate-Control": "max-age=31557600"
    },
    "same_origin": false,
    "asset_upload_url": "/upload/assets/243370250",
    "upload_authenticity_token": "ELgF5OroX5pQkc3p2RDOO3TNsgESgq3SFG35189h7aNNgXakIIoyDyMlAAvwBdzIYo4p6Vlg5Pumk-AzfTErlA",
    "asset_upload_authenticity_token": "tDoJDPZk4PKjzhyOafBk9aSnANmLFeZvuFB7yo06i_EU3JARvOyJP3_UnlHTp0suiCvmgB-2kpJ9bdJM21IY5w"
}

Currently we use asset.href but it's not working as expected.

We can concat the expected url like this:

returnUrl = 'https://private-user-images.githubusercontent.com/' + response.form.key + '?jwt=' + ???

form.policy is not what we want- it's coded object 😉

atob( form.policy ) 👇

{
    "expiration": "2023-06-05T14:11:34Z",
    "conditions": [
        {
            "bucket": "github-production-user-asset-6210df"
        },
        {
            "key": "7074833/243370250-bd2ece12-acd7-4319-8223-9222f26d97ec.png"
        },
        {
            "acl": "private"
        },
        [
            "content-length-range",
            4541,
            4541
        ],
        {
            "x-amz-credential": "AKIAIWNJYAX4CSVEH53A/20230605/us-east-1/s3/aws4_request"
        },
        {
            "x-amz-algorithm": "AWS4-HMAC-SHA256"
        },
        {
            "x-amz-date": "20230605T000000Z"
        },
        {
            "Content-Type": "image/png"
        },
        {
            "Cache-Control": "max-age=2592000"
        },
        {
            "x-amz-meta-Surrogate-Control": "max-age=31557600"
        }
    ]
}

---

So far this ☝️ is what I got after investigation.