• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript load, edit and save file to specific path

N1em4nd

New Coder
Mar 20, 2020
1
0
1
Hi Community,

i am momently working on a short template tool. It should works like visiting the index with the drope down menu -> view the Template -> if necessary edit the Template & save it on same Path.

The Index and viewer works. As well i got it to load the file, edit it & save it. But everything i try to get it downloaded automaticly to the same folder as the file got uploaded i receive errors. I need always to select manually the Path where the file should be saved.

Does anybody knows how to include a file path that the file get saved on the same path as uploaded?

HTML:
<!DOCTYPE html>
<html class=" js no-touch" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Backup erstellen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Your page description here">
    <meta name="author" content="">
    <!-- css -->
    <link href="../css/menu.css" rel="stylesheet">
    
    <style type="text/css"><!--
            body {
                background-color: #FFFFFF;
                margin-left: 1em;
            }
    </style>
  
 <script type="text/javascript">

function saveTextAsFile()
{
    var textToSave = document.getElementById("inputTextToSave1").value;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/html"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs1").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("fileToLoad1").files[0];

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

</script>
    <table border="2" cellspacing="10" cellpadding="20">
 <thead>
    <tr>
        
        
    <th><p><left>Datei Bearbeiten</left></p>
        
       <form method="get" action="file:///Users/*****/Desktop/Projekt%20Templates%202.0/index.htm">
        
  <input type="submit" value="Back to Index">
</form>
        </th>
        
  </tr>
    </thead>
    <tbody>

    <tr>
    
        <td colspan="3">
          <textarea id="inputTextToSave1" cols="190" rows="25"></textarea>
        
        <br />
          <b> File to Upload</b>
 
        <input type="file" id="fileToLoad1">
        <button onclick="loadFileAsText()">Load Selected File</button>
        
        
            <right><b>name of file to save:</b>
         <input id="inputFileNameToSaveAs1"></input>
     <button onclick="saveTextAsFile()">save file</button></td>
    </tr>
 
    </tbody>
</table>

<br />
    
</body>
</html>
 

Ghost

Active Coder
Apr 19, 2019
407
184
43
It appears that you would like to be able to generate a file and save the file to the site visitor's local computer, but you want to choose the download location or have it default to the same path that the file was uploaded from. This is not possible because of the following reasons:
-> If JavaScript was allowed to pick where a file is downloaded, that means it must know the visitor's file system, or at least 1 path - This is a security vulnerability.
-> If JavaScript had access to the file system, it could theoretically scan through folders and find private files on the visitor's computer.
-> If JavaScript was allowed to set the download path to the same path that the file was uploaded from, that would also allow JavaScript to change the path to anything it wants because the user's browser would be forced to trust the website's JavaScript.
-> You send the file download to the browser's download feature, and the browser will always save to the default download folder
-> Popular browsers like Chrome, Firefox, IE, etc do not allow JavaScript to view any file/folder paths on the visitor's computer

Similarly, you cannot use JavaScript to save a file on a server permanently because this would allow your site visitors to modify the JavaScript and save any file they want such as a backdoor shell or upload script to hack your site.