Our JavaScript code is more interesting, and it is where the interaction with IPFS takes place. The main work happens in the function that we will pass to the HTML button as the onclick handler, uploadFile(). This function performs the following tasks:
- Reads the file into a raw binary data buffer using FileReader
- Initializes an ipfs object and binds it to our IPFS client by calling the IpfsApi constructor
- Adds the file to IPFS using the ipfs.files.add() method
- Uses the resulting hash to create a URL that can be output to the user
The following is the full file, showing the commented code. Along with the main upload function, the file contains a small amount of jQuery code, used in parsing the filename from the input and in showing the resulting IPFS URL:
// Get a reference to the file path from the HTML.
const filePath = $('#filePath');
// Change the string displayed in the input to reflect the selected file.
$('#fileToUpload').on('change',function(){
let fileName = $(this).val().split('').pop();
$(this).next('.custom-file-label').html(fileName);
filePath.hide();
});
function uploadFile() {
// Create a new FileReader instance to read the file.
const reader = new FileReader();
// Define a function to be called once reading the file is complete.
reader.onloadend = () => {
// Call the IpfsApi constructor as a method of the global window object.
const ipfs = window.IpfsApi('localhost', 5001);
// Put the file data into a buffer that IPFS can work with.
const buf = buffer.Buffer(reader.result);
// Add the file buffer to IPFS, returning on error.
ipfs.files.add(buf, (err, result) => {
if (err) {
console.error(err);
return
}
// Form the IPFS URL to output to the user.
const outputUrl = `https://ipfs.io/ipfs/${result[0].hash}`;
const link = document.getElementById('ipfsUrl');
link.href = outputUrl;
document.getElementById("ipfsUrlString").innerHTML= outputUrl;
// Show the URL to the user.
filePath.show();
});
};
// Get the file from the HTML input.
const file = document.getElementById("fileToUpload");
// Read the file into an ArrayBuffer, which represents the file as a
// fixed-length raw binary data buffer.
reader.readAsArrayBuffer(file.files[0]);
}
Once the files have been created inside of the project directory, we can run the project by starting the web server:
npm run dev
This will serve the page locally, at http://localhost:3000, or on the next available port (if port 3000 is taken).
From here, clicking on Input will open a file browser, from which a local file can be selected. Clicking on Upload will then add the file to IPFS via our IPFS node, and will display the URL at which the file can be viewed via the public IPFS gateway.
Our file uploader is now running on our local machine. To make our file uploader available to the public, we can either host it on a centralized hosting platform, or, as mentioned earlier, push the frontend files to IPFS itself.