Halt the 'Submit' until the correct file format is chosen?‏

JavaScript
1

I’m looking for help adding to this Upload Form. Currently if you upload the wrong size or wrong format the corresponding error message appears, but the erroneous action can still proceed.

How can I halt the ‘Submit’ until the correct file format is chosen?
How can I halt the ‘Submit’ until the correct size is chosen?

Here's some of the Form's html:
<input class="button-form3" type="submit" value="Submit >>" name="B3" />
<input class="upload-form-input" type="hidden" name="form_submitted" value="yes" />

Here’s the Form’s php code:

if ($form_submitted == 'yes')
{
    $allowedExts = array("doc", "docx", "gif", "jpeg", "jpg", "txt", "rtf", "pdf", "png", "txt");
    $temp = explode(".", $_FILES["file"]["name"]);
    $extension = strtolower( end($temp) );

if(!in_array($extension,$allowedExts) && $_FILES["file"]["name"] != "" )
{
    echo ("<div id=\"errorMessage\">Error: Invalid File Name </div>");
}
else if ($_FILES["file"]["size"] >= 100000)
{
    echo ("<div class=\"errorMessage1\">Error: Image File Size Exceeds Limit </div>");
}
$length = 20;
$randomString = (time());
$thumbnail = $_SESSION['user_id'] . '-' . $randomString . "." . $extension;
$uploadedFile = $_FILES["file"]["tmp_name"];

if($uploadedFile != NULL)
{
    move_uploaded_file($uploadedFile, "upload/" . $thumbnail);
}
else
{
    copy("upload/NoInfoAvailable.png", "upload/" . $thumbnail);
}

$_SESSION['thumbnail'] = $thumbnail;
$file_location = '<a href="http://www....com/upload/' . $thumbnail . '">' . $thumbnail . '</a>';
}

Any help will be appreciated.

2

It appears as though the PHP is processing after the form has already been submit. Once the form is submit, you can’t “unsubmit” it.

You can delete the file and display an error message, however.

HTH,

:slight_smile:

3

Thanks for your reply.

Can you please expand on “You can delete the file and display an error message”? How so?

4

In the following section of code:

if(!in_array($extension,$allowedExts) && $_FILES["file"]["name"] != "" )
{
    echo ("<div id=\"errorMessage\">Error: Invalid File Name </div>");
}

Here, you are just printing “Error: Invalid File Name”. At this point, it should still be in a temp directory (normally, it remains there JUST long enough for it to be moved elsewhere.) Instead of moving the file to another folder, just delete it (if the temp folder doesn’t already do that automatically.)

HTH,

:slight_smile:

5

Thanks for your reply.
So, can code be added to delete an incorrect file format or incorrect file size, when the appropriate error appears? (so that I can change the error messages to essentially say “upload blocked try again”). If so, can you provide a code example, please?

6

Actually, I’m not that familiar with PHP (this is the JavaScript forum.) But I’m sure it would be simple enough to figure out.

V/r,

:slight_smile:

7

Just to add that until recently JavaScript had no access to client files whatsoever - you had to upload the file to the server before being able to start looking at whether it met the criteria.

Now you might look at https://developer.mozilla.org/en-US/docs/Web/API/FileReader for a possible way of testing the file from the browser before starting the upload.

8

Thanks for the replies. I have asked about PHP code in that section.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.