Develop Reference

I have ipfs-core loaded on the client side, how can i update the url with the hash

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

input "submit" does not upload files when using onsubmit attribute

In this snippet onsubmit is used to display the image uploaded and to keep it visible return false; is used.
<form method="POST" enctype="multipart/form-data" onsubmit="display();return false;">
<input type="file" name="file" id="file">
<input type="submit" value="Upload">
</form>
JavaScript:
function display() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
// it's onload event and you forgot (parameters)
reader.onload = function(e) {
// the result image data
document.getElementById("img").src = e.target.result;
}
// you have to declare the file loading
reader.readAsDataURL(file);
}
When doing so, the image loads and is displayed but does not upload to the directory of uploads specified.
How can I upload the actual images and show the image without the need of page refresh?

Rather than changing the img after submission or manipulating a submit button I found that it's better to just use this:
<input type="file" name="file" id="file" onchange="preview_image(event)">
And then in js simply read it onchange
function preview_image(event) {
var reader = new FileReader();
reader.onload = function() {
document.getElementById('img').src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}

how to prevent input type file from accepting some inputs on change function

I'm working on a project and I need the user to upload only pdf files.
I'm trying to do this in the front-end so whenever the input detects a file type that is not a pdf should reject it. Everything seems correct. However, when I hover over the input it shows me that the wrong file is uploaded. So what should I do?
function changeName(elem) {
$("input[type='file']").
elem.on("change", function() {
var fileName = elem.val().split("\\").pop();
var fileExtension = elem.val().split(".").pop();
if (fileExtension === "pdf") {
elem.siblings(".Syllabus").text(fileName);
} else {
elem.siblings(".Syllabus").val('');
elem.siblings(".Syllabus").text('...');
alert('Only PDF files are accepted');
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="Syllabus fileReset">...</label>
<input type="file" accept="application/pdf" name="file1" onClick="changeName($(this));" required class="upload-button removable" />

This code works better than what you posted
$("input[type='file']").on("change", function(e) {
var elem = $(this);
elem.siblings(".Syllabus").text("...")
var fileName = elem.val().split("\\").pop();
var fileExtension = elem.val().split(".").pop();
if (fileExtension !== "pdf") {
elem.siblings(".Syllabus").text('Only PDF files are accepted')
elem.replaceWith(elem.val('').clone(true));
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="Syllabus fileReset">...</label>
<input type="file" accept="application/pdf" name="file1" required class="upload-button removable" />

Handling file parse and upload on form submit

I'm parsing an Excel file to an array in JavaScript and I have a simple form with a file upload and check boxes. I'm adapting the code from elsewhere and it runs perfectly as expected immediately on file upload, but I want it to handle the file on clicking submit, not on addEventListener for "change". How can I alter this JavaScript / jQuery so that it executes the handleFile in the same way it does now, but on the form submit click.
I tried multiple methods like
document.getElementById('submit').addEventListener("click", handleFile(oFileIn));
And encapsulating everything beneath setup in:
$('#submit').click(function(){
var oFileIn; ...
});
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.6/xlsx.full.min.js"></script>
</head>
<body>
<form id="formid" action="form.php" method="POST" enctype="multipart/form-data">
<label><input id="inputX1" type="checkbox" name="x1" value="x1">x1</label><br>
<label><input id="inputX2" type="checkbox" name="x2" value="x2">x2</label><br>
<label><input id="inputX3" type="checkbox" name="x3" value="x3">x3</label><br>
<label><input id="inputX4" type="checkbox" name="x4" value="x4">x4</label><br>
<input id="fileid" type="file" name="filename" />
<input id="submit" type="button" value="submit"/>
</form>
</body>
</html>
JavaScript:
$(document).ready(function() {
setup();
});
function setup() {
var oFileIn;
$(function() {
oFileIn = document.getElementById('fileid');
if(oFileIn.addEventListener) {
oFileIn.addEventListener('change', handleFile, false);
}
});
var rABS = true;
function handleFile(e) {
var files = e.target.files, f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
if(!rABS) data = new Uint8Array(data);
var workbook = XLSX.read(data, {type: rABS ? 'binary' : 'array'});
// DO STUFF WITH THE FILE HERE AND CHECK BOXES HERE

So if you want to just load the data on a button click all you really need to do is put a click listener on your button instead of a change event on your file input.
Your attempt was close but since we can use the ID of the file input, there is no need to pass anything into handleFile()
I also put in a check to make sure a file is actually there before we go ahead and read it.
Here's an example using jQuery for you
function setup() {
$("#submit").on("click", handleFile);
var rABS = true;
function handleFile() {
var files = $("#fileid").prop("files");
if(files.length === 0){
alert("Please select a file first");
return;
}
var f = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result;
//continue on with data
}
reader.readAsText(f);
}
}

ajax image upload with pre-preview

I am uploading image with ajax and showing image before uploading with jquery.
here is my html code
<form id="uploadimageS2" action="" method="post" enctype="multipart/form-data">
<div id="image_previewS2"><img id="previewingS2" src="img/noimage.png" /></div>
<div id="selectImageS2">
<label>Select Your Image</label><br/>
<input type="file" name="fileS2" id="fileS2" required />
<input type="submit" value="Upload" class="submit" />
</div>
</form>
then here is my jquery code
// Function to preview image
$("#fileS2").change(function() {
$("#messageS2").empty(); // To remove the previous error message
var file = this.files[0];
var imagefile = file.type;
var match= ["image/jpeg","image/png","image/jpg"];
if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2])))
{
$('#previewingS2').attr('src','img/noimage.png');
$("#messageS2").html("<p id='errormsg'>Please Select A valid Image File</p>"+"<h4>Note</h4>"+"<span id='error_message'>Only jpeg, jpg and png Images type allowed</span>");
return false;
}
else
{
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
function imageIsLoaded(e) {
$('#image_previewS2').css("display", "block");
$('#previewingS2').attr('src', e.target.result);
$('#previewingS2').attr('width', '250px');
$('#previewingS2').attr('height', '230px');
};
reader.readAsDataURL(this.files[0]);
var file = this.files[0];
here i want to add another element instead of "this". because i am uploading 3 images in one page and when using this script it is going wired.
i already tried
reader.readAsDataURL($(#uploadimageS2).files[0]);
reader.readAsDataURL($(#fileS2).files[0]);
and those didn't work.