How to upload one more file in same hash of IPFS - file-upload

Question

I have created a website to upload a single image on IPFS and generate hash for it .
Now I want to upload a folder of 2 or more images, I did with pinata but I want to upload it through my website
THIS IS HTML (APP.TSX)
<form onSubmit={onSubmit}>
<input type="file" multiple webkitdirectory mozdirectory />
<input type="submit" className="button-62" />
</form>
THIS IS ON-SUBMIT FUNCTION
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const form = e.target as HTMLFormElement;
const files = (form[0] as HTMLInputElement).files;
if (!files || files.length === 0) {
return alert("No file selected");
}
const filesAsArray = Array.from(files);
if (filesAsArray[0].webkitRelativePath === "") {
// files or bunch of files
filesAsArray.forEach(async (file: any, index: number) => {
const result = await (ipfs as IPFSHTTPClient).add(file);
console.log("results-cid : ", result.cid);
console.log("results-path : ", result.path);
console.log(`full-url : https://ipfs.io/ipfs/${result.path}`);
setUploadedFile([
...uploadedFile,
{
cid: result.cid,
path: result.path,
},
]);
});
} else {
filesAsArray.forEach(async (file: any, index: number) => {
console.log("file", file);
const result = await (ipfs as IPFSHTTPClient).add(
{
path: `images/${file.name}`,
content: file,
}
);
console.log("result", result);
console.log("results-cid : ", result.cid);
console.log("results-path : ", result.path);
});
}
};
THIS IS OUTPUT IN CONSOLE
folder
App.tsx:64 file File {name: '1.jpg', lastModified: 1649998567608, lastModifiedDate: Fri Apr 15 2022 10:26:07 GMT+0530 (India Standard Time), webkitRelativePath: 'images/1.jpg', size: 102265, …}
App.tsx:63 folder
App.tsx:64 file File {name: '2.jpg', lastModified: 1651732741324, lastModifiedDate: Thu May 05 2022 12:09:01 GMT+0530 (India Standard Time), webkitRelativePath: 'images/2.jpg', size: 19522, …}
App.tsx:71 result {path: 'images', cid: CID, size: 102332}
App.tsx:72 results-cid : CID {code: 112, version: 0, multihash: Digest, bytes: Uint8Array(34), byteOffset: 0, …}
App.tsx:73 results-path : images
App.tsx:71 result {path: 'images', cid: CID, size: 19589}
App.tsx:72 results-cid : CID {code: 112, version: 0, multihash: Digest, bytes: Uint8Array(34), byteOffset: 0, …}
App.tsx:73 results-path : images
Basically, it is generating two hashes (node/directory) and storing both in images in these two different directories. I want to store both the images in same directory:
HASH 1 QmSK11ykHorPMxkwXQvj61Y2UoWxvJG7UdVhH8zTUmJ1hZ
HASH 2 QmWCjf19j3zZXAgjkRW1W2c5kECXEpWWYmSoUHq6XVw6t9

Answer 1

If you are using IPFS JavaScript client, you might as well try the Mutable File System API, basically allowing you think of IPFS as a file system (Note that file.path was just to demonstrate that you put a path there):
await ipfs.files.mkdir('/path/to/imageDir')
files.forEach(async (file) => {
await ipfs.files.cp(file.path, `/path/to/imageDir/${file.name}`)
})
const { cid, type } = await ipfs.files.stat('/path/to/imageDir')
Check out the doc for more info.
Alternatively, you can try web3.storage directory wrapping API which gives you a nice abstraction over IPFS.