Help with displaying Message on page

@chrisjchrisjNov 26.2019

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,

to post a comment

JavaScript

26 Comments(s) _↴

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

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

Hopefully someone will come along with the "best" solution. :)

@chrisjchrisjauthorNov 26.2019 — #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

@NogDogNov 26.2019 — #"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.

@chrisjchrisjauthorNov 26.2019 — #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:

``<i>
 </i>if ($_FILES["fileToUpload"]["size"] &gt; 5000) {
 header("Location: https://www.example.com/form_page.html?error=too_large);
 exit;
 }<i>
 </i>`</CODE>
 connects/triggers your posted code:
 
 <CODE>`<i>
 </i>    &lt;p id="foo" class="error"&gt;&lt;/p&gt;
 
 &lt;script type="text/javascript"&gt;
 const urlParams = new URLSearchParams(window.location.search);
 const error = urlParams.get('error');
 if(error == 'too_large') {
 document.getElementById('foo').innerHTML = "File is too large.";
 }
 &lt;/script&gt;<i>
 </i>``

any additional clarification is welcomed

@tracknutNov 26.2019 — #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?

@chrisjchrisjauthorNov 26.2019 — #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?

@tracknutNov 26.2019 — #As an example, using nogdog's example above (untested):

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

@NogDogNov 27.2019 — #And as I mentioned in your other thread, you'd then need to make it a .php file, not .html. ;)

@jessysmith35Nov 27.2019 — #https://www.fridaycharm.com/

@chrisjchrisjauthorNov 30.2019 — #Thanks for all the replies/help.

when I add this:

``<i>
 </i>&lt;?php
 if (isset ($_GET['error']))
 {
 if ($_GET['error'] == "too_large")
 $err = "File is too large";
 else /* handle other error messages */
 ;
 printf ("&lt;p class='error'&gt;%s&lt;/p&gt;",$err);
 }
 ?&gt;<i>
 </i>`</CODE>
 and reload the page I see this:
 
 <CODE>`<i>
 </i>%s
 ",$err);
 }
 ?&gt;<i>
 </i>``

any additional help is appreciated

@tracknutNov 30.2019 — #Did you make it a .php file, as NogDog mentioned?

@chrisjchrisjauthorNov 30.2019 — #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

@tracknutNov 30.2019 — #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.

@chrisjchrisjauthorDec 01.2019 — #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:

``<i>
 </i>&lt;?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...<i>
 </i>``

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

I look forward to your insight/guidance.

@SempervivumDec 01.2019 — #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.

@chrisjchrisjauthorDec 01.2019 — #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.

@SempervivumDec 01.2019 — #I've made a simple demo in order to be sure that the code works:

&lt;!DOCTYPE html&gt;
 &lt;html lang="de"&gt;
 
 &lt;head&gt;
 &lt;meta charset="utf-8"&gt;
 &lt;title&gt;File Upload&lt;/title&gt;
 &lt;style&gt;
 #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;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;
 
 <i>    </i>&lt;form id="uploadForm" method="post" action="upload.php" enctype="multipart/form-data"&gt;
 <i>    </i>    &lt;input type="file" name="file"&gt;
 <i>    </i>    &lt;input type="submit"&gt;
 <i>    </i>&lt;/form&gt;
 <i>    </i>&lt;!-- overlay displaying a busy message or icon --&gt;
 <i>    </i>&lt;div id="overlay"&gt;Uploading, please wait ...&lt;/div&gt;
 <i>    </i>&lt;script&gt;
 <i>    </i>    // add an event listener for submit
 <i>    </i>    document.getElementById('uploadForm').addEventListener('submit', function () {
 <i>    </i>        // the form was submitted, make overlay visible
 <i>    </i>        document.getElementById('overlay').style.display = 'flex';
 <i>    </i>    });
 <i>    </i>&lt;/script&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

@chrisjchrisjauthorDec 02.2019 — #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

@SempervivumDec 03.2019 — #Do you have a user management and do your users have to login before uploading?

@chrisjchrisjauthorDec 03.2019 — #yes and yes

@SempervivumDec 03.2019 — #That's fine, then it's easy to store information user specific. I recommend the following procedure:

Store the time of the upload, either in the database or in a text file. Additionally do not show the upload form to the user after he has uploaded a file. Show the upload form again when the user comes back or reloads the page and a certain time has passed after the upload. You can check the latter by substracting the time of upload from the current time. Then show the upload form again.

Alternatively you could show the upload form anyway but catch the submit by Javascript and block it when the waiting time has not yet passed. And show an appropriate message to to user.

This is just a rough draft of the procedure, you will need to narrow it down.

@chrisjchrisjauthorDec 04.2019 — #Thanks for that, but I was thinking of another application.

The answer to "Do you have a user management and do your users have to login before uploading?" is no and no,

Any additional guidance you'd like to share is appreciated.

@SempervivumDec 04.2019 — #If there is no user management it's not possible to store the information reliably and safe to manipulation.

1. Solution: Identify the user by his IP and store the time of the latest upload server side with the IP as a key. Problem: IP changes.

2. Save the time of the latest upload client side in the local storage. Problem: Can be bypassed by the user easily by deleting the local storage.

@chrisjchrisjauthorDec 04.2019 — #Thanks again.

Can you please explain a little more about "client side in the local storage" and how a user can delete it?

@SempervivumDec 05.2019 — #@chrisjchrisj#1611460 Using the local storage is described here:

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Deleting depends on the user's browser:

1. Delete the history; this can be found somewhere in the settings at "privacy" or so.

2. By use of the developer tools; there you can view and delete the local storage. In Opera in the tab "application".

@marsillpostDec 06.2019 — #employing the available data to make more accurate assessments. One challenge to this assessment is where snow cover is patchy, for example during periods of accumulation or ablation and also in forested areas. Cloud cover inhibits optical sensing of surface reflectance, which has led to other methods for estimating ground conditions underneath clouds. For hydrological models, it is important to have continuous information about the snow cover. Passive microwave sensors are especially valuable for temporal and spatial continuity because they can map the surface beneath clouds and in darkness. https://www.marsillpost.com/ When combined with reflective measurements, passive microwave sensing greatly extends the inferences possible about the snowpac

Also in #JavaScript _↴

Cycle through Switch Cases Submit Generated E-mail response checking if document in iframe is on different server

Success!

Help @chrisjchrisj spread the word by sharing this article on Twitter...

Tweet This

Help with displaying Message on page

26 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Help with displaying Message on page

26 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

26 Comments(s) _↴

Also in #JavaScript _↴