Input type file

jonas.t...@gmail.com

unread,

Aug 14, 2017, 7:11:00 PM8/14/17

to

Input type file create a button saying Choose file No file chosen

Is it possible that somehow change layout of button and text?

I can see it probably not allowed, but i try to make menus, so basicly i would like have a ".button CSS "LOAD"" that open the filemenu dialog and when file selected the id set and also open the file?

I already done the button and if i use the choose file it will open the file, but i want to get rid off the "button?" choose file no file chosen. So can i somehow get the file dialog to open without the button chose file?

MENU work
_____________
| Chose file |No file chosen .......Can i get rid of this ?
______________
LOAD work
SAVE work

jonas.t...@gmail.com

unread,

Aug 14, 2017, 7:42:25 PM8/14/17

to

I tried a new approach i found using label,

<label class="custom-file-upload">
<input type="file" id="fileToLoad" onClick="loadFileAsText()/>
</label>

I just fiddling, it will open the filemanager and i guess i get the correct fileid, but of course no file loaded because of course loadFileAsText executed immediately. So it there a way to do this get loadfileastext exectued **after** you chosed file automatically?

jonas.t...@gmail.com

unread,

Aug 15, 2017, 4:36:02 AM8/15/17

to

I did find something that may actually work but i am not quite sure howto put it together?

input.onchange = function(e) {
..
};

jonas.t...@gmail.com

unread,

Aug 15, 2017, 4:50:47 AM8/15/17

to

Sometimes i astonish myself i did it.

jonas.t...@gmail.com

unread,

Aug 15, 2017, 6:07:56 AM8/15/17

to

Well i also would like to get rid of using the input field when i save, and instead open a savedialog when i push save in menu, and that the dialog call saveTextAsFile() when i push is that possible?

<button onclick="saveTextAsFile()" class="button">Save File</button><input id="inputFileNameToSaveAs"></input><br>

I do have looked around abit and although many claim to do open the filesave dialog not a single do. They simply download and save a filename?

I just need an example of howto open the filesave dialog, is that even possible? I already do have a working save but to be frank an input field in the menu really do not look nice at all. I would prefer do it like the load.

Julio Di Egidio

unread,

Aug 15, 2017, 6:43:29 AM8/15/17

to

On Tuesday, August 15, 2017 at 12:07:56 PM UTC+2, jonas.t...@gmail.com
<snipped>

> Well i also would like to get rid of using the input field when i save,

You can do whatever you like e.g. in that onchange handler. It's event-
driven programming...

> <button onclick="saveTextAsFile()" class="button">Save File</button><input id="inputFileNameToSaveAs"></input><br>
>
> I do have looked around abit and although many claim to do open the
> filesave dialog not a single do. They simply download and save a filename?

That's the standard way to save a file locally to the client: you still
have to post the file to the server to begin with (can be an ajax call).
Nowadays there is also so called web storage in HTML5, which lets you store
data on the client: not uniformly nor very well supported across browsers,
but there are some libraries out there that build and abstract (e.g. for a
file system api) on what is available, though some serious technical
limitations remain, e.g. in most cases persistence of data is not fully
guaranteed.

> I already do have a working save but to be frank an input field in the
> menu really do not look nice at all. I would prefer do it like the load.

A list is not a menu: IMO, you should also work on the precision of your
technical descriptions...

HTH,

Julio

jonas.t...@gmail.com

unread,

Aug 15, 2017, 6:43:29 AM8/15/17

to

This works but i do not like the input field in menu, if i just knew howto upon a savedialog i am pretty sure i would solve it. But i can't find examples where the savedialogs open, just like a href exec examples. But i wan't windows filedialog to open on click of "text,link, button, whatever" to write or set the id? before i call the save function.
Is that possible?

<html>
<head>
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-Equiv="content-type" content="text/html; charset=UTF-8">
<link REL="StyleSheet" TYPE="text/css" HREF="drop.css">
<script type="text/javascript" src="loadsave.js"></script>
<script type="text/javascript" src="CSS.js"></script>
</head>
<body>

<div class="dropdown">
<table border="1" bgcolor="white" ><tr>
<td>
<button onClick="GD()" class="dropbtn"><B>___File___</button>
</td>
</tr></table>
<div id="DATA" class="dropdown-content">
<table border="1" bgcolor="white" align=center>
<tr><td bgcolor=white>
<label class="custom-file-upload">
<input type="file"/ id="fileToLoad" onchange="loadFileAsText()">
Load File
</label>
<br>

</td>
</tr></table>
</div>
</div>

<br><br>
<textarea id="inputTextToSave" cols="80" rows="25"></textarea><br>

</body>
</html>

jonas.t...@gmail.com

unread,

Aug 15, 2017, 7:16:25 AM8/15/17

to

Here is the two javascripts and the CSS.
CSS
input[type="file"] {
display: none;
}
.custom-file-upload {
font-size: 10px;
border: 0px solid #ccc;
display: inline-block;
padding: 0px 0px;
cursor: pointer;
}

.button {
background-color: white;
border: none;
color: black;
padding: 0px 0px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 10px;
}

/* Dropdown Button */
.dropbtn {
background-color: white;
color: black;
padding: 0px;
font-size: 10px;
border: none;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: white;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: absolute;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: relative;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: white}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

JS 1
function saveTextAsFile()
{
var textToSave = document.getElementById("inputTextToSave").value;
var textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
downloadLink.href = textToSaveAsURL;
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);

downloadLink.click();
}

function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}

function loadFileAsText()
{
var fileToLoad = document.getElementById("fileToLoad").files[0];

var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent)
{
var textFromFileLoaded = fileLoadedEvent.target.result;
document.getElementById("inputTextToSave").value = textFromFileLoaded;
};
fileReader.readAsText(fileToLoad, "UTF-8");
}

JS 2
function AG() {
document.getElementById("AUTO").classList.toggle("show");
}

function EG() {
document.getElementById("EDIT").classList.toggle("show");
}

function GD() {
document.getElementById("DATA").classList.toggle("show");
}

function DG() {
document.getElementById("DEBUG").classList.toggle("show");
}

function myFunction() {
var x = document.getElementById('menu');
if (x.style.display === 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
// openDropdown.classList.remove('show');
}
}
}
}

JJ

unread,

Aug 15, 2017, 7:49:13 AM8/15/17

to

On Tue, 15 Aug 2017 03:43:23 -0700 (PDT), jonas.t...@gmail.com wrote:
> But
> i wan't windows filedialog to open on click of "text,link, button,
> whatever" to write or set the id? before i call the save function. Is
> that possible?

Write or set the ID of what? Either way, just do all those things before
calling the `click()` method of the link element.

jonas.t...@gmail.com

unread,

Aug 15, 2017, 10:31:26 AM8/15/17

to

The id must be the file that is to be saved?
I want it set from windows file save dialog.
If you check script you see i managed to do it for file opening, it get the id directly from windows open file dialog without the necessity to write the filename. I would like the same approach for save.

jonas.t...@gmail.com

unread,

Aug 15, 2017, 10:36:20 AM8/15/17

to

But it seem to be alot harder i can not even get the file save dialog of windows to open? Well i can get a file to save use input ID="filename" but i do not want a textfield in menu i want to use microsoft file dialog to set the ID.

If i could do it for open it should be possible for save?

jonas.t...@gmail.com

unread,

Aug 15, 2017, 10:42:55 AM8/15/17

to

Here is how i managed to do it for open file it take the ID="filename" from windows file dialog and then open that file.

But i just can't figure out a way even to open the filesave dialog, and i really looked hard for examples on the web but they fetch id from HTML/SCRIPT dialog before saving file i want the ID by microsoft save dialog?

jonas.t...@gmail.com

unread,

Aug 15, 2017, 10:49:29 AM8/15/17

to

Maybe it is confusing for you if you see it as a save of an already open file,that do not need a file dialog just to have the ID set upon open.
Think of it as a save as or a new file i want windows save file dialog to open but i don't even find examples of howto do it?

jonas.t...@gmail.com

unread,

Aug 15, 2017, 11:06:17 AM8/15/17

to

Just to be clear i talk about local file system to open savedialog, not serverside. You can try search there just isn't any example of anyone manage to do it?

jonas.t...@gmail.com

unread,

Aug 15, 2017, 11:27:02 AM8/15/17

to

What would had make sense to me
<label class="custom-file-upload">
<input type="load"/ id="fileToLoad" onchange="loadFileAsText()">
Load File
</label>

<label class="custom-file-download">
<input type="save"/ id="fileToSave" onchange="SaveFileAsText()">
Load File
</label>

Now there is only the type="file" and that will only open the save file dialog, is there a way to circumvent this and get the save dialog to open?

jonas.t...@gmail.com

unread,

Aug 15, 2017, 11:45:17 AM8/15/17

to

Well it ain't critical with a savedialog box to open, but it could have looked a bit nicer without input field in menu, it is really buttugly, but i do not longer think it is possible to open windows savedialog using javascript.

JJ

unread,

Aug 15, 2017, 10:10:14 PM8/15/17

to

On Tue, 15 Aug 2017 07:31:15 -0700 (PDT), jonas.t...@gmail.com wrote:
>
> The id must be the file that is to be saved?
> I want it set from windows file save dialog.
> If you check script you see i managed to do it for file opening, it get the id directly from windows open file dialog without the necessity to write the filename. I would like the same approach for save.

After a file has been selected (at `change` event), read its `name`
property. e.g.

var filename = inputElement.files[0].file.name;

jonas.t...@gmail.com

unread,

Aug 16, 2017, 7:06:52 AM8/16/17

to

Hello JJ my problem is not to set the name property, i can both oper and save the files. I do not know howto to open the filesavedialog, and since there is no examples on the web i do not think it is possible. Maybe for some security reason, but i can't see how it possibly could differ saving the file by enter its name using input field in Javascript.

If someone just could point me to an example on howto open the filesave dialog of windows i am sure i will be able to set the ID just fine.

jonas.t...@gmail.com

unread,

Aug 16, 2017, 8:27:54 AM8/16/17

to

This is what i've fiddled together so far, i've tried to keep it simple to the maximum. Please try out and comment, and if anyone know howto open windows filed dialog instead of have an input field i would like to know.

http://anybase.co.nf/Filehandle/readwrite.html