I have various HTML elements defined in an XML file.
I cant be able to display my XML element as whole but it has multiple rows and each row consists of checkboxes, File upload option, etc.
I am using Javascript to get these elements and then using XMLHTTPRequest, sending these requests to the controller to process.
Imagine HTML elements be like below:
Row1 ---- Checkbox1_Row1 TextDescription_Row1 FileUpload_Row1
Row2 ---- Checkbox1_Row2 TextDescription_Row2 FileUpload_Row2
I can have how many ever rows as possible.
Using Javascript, I am getting all these form elements and these elements are differentiated by Row number (Row1, Row2).
I am looping through each form elements and then
for(var j=0; j< formelements.length; j+++)
{
if (formElements[j].type == "textbox")
{
Do something
}
elseif (formElements[j].type == "file")
{
var Base64String;
var ready = false;
var fileName = formElements[j].files[0].name;
var check = function () {
if (ready === true) {
array.push(Base64String);
return;
}
setTimeout(check, 1000);
}
check();
var reader = new FileReader();
reader.onloadend = function (evt) {
Base64String = evt.target.result;
ready = true;
};
reader.readAsDataURL(file);
}
}
I am using an array to push all the values corresponding to each row and the array with final value will be sent to the controller after some alterations. Here for file upload option, I am reading the file from each row and converting them into binary format and sending to the controller. This approach works fine, if there is only one row. What happens with this approach when there are multiple rows is, while looping through the form element, it check everything for the first row (say textbox) and puts into the array but when it is file type, it goes to the loop and reads the file. Reading the file takes sometime here and by the time loop goes to the next form element (which is nothing but Row2). Now Row2 form element comes into picture and say, we do not upload any file, it will be null. Now check() function gets completed and file from row1 is read completely. Since the loop is already in for Row 2 form element, this file value is getting assigned to Row2 apart from null values. So Row2 will have both null value and file value when it comes to file type but there is no value for Row1. Similarly if I have many files in multiple rows, the file value gets assigned to which ever row form element that is there in current loop based on the time read by FileReader.
I need to make sure that file value is read completely before moving on to the next form element. How to achieve this?
************************Updates**********************
The question which was referred here marking mine as duplicate has only file type coming in and hence, they can loop through the file type. For me, form elements consists of Checkbox1_Row1, TextDescription_Row1, FileUpload_Row1, Checkbox1_Row2 , TextDescription_Row2, FileUpload_Row2.
I have to make sure that FileUpload_Row1 has right value read from the file before moving on to to next form element, here Checkbox1_Row2.
evt should be event at evt.target.result. .push() event.target.result to fileList array, do stuff when fileList .length is equal to count
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var files = Array.prototype.map.call(
document.querySelectorAll("[id^=myFile]")
, function(input) {
return {id:input.dataset.id, file: input.files[0]};
});
var count = files.length; // total number of files
var fileList = []; // accepted files
for (var i = 0; i < count; i++) {
var file = files[i].file;
var id = files[i].id;
var filename = files[i].file.name;
if (i >= count) {
break;
}
var reader = new FileReader();
reader.onload = (function(id, filename) {
return function(event) {
fileList.push({id, filename, file:event.target.result}); {
if (fileList.length === count) {
// do stuff with `fileList`
console.log(fileList);
}
}
}
})(id, filename);
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="file" id="myFile_row1" data-id="A">
<input type="file" id="myFile_row2" data-id="B">
<input type="file" id="myFile_row3" data-id="C">
<button onclick="myFunction()">Try it</button>
</body>
</html>
plnkr http://plnkr.co/edit/VCGPPbWcock0PgC9wMWi?p=preview
Related
I have a text file which has 100+ email ids with various domains of my vendor and clients.
Example:
raj#xyz.com,John#gyx.com
I want to place a button which extracts and displays email id with xyz.com and another one which retuns gyx.com likewise. Without PHP I don't have a local server installed.
I have no idea where to start.
This is the code I currently use to read the text file.
<!DOCTYPE html>
<html>
<head>
<title>Read File (via User Input selection)</title>
<script type="text/javascript">
var reader;
function checkFileAPI() {
if (window.File && window.FileReader && window.FileList && window.Blob) {
reader = new FileReader();
return true;
} else {
alert('The File APIs are not fully supported by your browser. Fallback required.');
return false;
}
}
function readText(filePath) {
var output = ""; //placeholder for text output
if(filePath.files && filePath.files[0]) {
reader.onload = function (e) {
output = e.target.result;
displayContents(output);
};//end onload()
reader.readAsText(filePath.files[0]);
}//end if html5 filelist support
else if(ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
try {
reader = new ActiveXObject("Scripting.FileSystemObject");
var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
output = file.ReadAll(); //text contents of file
file.Close(); //close file "input stream"
displayContents(output);
} catch (e) {
if (e.number == -2146827859) {
alert('Unable to access local files due to browser security settings. ' +
'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
}
}
}
else { //this is where you could fallback to Java Applet, Flash or similar
return false;
}
return true;
}
/**
* display content using a basic HTML replacement
*/
function displayContents(txt) {
var el = document.getElementById('main');
el.innerHTML = txt; //display output in DOM
}
</script>
</head>
<body onload="checkFileAPI();">
<div id="container">
<input type="file" onchange='readText(this)' />
<br/>
<hr/>
<h3>Contents of the Text file:</h3>
<div id="main">
...
</div>
</div>
</body>
</html>
Here's the high level approach I would take:
Once the document has loaded up, using jQuery I would grab all of the data output.
var output = $('#main').val()
Then, I would write some logic to parse out the data from the output variable into two different sets (#xyz list and #gyx list). Also, I would format the output too so that it's ready to be called on. Now you have the two data sets that you need, and can call on them when you push your button.
Create an event with jQuery based on the button click state. Depending on the state, the method would select the appropriate list, and then display the output.
So rather than extracting the appropriate data on every button press, you can front load all of it in the initial page load. Since the data won't be changing until you refresh the page again, you should just use the button to switch between which list gets displayed.
It sounds like you want to search your email address list, displaying ids that match a domain or a domains matching an id. First I would take the advice given above and offload your file content into a variable.
This is easy given a comma separated list of email addresses, and here's a plnkr demonstrating the functionality you want (sans the file loading code etc.).
Here's a function to find matches in the address lists based on your criteria.
/**
#emails is a comma separated list of email addresses.
#term is the search term e.g. email id or domain.
#compareById if truthy the function returns email domains with
email id == #text otherwise the function returns email id's
with email domain == #text.
*/
function getEmailMatches(emails, term, compareById) {
let matches = [],
compareIndex = compareById ? 0 : 1,
valueIndex = compareById ? 1 : 0;
emails.split(",").forEach(function (email) {
let terms = email.split("#");
if (terms[compareIndex] == term)
matches.push(terms[valueIndex]);
});
return matches;
}
I have an issue with using iTextSharp and String manipulation/extract a substring that contains “[number]” and producing the PDF file. My previous question was posted here:
String manipulation & PDF output file
I am using this function to extract the substring that contains "[..]"
<script>
</script>
<script>
function extract() {
var str = "van4[15]";
return str.substring(0, str.lastIndexOf("["));
}
document.getElementById("demo").innerHTML = extract(); </script>
It is a: ASP.Net MVC webpage. The view has a grid with Location , RoomName.... and a checkbox for PDF printing. The records/data on the grid comes from SQL db. This Location field data contains for couple of records at the end "[number]". If the user select the checkbox for one record after clicking on "Print into PDF " button should produce the PDF file.
I am using string contents = System.IO.File.ReadAllText(HTMLFilePath) to read the file where Location, RoomName. It is part of this Html file.
The code behind Print button starts with:
public ActionResult ReportsPDF(PrintFormReportModel Obj) { string HTMLFilePath = Server.MapPath("~/Views/Reports/RoomSignReport.htm");
Where this file RoomSignReport.htm is the one that I am trying to modify by extracting the substring that contains[..] form the Location data ). The task is to extract the substring that contains [number] , the reason why I came up with idea of using the function extract(). Unfortunately using the <script> function extract(..</script> displays at the top of PDF file the content of <script> tag instead of displaying the result here : <p id="demo"></p>
I solve this task by myself. For anyone that might need help with this topic, I am adding the code snippet here:
if (ReportList.Count > 0)
{
PdfWriter writer = PdfWriter.GetInstance(Report, new FileStream(FullPath, FileMode.Create));
Report.Open();
try
{
if (ListRoomSign.Count > 0)
{
foreach (var ObjReportList in ReportList)
{
foreach (var ObjRoomSignList in ListRoomSign)
{
.....
string contents = System.IO.File.ReadAllText(HTMLFilePath);
//Remove square brackets value from room name
if (ObjReportList.Location.Contains("["))
{
ObjReportList.Location = ObjReportList.Location.ToString().Substring(0, ObjReportList.Location.ToString().LastIndexOf("["));
}
//
contents = contents.Replace("[RoomName]", ObjReportList.Location);
var parsedHtmlElements = HTMLWorker.ParseToList(new StringReader(contents), null);
foreach (var htmlElement in parsedHtmlElements)
{
Report.Add(htmlElement as IElement);
}
Report.NewPage();
}
}
}
Report.Close();
}
catch (Exception)
{
FullPath = string.Empty;
}
}
return FullPath;
I have made a drag and drop file upload. Now when a file is dropped in the drop zone it should fill the data of the dropped file into <input type="file">. How to do it ?
HTML
:
<div id='slct'>
Select file <input type="file" id="filename"
onchange="readURL(this);" /> <input type="button" value="Upload"
onclick="sendFile()" /><br> Or
</div>
<button id='uploadDrp'>Upload</button>
<div class="drop">
<div id="filedrag">drop file here</div>
<img src="#" id="prof">
</div>
JavaScript :
obj.on("dragover", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css("border", "1px solid #00aaff");
});
obj.on("drop", function(e) {
e.stopPropagation();
e.preventDefault();
$(this).css("border", "1px solid #00aaff");
$("#slct").hide();
$("#uploadDrp").fadeIn(500);
var dt = e.originalEvent.dataTransfer;
file01 = dt;
var files = dt.files;
if (dt.files.length > 0) {
if (dt.files && dt.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#prof').attr('src', e.target.result).width(200)
.height(200);
$('#prof').fadeIn();
};
reader.readAsDataURL(dt.files[0]);
}
}
});
History lession
It s like #adeneo said,
You can't set the value of a file input, due to security restrictions
But in some browser you can set the value to a empty string to clear the field.
In older (IE) browser you need to replace the DOM-node completely
However there is one way to change the input-file-value and that is with another instance of FileList
but you do not set the value, instead you set the input.files property: see jsfiddle demo here
I filled a bug report long ago to ask if we could get access to construct a new FileList
We had it globaly in window but there is no way we can use it...
var file1 = new File(['foo'], 'foo.txt')
var file2 = new File(['bar'], 'bar.txt')
new window.FileList([file1, file2]) // throws Illegal constructor
There response was that they are moving towards a normal array instead.
It s being descussed here to change it. But there is little to no progress in that field...
Solution
Unfortenly you can not change the value and sumbit the form, Instead you need to create a own FormData and post it using ajax
Then you can redirect to the target url...
// Make your own FormData
var fd = new FormData
// Add all drang'n'drop files
for (let file of dt.files)
fd.append('files', file)
// Add all input files
for (let file of input.files)
fd.append('files', file)
// upload it using xhr or the new fetch api
fetch(targetUrl, {method: 'post', body: fd}).then(redirect)
Code review
if (dt.files.length > 0) {
// it's unnecessary to have two if statement that checks the same thing
if (dt.files && dt.files[0]) {
// Using FileReader is unnecessary and also worse
// see this performance test: https://jsfiddle.net/fdzmd4mg/1
var reader = new FileReader();
reader.onload = function(e) {
$('#prof').attr('src', e.target.result).width(200).height(200);
$('#prof').fadeIn();
};
reader.readAsDataURL(dt.files[0]);
}
}
What i think you should do instead is something like this
if (dt.files && dt.files[0]) {
// store the file list somehere to upload them later
// window.files = Array.from(dt.files)
// window.files = [dt.files[0]]
let url = URL.createObjectURL(dt.files[0])
$('#prof').attr('src', url).width(200).height(200);
$('#prof').fadeIn();
}
I have the following code for multiple file input
<form action="" enctype = "multipart/form-data" method="post" name="login">
<input type = "file" name = "photo[]" id = "files" multiple onchange = "handleFileSelect(this.files)"/><br/>
<div id="selectedFiles"></div>
<input type="submit" value="Sign In">
</form>
The javascript equivalent function is.
selDiv = document.querySelector("#selectedFiles");
function handleFileSelect(e) {
if(!this.files) return;
selDiv.innerHTML = "";
var files = e;
for(var i=0; i<files.length; i++) {
var f = files[i];
selDiv.innerHTML += f.name + "<br/>";
}
}
What I am getting is upon uploading the second file. The FileList gets overwritten and instead of having 2 files, second file is present in the FileList. Here FileList is passed by this.files.
Also upon passing to the server only second image is passed. I have googled throughly but could not find answer. I would appreciate if anyone could help.
...multiple file input ... The FileList gets overwritten...
Actually that's how the HTML file input with the multiple attribute works—the user must select all the files they want to upload at once, using shift or control click. If the user operates the same file input upload process a second time anything selected prior is discarded and only the most recent selections remain in the FileList.
But isn't there any way for the user upload file multiple times.
To let your site users use an HTML file input element multiple times and keep all the previous selections, you'll need to write to hidden form elements the file (base64 data) received each time the file element is used.
For example:
<form action="process.php" method="post" name="uploadform" enctype="multipart/form-data">
// other form elements if needed
<input type="submit">
</form>
<!-- outside the form, you don't want to upload this one -->
<input type="file" id="upfiles" name="upfiles">
<script>
document.getElementById('upfiles').addEventListener('change', handle_files, false);
function handle_files(evt) {
var ff = document.forms['uploadform'];
var files = evt.target.files;
for ( var i = 0, file; file = files[i]; i++ ) {
var reader = new FileReader();
reader.onload = (function(file) {
return function (ufile) {
var upp = document.createElement('input');
upp['type'] = 'hidden';
upp['name'] = +new Date + '_upfile_' + file.name.replace(/(\[|\]|&|~|!|\(|\)|#|\|\/)/ig, '');
upp.value = ufile.target.result;
ff.appendChild(upp);
}
}(file));
reader.readAsDataURL(file);
}
}
</script>
Next, you need to write a script to run on the server to process the hidden base64 fields. If using PHP you can:
<?php
$path = 'path/to/file/directory/';
// this is either:
// - the absolute path, which is from server root
// to the files directory, or
// - the relative path, which is from the directory
// the PHP script is in to the files directory
foreach ( $_POST as $key => $value ) { // loop over posted form vars
if ( strpos($key, '_upfile_') ) { // find the file upload vars
$value = str_replace(' ', '+', $value); // url encode
file_put_contents($path.$key, base64_decode($value));
// convert data to file in files directory with upload name ($key)
}
}
?>
I ran into the same problem. Thanks for the question and answer. I managed to add several files by adding to the DOM input type file and delegating the click to the detached element :
<form method="POST" enctype="multipart/form-data" action="/echo/html">
<button class="add">
Add File
</button>
<ul class="list">
</ul>
<button>
Send Form
</button>
</form>
With the javascript :
$('form button.add').click(function(e) {
e.preventDefault();
var nb_attachments = $('form input').length;
var $input = $('<input type="file" name=attachment-' + nb_attachments + '>');
$input.on('change', function(evt) {
var f = evt.target.files[0];
$('form').append($(this));
$('ul.list').append('<li class="item">'+f.name+'('+f.size+')</li>');
});
$input.hide();
$input.trigger('click');
});
It is working with Edge, Chrome 50 and firefox 45, but I don't know the compatibility with older versions or other browsers.
See the this fiddle.
I want to list selected file from file input.
<div class="fileUpload myButton">
<span>Upload</span>
<input type="file" name="imageURL[]" id="imageURL" multiple="" class="file" />
</div>
<div id="file-list">
</div>
I have this code
(function () {
var filesUpload = document.getElementById("imageURL"),z
fileList = document.getElementById("file-list");
function uploadFile (file) {
var li = document.createElement("li"),
div = document.createElement("div"),
reader,
xhr,
fileInfo;
li.appendChild(div);
// Present file info and append it to the list of files
fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
div.innerHTML = fileInfo;
fileList.appendChild(div);
}
function traverseFiles (files) {
if (typeof files !== "undefined") {
for (var i=0, l=files.length; i<l; i++) {
uploadFile(files[i]);
}
}
else {
fileList.innerHTML = "<div class=\"neutral\">Your browser does not support Multiple File Upload, but you can still upload your file. We recommend you to upload to a more modern browser, like Google Chrome for example.<div>";
}
}
filesUpload.addEventListener("change", function () {
traverseFiles(this.files);
}, false);
})();
But the problem is when the user selects another files it is added to the list but the old files is not uploaded when the form is submitted.
Simplified: when the user selects file1.pdf and file2.pdf
The list shows file1.pdf and file2.pdf
When he selects again another files file3.pdf and file4.pdf
the list shows file1.pdf , file2.pdf, file3.pdf and file4.pdf
But when he submit the form only file3.pdf and file4.pdf is uploaded
My question is how to remove the files which will not be uploaded from the list.
OR a way to upload all the files in the list.
Thanks in advance.
What is happening is that the input is emptied when selecting more files, hence not uploading the previously displayed files.
SOLUTION 1: To combat this you could create a new input in the change event handler, although this could get quite messy.
You would have to get all files from all the inputs on upload. You have not shown your actual upload code, so I cannot give an example in context:
filesUpload.on("change", function () {
traverseFiles(this.files); //Add initial files to list
create_new_input();
}
function create_new_input() {
var new_input = $('<input type="file" />'); //create file selector
new_input.on("change", function() {traverseFiles($(this).get(0).files);}); //
$('body').append(new_input); //Add this input to your page
}, false);
You will have to add all files that you receive in the traverseFilesto the xhr. This example uses jQuery, and I would recommend that you use it all the time!
SOLUTION 2:
Other wise you can empty the file list box on input changed:
filesUpload.addEventListener("change", function () {
document.getElementById('file-list').innerHTML = "";
traverseFiles(this.files);
}, false);
Good luck!
Your Problem is that you manipulate the value of input multiple times. The second time someone selects a file using the html file input, the originally selected files are "overwritten" from the inputs value attribute.
You could hook into your forms submit and add the files you already stored in your html.
Another way to do it would be to work with several file input elements.
So every time someone selects files and you add them to your html, hide the old file input and add a new one like this ...
adjust your html code like this:
<div class="fileUpload myButton">
<span>Upload</span>
<input type="file" class="imageUrlInput" name="imageURL[0]" id="imageURL" multiple="" class="file" />
</div>
<div id="file-list">
</div>
Adjust your Javascript like this:
function uploadFile (file) {
var li = document.createElement("li"),
div = document.createElement("div"),
reader,
xhr,
fileInfo;
li.appendChild(div);
// now here we receive the HTML input element for the files.
var currentInput = $('#imageURL');
var imageUrlInputsCount = $('.imageUrlInput').length;
// now we change the 'id' attribute of said element because id's should be unique right?
currentInput.attr('id','imageUrl_'+imageUrlInputsCount);
// now, we append a new input element with an incremented array key defined by the length of already existing input elements
currentInput.append('<input type="file" name="imageURL['+imageUrlInputsCount+']" id="imageURL" multiple="" class="file" />');
// and finally we hide the old element
currentInput.hide();
// Present file info and append it to the list of files
fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
div.innerHTML = fileInfo;
fileList.appendChild(div);
}
Now make sure that in your retrieving server code (php/jsp/asp,node.js or whatever you are using) you change checking for imageURL, you iterate over imageURL since now you have several sets of imageURLs. i.e. your imageURL parameter could look like this:
imageURL = array (
0 => array(
'foo1.pdf',
'foo2.pdf',
'foo3.pdf',
),
1 => array(
'foo4.pdf',
'foo5.pdf',
'foo6.pdf',
)
3 => array(
'foo7.pdf',
'foo8.pdf',
'foo9.pdf',
)
)