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

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

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]);
}

Related

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

Load and preview images in many inputs

I have form with 4 inputs to load a images and preview them. The script below work but only for first input
<input type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="previewFile(event);" value="img/<?echo $row['zdjecie'];?>" style='display: none;'/>
function previewFile() {
const preview = document.getElementById('img-new-1');
const file = document.getElementById('images-upload-1').files[0];
const reader = new FileReader();
reader.addEventListener("load", function ()
{
// convert image file to base64 string
preview.src = reader.result;
}, false);
if (file)
{
reader.readAsDataURL(file);
}
};
any suggestion?

I changed your code around:
I added a data-img to each file input so that it would be tied to an img by it's id. Then I updated the preview function to use the event passed e to use the input that was changed and not referring directly to a single ID.
function previewFile(e) {
const preview = document.querySelector(e.target.dataset.img);
const file = e.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", function ()
{
// convert image file to base64 string
preview.src = reader.result;
}, false);
if (file)
{
reader.readAsDataURL(file);
}
};
<input data-img="#img-new-1" type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="previewFile(event);" value="img/"/>
<input data-img="#img-new-2" type="file" id="images-upload-input-2" accept=".png, .jpg, .jpeg" name="image_2" onchange="previewFile(event);" value="img/"/>
<img id="img-new-1">
<img id="img-new-2">

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.

Acces a file in a file upload input [duplicate]

I actually have a file input and I would like to retrieve the Base64 data of the file.
I tried:
$('input#myInput')[0].files[0]
to retrieve the data. But it only provides the name, the length, the content type but not the data itself.
I actually need these data to send them to Amazon S3
I already test the API and when I send the data through html form with encode type "multipart/form-data" it works.
I use this plugin : http://jasny.github.com/bootstrap/javascript.html#fileupload
And this plugins gives me a preview of the picture and I retrieve data in the src attribute of the image preview. But when I send these data to S3 it does not work. I maybe need to encode the data like "multipart/form-data" but I don't know why.
Is there a way to retrieve these data without using an html form?

input file element:
<input type="file" id="fileinput" />
get file :
var myFile = $('#fileinput').prop('files');

You can try the FileReader API. Do something like this:
<!DOCTYPE html>
<html>
<head>
<script>
function handleFileSelect()
{
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
var input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
var file = input.files[0];
var fr = new FileReader();
fr.onload = receivedText;
//fr.readAsText(file);
//fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
fr.readAsDataURL(file);
}
}
function receivedText() {
document.getElementById('editor').appendChild(document.createTextNode(fr.result));
}
</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
<div id="editor"></div>
</body>
</html>

I created a form data object and appended the file:
var form = new FormData();
form.append("video", $("#fileInput")[0].files[0]);
and i got:
------WebKitFormBoundaryNczYRonipfsmaBOK
Content-Disposition: form-data; name="video"; filename="Wildlife.wmv"
Content-Type: video/x-ms-wmv
in the headers sent. I can confirm this works because my file was sent and stored in a folder on my server. If you don't know how to use the FormData object there is some documentation online, but not much. Form Data Object Explination by Mozilla

Html:
<input type="file" name="input-file" id="input-file">
jQuery:
var fileToUpload = $('#input-file').prop('files')[0];
We want to get first element only, because prop('files') returns array.

input element, of type file
<input id="fileInput" type="file" />
On your input change use the FileReader object and read your input file property:
$('#fileInput').on('change', function () {
var fileReader = new FileReader();
fileReader.onload = function () {
var data = fileReader.result; // data <-- in this var you have the file data in Base64 format
};
fileReader.readAsDataURL($('#fileInput').prop('files')[0]);
});
FileReader will load your file and in fileReader.result you have the file data in Base64 format (also the file content-type (MIME), text/plain, image/jpg, etc)

FileReader API with jQuery, simple example.
( function ( $ ) {
// Add click event handler to button
$( '#load-file' ).click( function () {
if ( ! window.FileReader ) {
return alert( 'FileReader API is not supported by your browser.' );
}
var $i = $( '#file' ), // Put file input ID here
input = $i[0]; // Getting the element from jQuery
if ( input.files && input.files[0] ) {
file = input.files[0]; // The file
fr = new FileReader(); // FileReader instance
fr.onload = function () {
// Do stuff on onload, use fr.result for contents of file
$( '#file-content' ).append( $( '<div/>' ).html( fr.result ) )
};
//fr.readAsText( file );
fr.readAsDataURL( file );
} else {
// Handle errors here
alert( "File not selected or browser incompatible." )
}
} );
} )( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" />
<input type='button' id='load-file' value='Load'>
<div id="file-content"></div>
To read as text... uncomment //fr.readAsText(file); line and comment fr.readAsDataURL(file);

Get file using jquery
element html:
<input id="fileInput" type="file" />
jquery code:
$("#fileInput")[0].files[0]
this work for me :)

HTML
<div class="row form-group my-2">
<div class="col-12">
<div class="">
<div class="text-center">
<label for="inpImage" class="m-2 pointer">
<img src="src/img/no-image.jpg" id="img-visor" height="120" class="rounded mx-auto d-block">
</label>
<input type="file" class="visually-hidden" accept="image/*" name="picture" id="inpImage">
</div>
</div>
</div>
</div>
jQuery
$('#inpImage').change(()=>{
const file = $('#inpImage').prop("files")[0];
const imagen = URL.createObjectURL(file);
console.log(URL.createObjectURL(file));
$('#img-visor').attr('src', imagen);
});

<script src="~/fileupload/fileinput.min.js"></script>
<link href="~/fileupload/fileinput.min.css" rel="stylesheet" />
Download above files named fileinput add the path i your index page.
<div class="col-sm-9 col-lg-5" style="margin: 0 0 0 8px;">
<input id="uploadFile1" name="file" type="file" class="file-loading"
`enter code here`accept=".pdf" multiple>
</div>
<script>
$("#uploadFile1").fileinput({
autoReplace: true,
maxFileCount: 5
});
</script>

<!DOCTYPE html>
<html>
<head>
<script>
function handleFileSelect()
{
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('The File APIs are not fully supported in this browser.');
return;
}
var input = document.getElementById('fileinput');
if (!input) {
alert("Um, couldn't find the fileinput element.");
}
else if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
}
else {
var file = input.files[0];
var fr = new FileReader();
fr.onload = receivedText;
//fr.readAsText(file);
//fr.readAsBinaryString(file); //as bit work with base64 for example upload to server
fr.readAsDataURL(file);
}
}
function receivedText() {
document.getElementById('editor').appendChild(document.createTextNode(fr.result));
}
</script>
</head>
<body>
<input type="file" id="fileinput"/>
<input type='button' id='btnLoad' value='Load' onclick='handleFileSelect();' />
<div id="editor"></div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

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

Related

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

Load and preview images in many inputs

Handling file parse and upload on form submit

ajax image upload with pre-preview

Acces a file in a file upload input [duplicate]

Categories

Resources