Thank you for your response.
I see the part of edit, but I think that’s not related to CORS policy issues…
I’m sorry to make you to misunderstand.
The code that I shared is the part of my code. so that didn’t work itself and I think you probably that might be the problem.
This is the full code of me
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- loading the minified version -->
<script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
<script src="https://unpkg.com/ipfs-http-client/dist/index.min.js"></script>
<script src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js" integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/9.0.0/bignumber.js" integrity="sha256-TYZ2kR74G+TqMIiLuKpB57VUTNKhGFknyOKgRYqxhnw=" crossorigin="anonymous"></script>
</head>
<body>
<h1 id="title">IPFS Client TEST (Infura)</h1>
<select id="ipfs_client">
<option value="infura" selected="selected">infura</option>
<option value="private_gateway">private gateway</option>
</select>
<div id="" style="margin-top:40px">
<h2>file upload</h2>
<input type="file" id="file" onchange="loadFile(event)" />
<input type="button" value="upload" id="send_ipfs" onclick="javascript:sendIpfs();" />
<a id="file_url"></a>
</div>
<div id="" style="margin-top:40px">
<h2> file download </h2>
<input type="text" id="downloadHash" placeholder="download hash" onchange="" />
<input type="button" value="get" id="get_ipfs" onclick="javascript:getIpfs();" />
<a id="linkToDownload" href="" download=""></a>
</div>
<div style="margin-top:80px">
<h1>IPFS Node TEST (js-ipfs Node)</h1>
<div id="" style="margin-top:40px">
<h2>upload(browser Node) </h2>
<input type="file" id="fileBrowserNode" onchange="loadFileForBrowserNode(event)" />
<input type="button" value="upload" id="send_ipfs_to_browser_node" onclick="javascript:sendIpfsToBrowserNode()" />
<a id="file_url"></a>
</div>
<div id="" style="margin-top:40px">
<h2> download(browser Node) </h2>
<input type="text" id="downloadHashBrowserNode" placeholder="download hash" onchange="" />
<input type="button" value="get" id="get_ipfs_from_browser_node" onclick="javascript:getIpfsFromBrowserNode()" />
<a id="linkToDownloadBrowserNode" href="" download=""></a>
</div>
<div id="" style="margin-top:40px">
<h2> stat bandwidth </h2>
TotalIn:<span id="bwTotalIn"></span><br>
TotalOut:<span id="bwTotalOut"></span><br>
RateIn:<span id="bwRateIn"></span><br>
RateOut:<span id="bwRateOut"></span><br>
</div>
</div>
</body>
<script>
var downloadedfiles
var onloadfile
var buf;
async function getBandWidth() {
bw = await node.stats.bw()
$('#bwTotalIn').html(formatSizeUnits(bw.totalIn.toString().slice(0, 5)));
$('#bwTotalOut').html(formatSizeUnits(bw.totalOut.toString().slice(0, 5)));
$('#bwRateIn').html(formatSizeUnits(bw.rateIn.toString().slice(0, 5)) + '/s');
$('#bwRateOut').html(formatSizeUnits(bw.rateOut.toString().slice(0, 5)) + '/s');
}
var ipfs = window.IpfsHttpClient({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https'
});
chooseClient = function() {
var selectedClient = $('#ipfs_client').val();
console.log(selectedClient);
if (selectedClient == 'infura') {
ipfs = window.IpfsHttpClient({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https'
});
$('#title').html('IPFS Client TEST (Infura)');
} else if (selectedClient == 'private_gateway') {
ipfs = window.IpfsHttpClient({
host: 'devipfs.nemodax.com',
port: 5001,
protocol: 'https'
})
$('#title').html('IPFS Client TEST (devipfs Private Gateway)');
}
}
$('#ipfs_client').on('change', chooseClient);
$('#ipfs_client').on('click', chooseClient);
const node = new Ipfs({
repo: 'ipfs-' + Math.random(),
config: {
Addresses: {
Swarm: [
'/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star'
]
}
}
})
node.on('ready', function() {
console.log('node is ready')
setInterval(getBandWidth, 3000);
})
const reader = new FileReader();
var loadFile = function(event) {
console.log('upload::');
const reader = new FileReader();
reader.onload = function() {
console.log('onload::');
onloadfile = reader
buf = Ipfs.Buffer(reader.result); // Convert data into buffer
};
const file = document.getElementById("file");
reader.readAsArrayBuffer(file.files[0]); // Read Provided File
};
var loadFileForBrowserNode = function(event) {
console.log('upload::');
const reader = new FileReader();
reader.onload = function() {
console.log('onload::');
onloadfile = reader
buf = Ipfs.Buffer(reader.result); // Convert data into buffer
};
const file = document.getElementById("fileBrowserNode");
reader.readAsArrayBuffer(file.files[0]); // Read Provided File
};
async function sendIpfs() {
var start = new Date();
console.log("start time: ", start)
// ipfs.add([
// {
// path: `my_ipfs_hash/image`,
// content: fs.createReadStream(`./config/data/ipfs_data/my_ipfs_hash/low_res.gif`),
// },
// {
// path: `my_ipfs_hash/description`,
// content: fs.createReadStream(`./config/data/ipfs_data/my_ipfs_hash/data`),
// }
// ], {recursive: false}
//const results = await ipfs.add(buf);
const results = await ipfs.add([{
path: 'videotest',
content: buf,
}], {
recursive: true
})
console.log(results);
var end = new Date();
console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')
const hash = results[0].hash;
console.log(hash);
}
$('#send_ipfs').parent().append('<button id="pin" value="pin">pin</button>')
$('#pin').on('click', function() {
node.pin.ls(hash, function(err, pinset) {
if (err) {
throw err
}
console.log(pinset)
})
ipfs.pin.add(hash, function(err) {
console.log("pin error");
})
})
async function getIpfs() {
const validCID = document.getElementById('downloadHash').value
ipfsUrl = "https://ipfs.io/ipfs/" + validCID;
// $('#get_ipfs').parent().append('<br> <a id="downloadLink" href="' + ipfsUrl + '" download>'+ ipfsUrl+' </a>');
$('#get_ipfs').parent().append("<br> <span> it's been downloading, please wait... </span>");
var start = new Date();
console.log("start time: ", start)
ipfs.get(validCID, function(err, files) {
if (err) {
console.log(err);
$('#get_ipfs').parent().append("<span> fail! </span>");
}
downloadedfiles = files;
files.forEach((file) => {
console.log(file.path)
console.log(file.content.toString('utf8'))
var blob = new Blob(
[file.content], {
type: 'video/mp4'
}
);
var blobUrl = URL.createObjectURL(blob);
// var linkToDownload = document.getElementById('linkToDownload');
//
// linkToDownload.setAttribute('href', blobUrl);
// linkToDownload.innerHTML = '다운받기';
// linkToDownload.download = "test.mp4"
$('#get_ipfs').parent().append("<a>다운받기</a>");
$('#get_ipfs ~ a:last')[0].setAttribute('href', blobUrl);
$('#get_ipfs ~ a:last')[0].innerHTML = '다운받기';
$('#get_ipfs ~ a:last')[0].download = fileMetaInfo[0].name;
var end = new Date();
console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')
})
})
}
async function sendIpfsToBrowserNode() {
var start = new Date();
console.log("start time: ", start)
const results = await node.add([{
path: $("#fileBrowserNode").val().split("\\")[2],
content: buf,
}], {
recursive: true,
wrapWithDirectory: true
})
console.log(results);
var end = new Date();
console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')
const hash = results[1].hash;
console.log(hash);
}
async function getIpfsFromBrowserNode() {
const validCID = document.getElementById('downloadHashBrowserNode').value
ipfsUrl = "https://ipfs.io/ipfs/" + validCID;
$('#get_ipfs_from_browser_node').parent().append("<br> <span> it's been downloading, please wait... </span>");
var start = new Date();
console.log("start time: ", start)
fileMetaInfo = await node.ls(validCID);
node.get(fileMetaInfo[0].hash, function(err, files) {
if (err) {
console.log(err);
$('#get_ipfs_from_browser_node').parent().append("<span> fail! </span>");
}
downloadedfiles = files;
files.forEach((file) => {
console.log("file name: ", fileMetaInfo[0].name)
console.log("file path: ", fileMetaInfo[0].path)
// console.log(file.content.toString('utf8'))
var type;
var extension = fileMetaInfo[0].name.split('.')[1];
if (extension != null || extension != 'undefined' || extension != '') {
if (extension == "mp4") {
type = 'video/mp4'
} else if (extension == "png" ||
extension == "jpg" ||
extension == "jpeg") {
type = 'image/' + extension;
} else if (extension == "txt") {
type = 'text/' + extension;
} else {
type = 'file/' + extension;
}
}
var blob = new Blob(
[file.content], {
type: type
}
);
var blobUrl = URL.createObjectURL(blob);
//var linkToDownload = document.getElementById('linkToDownloadBrowserNode');
$('#get_ipfs_from_browser_node').parent().append("<a>다운받기</a>");
$('#get_ipfs_from_browser_node ~ a:last')[0].setAttribute('href', blobUrl);
$('#get_ipfs_from_browser_node ~ a:last')[0].innerHTML = '다운받기';
//linkToDownload.download = "test.mp4"
$('#get_ipfs_from_browser_node ~ a:last')[0].download = fileMetaInfo[0].name;
var end = new Date();
console.log('interval: ', (end - start) / 1000, 'size:', fileMetaInfo[0].size / 1000, 'kb')
})
})
}
function formatSizeUnits(bytes) {
if (bytes >= 1073741824) {
bytes = (bytes / 1073741824).toFixed(2) + " GB";
} else if (bytes >= 1048576) {
bytes = (bytes / 1048576).toFixed(2) + " MB";
} else if (bytes >= 1024) {
bytes = (bytes / 1024).toFixed(2) + " KB";
} else if (bytes > 1) {
bytes = bytes + " bytes";
} else if (bytes == 1) {
bytes = bytes + " byte";
} else {
bytes = "0 bytes";
}
return bytes;
}
</script>
</html>
378,1 Bot
To return, CORS policy problem is not fixed yet. sometimes it was occurred yet.
