Upload 10000 NFTs to IPFS

hey how's it going guys my name is daniel aka hashflips and welcome to this is very exciting video where i finally showed you how to upload onto ipfs firstly if you do struggle with this video go and re-watch this series this red thumbnail series talking about minting from a to z most of the concepts that i'll be discussing today will be regarding this series as well as extra especially the ipfs part perfect the next thing i want to mention is if you struggle go and check out our telegram page because our community on telegram is growing rapidly and a lot of people get help there especially if something goes wrong anyway let's get started with ipfs so before we jump in we have to look at ipfs what is ipfs and simply i don't want you to get scared when you hear ipfs or think about anything more complex than a storage mechanism think of it as a external storage hard drive but this external storage hard drive is spread across the whole world in different nodes and a lot of people share these nodes and they make sure that that data lives forever all right so ipfs storage mechanism and we are going to take data and we're going to store it how do we track an image that's stored on ipfs well every piece of data that goes onto ipfs whether it's a folder videos image whatever it is even websites gets an address a unique identifier called a cid let's go and look at how a cid looks like let's take a look at open seas documentation on metadata standards why is this important well openc is the market leader when it comes down to nft marketplaces they give a good understanding of how metadata should be structured for their marketplace to consume as well as storage mechanisms if we scroll down on this page on opencs documentation we get to the section where ipfs is mentioned there are numerous ways of using ipfs ipfs is simply the storage mechanism but how that data gets there that's another question on its own there are so many ways and that's why i've waited this long to show you a way because i figured that through all these different ways there's coding different ways they are direct minting ways and all these things i wanted to find a simple enough way where you can upload bulk uh bulk amount of data and actually reference it through a smart contract and that's what we'll be doing today anyway i talked about the cid and this is how a c id looks like it generally starts with the mq and this address basically refers to a single piece of data a folder a video on the ipfas network i just want you to understand that and you'll be good going forward a cid is a unique identifier keep in mind if the data ever changes that cid also changes because it's generated from that data it's a hash of that data in some way all right there are other ways of uploading ipfs to ipfs via apis via the console and also you can have a node js server running serving your files your metadata and uploading that actual server to the ipfs if you want to learn more you can read this article over here what we are going to be focusing on and the goal for this video is to get a cid for all the images a folder where all our images will live on so we have a unique identifier we are going to adapt our metadata to be appended with ipfs colon in forward slashes this is not how you call the ipfs network by the way but if you specified like this in your metadata openc will read it and replace that ipfs with the correct gateway we'll talk a little bit about gateways in a second let's go ahead and look a little bit deeper into ipfs and how can we actually go and store it on ipfs what mechanism can we use like i mentioned there are different ways of accessing ipfs and uploading data one of the ways is actually downloading the ipfs desktop app the app looks like this and it has a file section much similar to the one i'm going to show you on pinata the reason why i'm going to show you pinata is because there's a lot of dependencies that you need to install such as the ipfs cli which sometimes doesn't work nicely with mac especially the m1 chips so i don't want you to go and struggle i'm rather going to show you an external service that uses ipfs but is a nice wrapper and you don't have to host the node yourself this is hosting the node yourself and you can go that route as well talking about pinata this is what we'll be using today it's a service that kind of wraps around ipfs and provides file storage i already have an account but if you go to the pricing model these people are free and i'm just going to use this free plan we do get up to one gigabyte of free storage on this platform right and it's not only this platform it's the whole of ipfs just keep that in mind but on this platform we get about a gigabyte worth of storage for free which is super awesome thank you pinata all right and then the last way not the last way but another way but a special kind of console and javascript way of uploading nfts you can actually go and use nft storage these guys have a special kind of api that you can interact with either through http meaning requests or a javascript library so we can actually use this in our node.js code to kind of on the fly mint to a smart contract in the future we'll definitely get to these kind of things but for today we're going to keep it simple i'm going to show you your baby steps in uploading onto ipfs what you need to do now is actually go and go and create a or login to pinata by creating account create a free account and then get to the dashboard which looks like this the dashboard actually looks much the same as ipfs desktop right so the desktop app of ips pfs looks very similar to this the reason for that is because it's so simple it's a folder that you upload things to and it creates these unique c ids we're gonna see how we can upload a folder just now but go ahead and create this profile first then get to your portal okay so we have ipfs ready waiting for us okay it's ready for us to upload some data but we don't have data yet if you want a cool art generative code program going to watch the series especially this purple series over here at the top this will give you great insight on what i'm about to show you right now i'm just going to show the simplified version but anyway you can read down here in the documentation on how to use this basically we're going to take layers converted into images and we're going to create a lot of them we're not going to create 10 000 because i want this video to be quick so i'm going to make only 20 images but we are going to do the full process next what you want to do is have node.js installed and also click on this latest release over here on the right once you get to this release this release actually has the functionality to rename the base uri that you're going to need for the ipfs so go ahead and download the source code over there in the zip file unzip it and open it in your favorite ide i am going to personally use a visual studio code after you've downloaded the program this is how it's going to look in your ide you can open it in any ide so here's all the folders and files that we're going to work with we need to make sure that we have installed all the dependencies in your terminal run npm and install so install all the dependencies we're just going to install canvas for now once this is done installing we are going to simply run this program and just generate the basics because i just want to convey the message of how to take these images with this json files and upload them a long story short all this program does is you populate images in this layers folder namely eye colors you can have eyeballs that we've chosen some goo some irises and these are basic layers that structure is defined in the source file in the config file.js in the source folder this is where the structure is specified these layers names needs to be exactly spelled correctly over here and the order here needs to be correct you want to render from the background all the way to the top you can do this by watching the previous series like i said but for now just enjoy this just look at this video at how to actually build this up generate artworks and the metadata along with the collection so next what we want to do you notice that there's no build folder inside of this file system just a side note windows users seem to have a problem with this program because they don't give it the permission so when you open the folder onto your ide maybe open it as an administrator or something that might help a lot anyway to get this program running i'm gonna hit command k to clear out the terminal this is only on mac but then i'm going to enter node space index dot js when i run this this program is now going to programmatically create new images and here we go there's a new build file i'm going to open this build file and check inside here there's an image directory as well as a json directory these images look like new eyeballs that's just been generated from the layers that i've shown you in that previous folder how cool is this repo anyway in the json folder over there is the exact same json for each different file and so we have one.json2.json3.json and we have the corresponding images in the images folder the reason why the json looks like this is because we have to keep to the standard of opencs metadata and the attributes field each nft needs these fields to truly be an nft and for marketplaces to consume it correctly one important field is this image this actual image url we are going to actually try and refer reference an ipfs cid instead of a url to pinpoint where our nft lives i'll show you how to do that in a second but the attributes are there as well so if you can see these are how the attributes look and in our case they look exactly the same this like i mentioned is the image thing that we are going to be replacing once we have our cid we don't have that yet then we have to go and create it on pinata first in order for us to know where these images live let's go and do that let's go ahead and now that we're happy with our whole collection we have images and json files for the metadata we can go ahead now to pinata and upload this so i'm going to go ahead and i'm going to go to my browser i'm going to go to pinata and the next step that we want to do is actually upload that whole image folder onto pinata so click up here on the upload icon we want to select folder then i'm going to search for that whole images folder just the images folder so let's select this whole images folder i'm going to say upload it's going to ask me do i want to upload these 20 files i'm going to say yes and here's where we have to actually give it a name this is just a name that pinata will have here for you to know what this actually is i think let's create ipfs then we'll call it full test ipfs full test images like that all right gonna say upload and this process will kick off it's going to upload my data at this very second you basically have uploaded data to ipfs okay and in that it's created a cid to that folder here it is so you can see ipfs full test images and there is our unique cid which we can now go ahead and copy and reference in a gateway and i'm going to explain to you what a gateway is just now but basically this is the identifier of where this data lives this whole folder you can have a look at your folder by clicking here on this eye and it will upload and open up this gateway and then it will go and display all the images that's in here so i want to make something very clear of this url everything from here to here is the gateway it means that everything from before your cid is the gateway how it gets to the data gateways can always change and that's why we're going to try and not include the gateway into our nft we are going to reference it how openc wants us to reference it because openc chooses its own gateway all right this part is the unique identifier telling us where it's stored on ipfs alright that is how it works but apart from that our fully qualified url file image will probably look something like this forward slash one dot png when we hit one dot png like so we will get to the actual image because it's stored in that location in that folder right perfect i hope that's very clear let's jump back to pinata and then let's go ahead and actually copy the cid click on this button over there so it's copied make sure that you copy this correctly i want to mention another thing there is a concept called pinning in pinata hence the name and also in ipfs pinning is talked about a lot what pinning basically means is if you pin something and i think by default it gets pinned on pinata if you leave the data here for long enough i don't know if we should do anything more to it edit pin policy lc but as long as you pin it it means that it will actually start spreading across the ipfs network on two different nodes it means that you are happy with the data and it can live forever because once it starts spreading there's no real way of taking it ever down keep that in mind okay that's the concept of pinning making sure that it stays on there once you've pinned something and it's on there for long enough enough nodes gets hold of that data and then starts duplicating it and sharing it across the world and that's how data stays there forever anyway now that we have copied our cid you can see these other projects that i've just tested with but i'm going to copy my one your one would look different i'm going to navigate back to my app once i'm back to my app i do not want to run this program again so at this point you do not want to run a node index.js again because you'll rewrite your data and you'll have to do this process from the start okay so don't run node index.js instead what we want to do is go to the source folder go to the config.js and go and replace this ipfs basically this part over here what we want is it to say ipfs colon forward slash forward slash and the cid all right this is exactly what we wanted to do the reason for us only putting it here and i will show you now we don't put a forward slash over over here but on the smart contract we do put a forward slash okay the reason for this is that this smart contract if we go to the main.js just briefly it goes and puts a forward slash there and appends the edition and then appends this png all right but this program has already run so how are we going now to update this base uri without running the program again well that's why we have utilities so what i want you to do is replace your uri now in there save it then type in node space utils forward slash update base uri so you are going to type node space utils forward slash update base uri dot js once you've done this take note that this says that it's now updated the base uri to be this and indeed if we go ahead and now look at our build folder if we're going to the json we can see that the metadata now contains this fully qualified url you can see all the images also is updated and notice that the extension also is stays the same perfect if we now take this and go and put this into the browser it will not work because it needs the gateway here in the front this is what openc replaces and you can replace it as well later on we'll read our own data like that now that you've done this our next step is actually to go ahead and now go and put our metadata inside the ipfs2 so now we are back at pinata and the next thing that you want to do is upload your metadata folder i'm going to do the same process again this time we are going to upload the metadata folder so what you want to do is go one back and choose the json file make sure this is the correct json file the one that's now been updated with the new base uris let's go and say upload it's going to ask us if we want to upload this and we're going to say yes we also going to call this ipfs but this time i'm going to call it the json okay i'm going to say upload and it's going to do its thing now you're going to see going to see something magical here you can see that we have a new id and this cid is the one that you call your base cid your base url which we are going to upload to a contract just now but just take note if i click here on this file it's going to call a gateway and it's going to try and reference that c id and there's all our json files but what's cool now about it is that our smart contract will return this with a forward slash maybe two dot json like so and then once it does that you can see that there's all our metadata and this is now all sitting on ipfs as well as our image there's our image so we can see that our image is indeed there and remember what i told you we're going to use this gateway so i'm just going to replace this part now so i'm going to copy everything up from there to here and going to replace it over there and we should see our image okay there's our image and now all the details on ipfs so the next thing we need to do the only thing we have to do is deploy a smart contract set everything up and it should be there in order to do this last part we have to jump back to github just to go and grab a smart contract i'm gonna go and click on the repository section and go to the smart contract the solidity smart contract repo this repo has contracts which i'll populate on a regular basis but in particular it has the base nft smart contract that i want to use i'm going to go ahead and go and copy every line from the bottom to the top like so then what i need to do is jump over to remix if you've seen my previous videos remix is a great solidity compiler i'm going to paste everything here in the nft.soul smart contract so you go and create a new file call it nft.sol and then paste it i already had this here now that we have this we have all the necessary information that we need to go and complete our smart contract and deploy it if you want to test this on the test net of open c you can go ahead and connect your meta mask to the rinkeby test net we've explained this in previous videos so just go and watch them but once you have selected that on metamask you can use the injected web 3. this will put you on the rinkeby network network 4 and for those of you who had questions if you can do this on polygon yes you can deploy this on polygon as well just like that anyway we're going to select our contract here on the deploy section remember and we're going to say simple nft smart contract we can i'm just going to close that previous smart contract we can then open up this deploy section and enter in our constructor values i'm going to enter in the ipf s so i p if is underscore uh taste like so and i'm just gonna copy this value for that as well okay and this is our symbol so you will fill these in nicely but now we need our initial base how do we get that well if we go back to meta open c's metadata structure remember we have to have this structure so i'm going to copy everything up from there to there and i'm going to go back to my remix i'm going to paste it in there and now we need our cid of our metadata so jump over to pinata grab the json metadata one copy that go to remix let's go and paste and add a forward slash that forward slash is very important because in this case it has to kind of reference get the id and append it with dot json here in the base extension so that's all you need to do don't forget the forward slash once you are ready we can go and say transact so at this point you hold your breath and hope that this deploys fine i know that we by now we need to get a pop-up so there it is we're going to confirm it and it takes about 30 seconds to deploy on the rinkeby test network once this is deployed the smart contract will pop up here on remix but i want you to see something and i want you to keep something in mind that you need to remember before you exit remix please make sure that you click on this copy button over there copy everything in that file and go to a folder maybe this program or anywhere where you can save it save file new and paste in all that data that you have okay the reason for this that you need to do this and i'm just going to maybe save it as that the reason why you want this this is your constructor api and on a later stage if you go down here to the bottom when you verify a contract you need to give it all this data at the bottom up until the last trailing zero which is there so keep that in mind okay yours might be different but i just want you to do this so that you don't forget to deploy on the main network and then all of a sudden you don't know where to get that data from you can work around it in a certain way but this is the easiest and let's look here's our smart contract if we open it now we can see that because our smart contract said we wanted to mind 20 we can see that our smart contract supply is now 20. we can also see that if we go to the token uri now and we query number 2 we can see id2s json is going to be ipfs and then that forward slash but now there is a little bit of a problem because there's only one forward slash and i could swear we placed in two um we might have a problem over there which we're going to fix and i'm going to show you how to fix that too so let us go and fix that quickly let me try and fix that first of all and show you how to do that luckily in our smart contract we have a thing called set base uri which i'm going to try and do this again just make sure that we do have two forward slashes anyway let's go and paste our two forward slashes over there go to pinata go and copy our cid go back to remix go and paste it in there and add a forward slash remember the last forward slash say transact are we going to have to do a new transaction wait for it to update on the blockchain so we can track it and see how long this takes by going over here and it's still busy so once this is done i'm going to query it again and just to make sure that there's two forward slashes over there keep in mind that that's why smart contracts are so cool some of them can be updated it's all dependent on how they have been coded i'm going to try this again and run this token your eye i see the transaction went through successfully and when i do i can see indeed there's two forward slashes now we're ready to rock all right perfect but there's already 20 in there and this is what we get back so if we copy this now this won't work for us because we need that gateway but let's see if if we go to our test net so maybe we should go to open c this is the testnate.openc this will only work on test networks such as rinkaby and the other one but we can test out what we've done now on our smart contract so let me go to my profile and let's hope that our metadata and stuff's here okay so i am seeing the ipfs underscore test v3 um but i'm not seeing the the actual data in the previous test that i did which was this one the ipfs test 2 that worked perfectly because i didn't forget the forward slash um which was so stupid of me to do that now but anyway there's a work away around this basically all you need to do is when you have your nft you can obviously see it doesn't get the metadata properly because there's no properties you can simply go on refresh metadata once you click this refresh metadata button it tells openc that you want it to be refreshed right but instead of going and showing you guys now this and you being sad i just want to show you what what it would look like if you do it correctly all right so go ahead and go to remix we quickly going to do this whole process again but this time i'm going to go and copy this base url and i'm not going to let me just copy the whole thing i'm going to redeploy it and just to test if everything is fine so i'm going to actually let's redeploy it like this let's just add a forward slash let's go and transact so i'm going to do this again on the test network let's do this and this will probably be v4 now just make sure that you have those two forward slashes over there once this is busy being deployed i'm just going to talk to you about openc and the test network so this test network is there for you to test please don't go and upload a bunch of smart contracts on the main network first of all every time you upload one it appends it with the version and you never get the true kind of feel for your nfts right because it just it just doesn't doesn't work nicely but anyway uh i'm just blabbering about so let's go back to remix let's see there's our new smart contract let's go and open it up let's go and see here at the bottom 20 was minted successfully yes let's go and check number one's uri there it is perfect and i actually just want to run a test quickly by clicking on one of these and then i want to replace everything in my smart contract up until the gateway so i want to go and grab everything from here to my cid then i'm going to move back to the one that i clicked on which is there i'm going to replace that and just see if i can get it and indeed i do get that so i don't know what's up with openc this stuff should work so i'm going to refresh i'm going to refresh my openc and see what happens so there is the new collection you can see ipfs v4 and there's the other one and there we go guys i almost got a heart attack but anyway there we go it's loading it's busy loading yeah and this is v4 right and i wonder v3 will load now as well i think the one that we've refreshed might but um that's why it's crucial for you to get that right from the start because now as you can see now we have our metadata and it's all there okay how cool is that if we actually go and click on an i then we can go down to its properties and we can see there's all its properties as well so everything is working as intended please keep in mind that these trades do take some time to populate it takes about a half a day especially if you go into your collection these values also take about a day to populate keep in mind if you want royalties on your collection you can go in here and edit collection and then you can go and sign it and then once you've signed it you can upload some logo images feature images banners and down here at the bottom you can add your royalties that was also a question that a lot of people had guys i am ecstatic that this worked so nicely that is a super cool way of uploading to ipfs i hope this video was super useful to you guys and like i said if you have problems always refer to this website and go to our telegram community they'll help you out please don't forget to go and subscribe to this channel if you enjoyed this video and turn on the bell icon so that you can see future updates thank you so much and have a great evening

Channel: HashLips NFT

Views: 5,411

Rating: 4.9848485 out of 5

Keywords:

Id: 3jizwk6_m1s

Length: 34min 7sec (2047 seconds)

Published: Fri Sep 17 2021