Help with displaying Message on page

chrisjchrisj

This php file I have has this in it:

if ($_FILES["fileToUpload"]["size"] > 5000) {
header("Location: https://www.example.com/form_page.html?error=too_large);
exit;
}
which processes if the file is too large, correct?

When the user gets sent back to https://www.example.com/form_page.html

how can the message "too large" be displayed?

I look forward to any guidance,

NogDog

I already warned you I'm not a JavaScript expert, but I was curious, so I tried this and it seems to work:

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <style type="text/css">
      .error { color: red; }
    </style>
  </head>
  <body>
    <h1>Test</h1>
    <p id="foo" class="error"></p>
    <p>Form stuff here...</p>
    <script type="text/javascript">
      const urlParams = new URLSearchParams(window.location.search);
      const error = urlParams.get('error');
      if(error == 'too_large') {
        document.getElementById('foo').innerHTML = "File is too large.";
      }
    </script>
  </body>
</html>

Hopefully someone will come along with the "best" solution. 🙂

chrisjchrisj

Thanks for that.
I added the <style> <script> and
<p id="foo" class="error"></p>
to: https://www.example.com/form_page.html
and tried it without success (no message appeared on the html page).

I'm not clear on how my posted php code connects/triggers your posted code.
Is "foo" supposed to be something else?

I look forward to any additional guidance

NogDog

"foo" was just an arbitrary ID I used so the script knew which HTML element to change. If you want to use a more descriptive ID, that's probably a good thing -- just make sure you change the JavaScript to use that (case-sensitive) value for the call to getElementById(). When it redirects to that page, make sure it's showing ?error=too_large in the URL in your browser.

chrisjchrisj

Thanks again.
I understand that html element 'foo' and javascript getElementById 'foo' need to match, but, I'm not clear on how my initial posted php code:

if ($_FILES["fileToUpload"]["size"] > 5000) {
header("Location: https://www.example.com/form_page.html?error=too_large);
exit;
}

connects/triggers your posted code:

    <p id="foo" class="error"></p>

    <script type="text/javascript">
      const urlParams = new URLSearchParams(window.location.search);
      const error = urlParams.get('error');
      if(error == 'too_large') {
        document.getElementById('foo').innerHTML = "File is too large.";
      }
    </script>

any additional clarification is welcomed

tracknut

Is there a reason you don't just process the error in form_page.html with php, just putting the error message up? I mean, your passing it the ?error parameter, why not just spit it out to the page, in a box or something?

chrisjchrisj

Thanks for your reply.
What you're suggesting sounds good, but I don't know how to begin with that, can you provide a sample example, so I can get what you're saying, please?

tracknut

As an example, using nogdog's example above (untested):
<!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> .error { color: red; } </style> </head> <body> <h1>Test</h1> <?php if (isset ($_GET['error'])) { if ($_GET['error'] == "too_large") $err = "File is too large"; else /* handle other error messages */ ; printf ("<p class='error'>%s</p>",$err); } ?> <p>Form stuff here...</p> </body> </html>

NogDog

And as I mentioned in your other thread, you'd then need to make it a .php file, not .html. 😉

chrisjchrisj

Thanks for all the replies/help.

when I add this:

<?php
if (isset ($_GET['error']))
{
if ($_GET['error'] == "too_large")
$err = "File is too large";
else /* handle other error messages */
;
printf ("<p class='error'>%s</p>",$err);
}
?>

and reload the page I see this:

%s
",$err);
}
?>

any additional help is appreciated

tracknut

Did you make it a .php file, as NogDog mentioned?

chrisjchrisj

Thanks for your reply.
No, I don't know how to turn the html form page into a php page (although I tried).
Any additional assistance is welcomed

tracknut

You just rename the file so the suffix is ".php". Presumably it is something like ".htm" or ".html" right now. Note also that any files that link to it (e.g. the file you listed in the first post of this thread) will need to link to its new name.

chrisjchrisj

Thanks again for your replies/help.
Ok, that .php displays the "too large "message. Thank you again.

I have a related question. I'll ask it here, but if I should start a new posting, just let me know.

Once the Form submits, the same page is displayed that basically says "Upload Here",
while the script is checking if the file size, which, a user might not be sure what to do seeing the "Upload Here' again, and then after seconds go by, the error shows 'file too large" error text, above "Upload Here".

How can a user not see the "Upload Here' page again while the script checks the file size (and format) for errors?

The Form has this in it:
<form action="..//uploadM.php" method="post" enctype="multipart/form-data"> ETC...

And the beginning of uploadM.php looks like this:

<?php
$target_dir = "uploadM/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}

ETC...

does the 'target_file' needs to be modified, or something else?

I look forward to your insight/guidance.

Sempervivum

Simple solution: Hide the 'Upload here' page by placing an overlay above it, e. g. containing a "busy" icon.
Advanced solution, more user friendly when large files are uploaded: Hide the 'Upload here' page and display a progress bar instead.

chrisjchrisj

Thanks for your reply.

I'd like to try the 'simple solution', but I am hoping you can elaborate on "Hide the 'Upload here' page by placing an overlay above it", I'm not clear on that, or how to add a 'busy' icon.

I look forward to any additional info.

Sempervivum

I've made a simple demo in order to be sure that the code works:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>File Upload</title>
    <style>
        #overlay {
            /* the overlay should fill the browser window */
            width: 100vw;
            height: 100vh;
            display: none;
            position: fixed;
            background-color: white;
            left: 0;
            top: 0;
            /* additonal styling to center the text or icon */
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>

<form id="uploadForm" method="post" action="upload.php" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit">
</form>
<!-- overlay displaying a busy message or icon -->
<div id="overlay">Uploading, please wait ...</div>
<script>
    // add an event listener for submit
    document.getElementById('uploadForm').addEventListener('submit', function () {
        // the form was submitted, make overlay visible
        document.getElementById('overlay').style.display = 'flex';
    });
</script>
</body>

</html>

chrisjchrisj

Many thanks again for all the great help.
I have a related question. I'll ask it here, but if I should start a new posting, just let me know.
After submit/upload, how can I keep someone from submitting over and over.
Is there a simple way to block re-submit/upload until some time passes? Something similar to the process where after you've tried 5 password attempts to log-in to a website makes you wait to try again?
I look forward to any ideas/assistance

Sempervivum

Do you have a user management and do your users have to login before uploading?

chrisjchrisj

yes and yes