Develop Reference

Problem with Drag and Drop file upload using PHP server script

I'm trying to upload files using PHP script on the server as the upload handler. It works just fine with a traditional web form like this:
<form action="uploadHandler.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
But when I try to switch to a drag-and-drop form the PHP handler is failing with an undefined index on the name value "fileToUpload". Here is the error message:
PHP Notice: Undefined index: fileToUpload in /home/...../uploadHandler.php on line 10
Line 10 of uploadHandler.php contains this statement:
$fileName = $_FILES['fileToUpload']['name'];
I'm still using the name=fileToUpload in my drag and drop form:
<form class="my-form">
<p>Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileToUpload" name="fileToUpload" onchange="handleFiles(this.files)">
<label class="button" for="fileElem">Select some files</label>
</form>
This is the function on the page that contains the drag and drop form that calls the uploadHandler:
function uploadFile(file, i) {
var url = 'https://xxxxxx/uploadHandler.php'
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
formData.append('file', file)
xhr.send(formData)
}
I tried adding something like formData.append('name', 'fileToUpload') before calling xhr.send, but that didn't seem to help.
What am I missing?

html, javascript file upload dialog under submenu

in the submenu, when you click "Load CSV file", I want to get file type upload dialog.
here is my code but it does not open any file upload dialog.
...
<div class="subnav-content">
<input type="file" id = "csvfile" style="display:none;" accept=".csv"/>
Load CSV file
Login to DB
Logout DB
Exit
</div>
JS
function chooseCSV(){
$("#csvfile").click();
return false;
}

HTML Paste Clipboard File to File Input

I have a function that uploads a CSV file into a server via form submission.
It is working well, but I need to support copy and paste of CSV file from the actual file location to the input element.
I tried to do this code from a stackoverflow answer (https://stackoverflow.com/a/50427897/9751944)
const form = document.getElementById("new_document_attachment");
const fileInput = document.getElementById("document_attachment_doc");
fileInput.addEventListener('change', () => {
form.submit();
});
window.addEventListener('paste', e => {
fileInput.files = e.clipboardData.files;
});
<form id="new_document_attachment" method="post">
<div class="actions"><input type="submit" name="commit" value="Submit" /></div>
<input type="file" id="document_attachment_doc" />
</form>
It is working on images. But when I try it on CSV and other files, I am getting an error saying that the clipboard does not have any content
ie.
The first FileList and File are for the test image while the second one is for CSV

Form's uploaded file disappears on canceling new selection of file

I have a simple form on my webpage.
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input id="browse" type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
Now, my problem is when I browse and choose file to upload it shows which file I am going to upload.
But when I click on Choose file and browse again and this time if I change my mind mid way and hit cancel then old selected image also goes away.
On canceling it removes already selected image also.
Why does this happen and what to do if I want my old selected image to be selected after browsing again and canceling?
Thanks in advance!

Thanks to #Carlos , added this javascript
var input = document.getElementById("browse");
var selectedFile;
input.addEventListener('change', updateImageDisplay);
function updateImageDisplay() {
if(input.files.length==0) {
input.files = selectedFile;
}
else {
selectedFile = input.files;
}
}
and now it works fine! you can check here.

Uploading a image to html page using html and javascript

I am trying to upload an image in html page using the <input type="file"> element. I want to use the uploaded image to replace another image on the page. However, the control does not pass onto the java script function. Am trying to find out why the control does not pass. Below is the code I am using:
<label>Upload a Picture</label
<img src="unknown_person.jpg" height="250" width="250"></img>
<div>
<form name="image1" enctype="multipart/form-data" action="/" method="POST" onsubmit="return UploadPic()">
<input type="file" name="imgfile"></input>
</form>
</div>
Thanks in advance.

You can't intercept a file upload in Java Script. The file has to be uploaded to the server, and then the page has to be rerendered

One approach would be using AJAX to query the backend on where the image was uploaded.
Like so
var pullImage = function()
{
// do ajax work
return image ? propagateHTML('element', image.uri) : fallback();
}
var propagateHTML = function(id, uri)
{
document.getElementById(id).innerHTML = uri;
}