Develop Reference

How to Open File Dialog box on SPA (browser side) with custom file list (of remote, server directory)

I have a MVC project with a view. Have a directory on server with files, and have to show good looking Open File dialog box with this directory and files in it (not a user's local directory). I got a list of files, and path, and send as variables (string and array of strings) into my view, so now I can show directory listing on my page. But I'd like to use some standard looking dialog box for choosing file instead of writing my own window with radio buttons and text boxes.
Is there any way to fill Open file dialog box with my list of files With Javascript?

Regarding the buttons, you can take a look at bootstrap: https://getbootstrap.com/docs/4.0/components/list-group/
There you can use predefined buttons, lists etc. But specifically for downloading files there is no SPECIAL button of any kind.
Regarding the JS part, you can use something like:
<a id="download_link" download=filename.txt" href=”” onclick="getFile('someinputtxt')"><font size="5">Download Txt File</font></a>
<script>
function getFile(input)
{
var text = input;
var data = new Blob([text], {type: 'text/plain'});
var url = window.URL.createObjectURL(data);
document.getElementById('download_link').href = url;
}
</script>
There I create a text file with some input. But basically you can use a button/list that is already in bootstrap for example and just add the file using 'download':
Hope it helps.

how can I send input straight to textarea

I am using
https://github.com/Rovak/InlineAttachment
I currently have it all setup so I can drag and drop images to my textarea and they upload straight to imgur, from following this tutorial:
http://wilfreddenton.com/posts/drag-and-drop-photo-uploads-to-imgur
what I'm trying to do is add an input so if the user doesnt want to drag and drop, they can simply browse their pc and upload files, and have them go straight into the textarea upon selection. (just how github comments work)
I just cant seem to get the input to insert into the textarea.
Here's a live example: http://codepen.io/DrCustUmz/pen/KzZOeP
or if your logged into github you can see the end goal what im trying to do: https://github.com/wilfreddenton/dynamic-scss/issues/new
dont actually submit but click "selecting them" below the textarea, pic a few images, and watch the textarea after you click open.
the input selection is not working in this example. How can I get it so I open the choose files, select a few images, then when I select "open" on the browse my pc popup, they are directly inserted into the textarea, just like i drag and dropped them.

Most of the writting work is done in background so I had to rewrite the writting to textarea. Sorry I mostly use pure javascript so I didn't use any fancy jquery features.
This is where the magic happens. The upload can handle only one file at a time so I had to use loop for all of them. I recommend you take a look at the whole code.
document.getElementById("inputFile").addEventListener("change", function() {
var object = this;
var editor = document.getElementById("editor");
for(var i=0;i<this.files.length;i++) {
editor.value += "uploading...";
uploadHandler.customUploadHandler(this.files[i], function(result) {
editor.value = editor.value.replace("uploading...",result.filename);
});
}
});
Whole code on CodePen

You can simply attach the eventListener upon file is selected via choose files option. You just have to trigger the upload in callback. Assume that you've given id of the input type file as "fileUpload"
document.getElementById('fileUpload').addEventListener('change', function () {
console.log(this.files);
/*trigger the upload here, like you're doing in drag and drop*/
});

How to use JavaScript & DOM on one html page to externally link to another html page

So basically I have two html pages in the same folder. One of them is the homepage, while the other is a page that basically is a form. Once the person fills out the form and clicks the submit button, I would like to make it so that it automatically changes the homepages information with the information written out on the form using DOM.
What I have tried:
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Using global variables, did not work.
If I haven't worded this well enough or if you don't understand, please comment and tell me!
Here's an example of what I tried to do, didn't work because the div with id type is in a different HTML document.
function submitform(){
var textbox = document.getElementsByName('name').item(0);
value= textbox.value;
window.alert(value);
document.getElementById('type').innerHTML = value;
}

Passing variables to one page from another requires some form of query with paramters, ie. newpage.php?newdata='This came from the old page'. You'll need to implement one of several options: as already mentioned, you could store the submitted data in cookies and then retrieve them on the subsequent page load, you could send the data back to the homepage using an actual submit query (see above) or you could use an AJAX routine to send the data to the home page without any type of submit action.

Form page:
function submitform(){
var textbox = document.getElementsByName('name')[0];
value = textbox.value;
localStorage["name"] = value; //save it in localStorage
} //for later use
Homepage:
function showStuff(){
var value = localStorage["name"]; //get the information back
document.getElementById('type').innerHTML = value; //put it in
}
localStorage is supported on all major browsers. If you need to support < IE9, try jStorage.
Try a DEMO: http://jsfiddle.net/DerekL/r4fXw/ or http://pastebin.com/SurbLhWZ
Why none of your attempts works
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Variables are not shared cross different webpages.
Using global variables, did not work.
Same as #1.

Writing in file and saving it from Save as dialog through javascript

Below code is working fine to write XML data into a file.
function btnSave_onclick() {
var aFSO = new ActiveXObject("Scripting.FileSystemObject");
aTS = aFSO.OpenTextFile(FilePath,2,true);
aTS.Write (XMLText.value);
aTS.Close();
}
I want to change this code to show a dialog box to saveAs in desired location.
I found below code to open save as dialog box
document.execCommand('SaveAs','true',filename.txt);
Now question is how can I save data (which is in XMLText.value) through This dialog.
Is there any other way to save data trogh dialogBox. It is for IE
In other way Is it possible to provide a Browse button to select desired location in c: drive or any other drive and by saying ok get that path and store in a variable and by using above code can save directly to that location.
But here question is how to provide browse button?

How do I manipulate a form according to the contents of a file field?

I need to manipulate parts of a form in Drupal 6 based on the contents of a file field.
For example:
if the form shows and there is a file, do x
if the form opens without a file, do y
if a file is uploaded, do z (as soon as the upload is finished)
if a file upload fails, or the uploaded file is deleted, do xyz (whether ahah is used or not)
Any ideas on how I get this done?
thanks

Found a solution of sorts.
Using Drupal behaviors I am able to check whether the "upload" or "remove" buttons are in place and act according to them. Drupal behaviors also give the added value of updating when when ahah is used, as well.
For example, I needed a check-box to be disabled if no file was uploaded. I used this code:
drupal_add_js("
Drupal.behaviors.FilefieldCheckbox = function(context) {
if ($('#[filefield_id]-remove', context).size() > 0) {
$('#[checkbox_id]').removeAttr('disabled');
} else {
$('#[checkbox_id]').attr('disabled', true);
}
}
", 'inline', 'footer');
you need to replace [filefield_id] and [checkbox_id], of course.