Develop Reference

DIV Refresh on a Object File

I've created a DIV that loads a text file. The goal is to update the text file and have the output correctly displayed in the browser. It works; however, when I update the text file, the contents do not display in the browser until I do a ctrl-F5 to hard refresh the page.
<div id="outage"><object width=475 data="outage.txt"></object></div>
How can I refresh the DIV or OBJECT to correctly display the data in the text file?

I think that's what you mean? Ajax can be used in this process.
If you want what has been written in the file to be moved to the 'div' immediately after the 'save' then I don't think it's possible to do it except by back-end
<div id="outage">
<object width=475 data="outage.txt"></object>
</div>
<button class="bttn">Update</button>
<script>
document.querySelector(".bttn").addEventListener("click", (e) => {
e.preventDefault()
document.querySelector('#outage').innerHTML = "";
document.querySelector('#outage').innerHTML = `<object width=475
data="outage.txt"></object>`;
});
</script>

In HTML, how can I build a file picker that can change the image displayed without using action listener?

This is what I have in HTML:
<img src="images/defaultProfile.jpg" id="image">
<input type="file" name="pic" accept="image/*" id="imgPath">
<input type="submit" onclick="uploadImg()">
The image with an id of "image" automatically loads a default image from a designated directory by default. Then, the user can I pick an image from the file picker. When the user hits the submit button written on the last line, The uploadImg() written on javaScript file will get the image from input and change the image displayed.
But, my question is how I can enable the user to change the image by just picking a image file from the directory without hitting the "submit" button.

You can add a change listener to the image input:
document.querySelector('#imgPath').onchange = () => {
console.log('Now uploading...');
// uploadImg();
};
<input type="file" name="pic" accept="image/*" id="imgPath">

Take a look at this Why can't I do <img src="C:/localfile.jpg">?. If your plan is to display an image before uploading to the server, that is not going to work. What you can do is write an "onchange" event (https://www.w3schools.com/jsref/event_onchange.asp) to your file selection input line (2nd line in your code), and upload it to a temporary directory and display it. As the user clicks on the upload button, you can make the change permanent. If the user cancels, you will display the default profile page.

Anyway to bind an upload from multi upload box to input file?

I am using the Drag and drop Multi Importer script I found online, below my div containing the drag and drop is an input type="file"..
Currently if you click the Browse files button from the input and add an image then it shows in the Multi Upload div (and of course the input file section as well) However not everyone is going to use the browse files button, they are going to drag and drop so is there a way to reverse this behavior? Where when the client drags a file in the multi upload div it will show in the input file tag as being added?
I hope I wasn't too confusing there.
Here is what I have:
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here or Click to Upload</h1>
</div>
<input type="file" name="thumbnail" id="thumbnail" multiple />
<script type="text/javascript">
var config = {
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif", // Valid file formats
form: "primaryPostForm", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
}
jQuery(document).ready(function($){
initMultiUploader(config);
$('.button').click(function () {
$('#primaryPostForm').submit();
});
$('#dragAndDropFiles').bind("click" , function () {
$('input#thumbnail').click();
});
});
</script>
Ultimately it would be great just to hide the input file type section but still have it in my markup because I have other functions that take that file and create products from it.

Uploading multiple single files using separate Dropzones in one form

I have a form where you can continually add more rows.
One row contains name and avatar, etc.
I want to use Dropzone.js to make each avatar a different droppable field.
Whenever I create a new row, I'm creating a new Dropzone area. This is fine, and works.
However, when I submit the form, the files are nowhere to be found. I can understand why, because the file fields aren't in the form, they are appended to the body.
<form>
<div class="person" id="person_1">
<div class="avatar"></div>
<input type="text" name="name_1" />
</div>
<!-- then these are added via js -->
<div class="person" id="person_2">
<div class="avatar"></div>
<input type="text" name="name_2" />
</div>
<div class="person" id="person_3">...</div>
<div class="person" id="person_4">...</div>
<!-- etc -->
</form>
I'm initializing the dropzone on the avatar div.
Is it possible to add them to file fields inside the form?
Here's what's going on in the JS. It's dumbed down a little for brevity.
(function(){
var count = 1;
var $form = $('form');
initDropzone( $('#person_1') );
function addPerson() {
count++;
var $personDiv = $('<div class="person" id="person_'+count+'">...</div>').appendTo($form);
initDropzone( $personDiv, count );
}
function initDropzone( $el, count ) {
$el.find('.avatar').dropzone({
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 100,
maxFiles: 1,
url: '/' // dropzone requires a url param
});
}
$('#add_person').on('click', addPerson);
})();

The problem is not that the fields are appended to the body, but that the whole Dropzone uploading process is different from a normal form submission.
You can not use Dropzone to drop files in the browser, and then use the normal form submit to submit it.
There are two ways to accomplish what you are doing:
Don't let the user submit the form until all your files in the Dropzones have uploaded (or better yet: create event listeners on all your Dropzones that will fire the submit function on the form as soon as all Dropzones have uploaded). You need to store the files on your server and wait for the actual form submission to assemble the data.
This is by far the most elegant solution, because this way the files are already uploading while the user may still be editing form data.
Create one Dropzone on the actual form, that will handle the whole uploading of the form via AJAX. (See the docs for that). If you want different dropzone targets inside that dropzone, you'll have to create them separately, and "delegate" the file drops to the main dropzone (basically, just take the file object, and add it to the main Dropzone).

Get value of file upload to a hidden text box

I'm trying to get the value or file path from a html file upload control to a hidden input text box as soon as I select a file.
<input type="file" name="some_name" id="file" />
<input type="text" name="text_name" id="abc" style="display:none;" value=""/>
and my script looks like:
$('#file').live('change', function(){ alert("yes"); });
so I get the alert box but I would like to change the value of the hidden input field to the path of the file I select. Any help to solve this problem is highly appreciated.

Usually you get an element's value with $('#elementId').val(), but in the case of a an <input type="file"> you can't, because of security restrictions. There is no way to know the local file path (at least none that works consistently on all browsers).

To get the file path of an upload control <input type='file'> you can do the following:
var value = $('#elementID').val();
var value = value.substr(value.lastIndexOf('\\') + 1);
This will trim off any file path that comes before the filename. In the case of IE and Firefox the full file path and in the case of Chrome and Safari the C:\Fake Path.
See the associated jsfiddle:
Fiddle

Does it work ?
$('#file').change(function() {
$('#abc').val($(this).val());
});
I guess it doesn't: see bfavaretto answer.