Javascript - how to identify a file after an upload to the server

Question

Hello, I have a script where the user can upload a .pdf. Each time it is done, the file is saved in the /tmp folder with a sequential Generic name , different from the original name. I need a way to identify the file. I tried to change the name of the file saved in fd.append , but only changes the extension. Or better still create a text file with some hints about the upload and save next to the file, to be able to read later.

<script type="text/javascript">
                function fileSelected() {
                    var file = document.getElementById('fileToUpload').files[0];
                    if (file) {
                        document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
                        document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
                        document.getElementById('upload').style.display= 'block';
                    }
                }

                function uploadFile() {
                    var fd = new FormData();
                    fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
                    var xhr = new XMLHttpRequest();
                    xhr.addEventListener("load", uploadComplete, false);
                    xhr.addEventListener("error", uploadFailed, false);
                    xhr.open("POST", "", true);
                    xhr.send(fd);
                    document.getElementById('upload').style.display= 'none';
                }


                function uploadComplete(evt) {
                    document.getElementById('progresso').innerHTML = 'Upload completo !';
                    document.getElementById('upload').style.display= 'block';
                }

                function uploadFailed(evt) {
                    document.getElementById('upload').style.display= 'block';
                    alert("Houve um erro ao tentar subir o arquivo");
                }           
                </script>

Answer 1

Hello,

You cannot upload with pure Javascript, without the server receiving the files and processing them! You need to handle in the BACK-END!

No defined URL

xhr.open("POST", "", true);

You need a page that captures and treats information!

See an example of the PHP page: Upload File using PHP