IPFS/nft.storage displays image as string

1

I posted this on stackoverflow but hope someone here could help to.

I’m trying to read an image file and upload to IPFS using nft.storage API.

The code below works by converting the image to base64 string, but the nft.storage link only displays the string, not as an image as shown here → https://bafkreihxiweiopz4pfmqtub5klhsq7wuu7wrw24inbrozbl7cshd4uaqxq.ipfs.dweb.link/

If I decode the string, I could see the image.

<?php
    // image to string conversion
    $imagelink = file_get_contents($image_original_path); 
  
    // image string data into base64 
    $encdata = base64_encode($imagelink);

?>

<script>
document.getElementById("test").addEventListener("click", function() {
    
        jQuery.ajax({
            type: 'POST',
            url: 'https://api.nft.storage/upload',
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsIn...")
            },
            mimeType: 'multipart/form-data', // this too
            contentType: "image/png",
            cache: false,
            processData: false,
            data: "<?php echo $encdata; ?>",
            success: function(data) {
              console.log(data);
              process the JSON data etc
            },
            error: function(data) {
                console.log(data);
           } 
        });
});
</script>

How to let IPFS display the image at the link?

2

edit: I did not read your post correctly… AFAIK you can’t do that since no mime type? I would love to be wrong.

The way I did it is by using IPLD to add a MIME type.

See here → rust-linked-data/mime_type.rs at develop · Defluencer/rust-linked-data · GitHub

You can do ipfs dag get <CID> for the MIME typed block then ipfs cat <CID> the link to the data itself.

No need to encode before adding to ipfs BTW.

3

You mean set mime type as string as in below?

#[derive(Serialize, Deserialize)]
pub struct MimeTyped {
pub mime_type: String,
pub data: IPLDLink,
}

4

This will only work if you control the code and can program it to do what I said otherwise you could use Unixfs I think files extension are included. I’m not familiar with nft.storage API sorry.

See docs → File systems | IPFS Docs

1 Like