I'm trying to input the hash into the ipfs inner html and then also the ipfs href
<script src="https://cdn.jsdelivr.net/npm/ipfs-core/dist/index.min.js"></script>
<script>
async function saveFile(file) {
const node = await window.IpfsCore.create();
await node.add(file);
}
function receivedText() {
document.getElementById('ipfs').appendChild(document.createTextNode(fr.result));
}
function readfichier(e) {
if(window.FileReader) {
var file = e.target.files[0];
var reader = new FileReader();
if (file && file.type.match('image.*')) {
reader.readAsDataURL(file);
}
reader.onloadend = function (e) {
}
console.log(file);
document.getElementById('fileNameOutput').innerHTML = document.getElementById('fileName').value;
document.getElementById('ipfs').innerHTML = saveFile(file);
}
}
function clickme() {
$('file').ready(function(){ const file = $('file').prop('files')});
var fr = new FileReader();
fr.onload = receivedText;
document.getElementById('file').addEventListener('change', readfichier, false);
//fr.readAsText(file);
//fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
}
</script>
<h1>Upload file to IPFS</h1>
<form id=form enctype="multipart/form-data">
<label>FileName</label>
<input id=fileName type="text" name="fileName">
<br><br>
<label>Upload file</label>
<input id=file type="file" name="file">
<br><br>
<div id=submit onclick="clickme();">Submit</div>
</form>
<h1>Here's your file, on the blockchain</h1>
<p>Name: <div id=fileNameOutput placeholder=FileName></div></p>
<p>Link: <a id=ipfs href="https://ipfs.io/ipfs/"></a></p>
it has to wait until the document loads, to add a click on the button to add the event listener for the file loading.
I'm getting close and it's taken me hours to get here, trying ipfs mini and ipfs http client and trying to do it on the back end. Hopefully i can get all versions working so there's a back up.
This is effectively a save point in my work for me. Thank you for reading and helping if you can