Upload an image to IPFS using ipfs-mini
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I want to use ipfs-mini to upload an image file to IPFS from the browser.

Is it possible? Please provide a working example that I can run in Chrome.

ipfs-mini is great because it's small (2.5kb). I don't want to use the full IPFS api (500kb+, maybe even 2MB+). But if there's some other small (<100kb) package, and ipfs-mini isn't possible, then please show with that other package.

When I try with ipfs-mini, the file gets uploaded but isn't being interpreted as an image (just shows garbled text). I guess it's not being encoded properly.

Here's some code that may help to get started (which works when using the full IPFS api, but results in the aforementioned error with ipfs-mini):

<script src="https://wzrd.in/standalone/buffer"></script>
function upload() {
    const reader = new FileReader();
    reader.onloadend = function() {
        const buf = buffer.Buffer(reader.result) // Convert data into buffer
        ipfs.add(buf, (err, result) => { // Upload buffer to IPFS
            if(err) {
                console.error(err)
                return
            }
            let url = `https://ipfs.io/ipfs/${result}`
            console.log(`Url --> ${url}`)
        })
    }
    const photo = document.getElementById("photo");
    reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
}

<form action="/">
  <fieldset>
    <legend>Upload photo</legend>
    <input type="file" name="photo" id="photo">
    <button type="button" onclick="upload()">Upload</button>
  </fieldset>
</form>
Hello it seems that you are not the only one having this issue with ipfs-mini https://github.com/SilentCicero/ipfs-mini/issues/4 I don't think that there will be a solution for your task and should use standard ipfs for that.
kerncy 7 months ago
@kerncy thanks for the info! Looks like I'll have to use the main JS library after all.
cchung 7 months ago
awarded to valerysntx

Crowdsource coding tasks.

1 Solution

Winning solution

Hi!, could You please check fiddle with approach?
https://jsfiddle.net/valerysntx/emezqenb/
It's based on base64 data-url encoding, so I beleive that's why it's working...
Thanks!

I checked out @kerncy's comment on the bounty itself. It looks like this base64 string encoding is indeed the best option with ipfs-mini.
cchung 7 months ago
Thanks for your work!
cchung 7 months ago