Upload file and get url prefilled in a form-CodePudding

I have a form where users upload files (images), the file is uploaded once they select the file, what I'm trying to do is to get the url of the uploaded file and prefill it in the next text input value. Also to be able to rename the uploaded file from the first input(filename)

Here is the upload php script:

<?php
 header('Access-Control-Allow-Origin: *');
 /* Get the name of the uploaded file */
 $filename = $_FILES['file']['name'];

 /* Choose where to save the uploaded file */
 $location = "uploads/".$filename;

 /* Save the uploaded file to the local filesystem */
 if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
 echo 'Success';
 
 } else { 
 echo 'Failure'; 
 }

?>

and here is the form script

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>upload</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>
<body>
    
    <script>
    async function uploadFile() {
        let formData = new FormData();           
        formData.append("file", fileupload.files[0]);
        await fetch('assets/php/upload.php', {
            method: "POST", 
            body: formData
        });    
        alert("url location");
    }
    </script>
        <label>File Name</label><br>
        <input type="text" name="filename"><br>
        <input id="fileupload" type="file" name="fileupload" onchange="uploadFile()"/><br>
        <input type="text" value="url of the uploaded file"/>

    
    
    
    <script src="" async defer></script>
</body>

More information about the problem: The result will be two forms, one will upload the file to local server and return the url to the second form and the second form will send the information to a google form to be submitted, it's a workaround as users can't upload directly to google forms without having to login, this is the actual problem that I can't find a solution for, so I'm trying to do this as a workaround to uploading the file directly to google forms

Thanks you so much for your help

CodePudding user response：

Thx for the assist I figured it out.

here's the answer in case someone else is looking

upload.php file

    <?php

/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];
$ipad = rand(1256252, 25665588665);;
$newfilename = round(microtime(true)) . '.' .$ipad . '.' .$filename;

$location = "uploads/".$newfilename;

/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) {  
  echo $location;

} else { 
  echo 'Failure'; 
}

?>

and here is the js script:

<script>
    async function uploadFile() {
        let formData = new FormData(); 
        
        formData.append("file", fileupload.files[0]);
        var response = await fetch('assets/php/upload.php', {
            method: "POST", 
            body: formData
        });    
        let data = "localhost/assets/php/"   await response.text()

        console.log(data);
        outputfile.value = data
        }

    </script>
    
       
        <input id="fileupload" type="file"   name="fileupload" value="new" onchange="uploadFile()"/>
        <br>
        <input type="text" id='outputfile'/>

Although I wasn't able to change the file name from the text input, but I created a random name instead