Member Avatar for samsons17

Hi all..
I got a problem here on how to handle the form submission.

The problem is like this.I got two part of the form which i want to get the data from the user for the events that he/she want to promote.

(1)The first part is that I want the user of my website to be able to upload the picture regarding of his/her specific event.
(2)The other part is the user could submit the details about that particular events.

Thus, basically my sample coding in html and php will go like this :

This part is for handling the picture uploading :

<form action="http://localhost/inuevents/gallery" method="post" accept-charset="utf-8" enctype="multipart/form-data">         
<input type="hidden" name="form_secret" id="form_secret" value="69b784ffe46267db33f577a89613bd67" />
<input type="file" name="userfile" value=""  /><input type="submit" name="upload" value="Upload"  />
</form>
</div>

This part is for handling the events details (example only) :

<tr>
<td class="request_form_td">Event's Name</td>
<td>
<input type="text" name="event_name" value="" class="sf_field" id="ename_field" />         
</td>
</tr>

<tr>
<td class="request_form_td">Date</td>
<td><input type="text" name="date" value="" class="sf_field" id="date_field"  />                    
</td>
</tr>

Thus, how could I combine those two forms so that user only need to click one submit button only and both the details will be inserted into the database?

or if it is possible, how could i let the user first upload the picture by letting he/she clicking the upload button, and then fill in those other details.And only after that, the user could click submit and submit both of the data together.How could i achieve this?


Thank You for helping :)

  • 3 Contributors
  • 2 Replies
  • 821 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by tomato.pgn

Dani AI

Generated

Two common, practical ways are already in this thread: a single multipart/form-data form (simplest and atomic) or the upload-first flow ( and both outline the latter). The choice depends on UX: use a single form when you want one submit to create the event and file record together; use upload-first when you need immediate preview, cropping, resumable uploads, or to reduce server work on the final submit.

Server-side checklist (practical, minimal overhead):

  • Validate the upload: check PHP upload error codes, enforce a size limit, and never trust the client MIME. Use server-side image checks such as finfo or exif functions to make sure the file is really an image.
  • Store metadata in DB (original name, stored name, mime, size, dimensions, created_at). If you use an upload-first flow, insert an image row with a short TTL/pending flag; final submit links the event to that image ID.
  • Use a secure, unpredictable stored filename (cryptographically random or UUID). Prefer storing files outside the webroot or disable PHP execution in the upload folder.
  • Treat DB and filesystem operations as separate steps: on failure, roll back the DB or delete the stored file. Add a cleanup job to remove orphaned temp uploads.
  • Always use parameterized queries (PDO) and server-side validation for all text fields (dates, names).

UX and scaling notes:

  • For preview-before-submit use the browser File API or an async upload that returns an image token/ID which the final form includes as a hidden field.
  • For larger scale, consider object storage (S3) with signed URLs rather than local disk.
  • Add CSRF protection and rate limits to upload endpoints.

Authoritative references: PHP file uploads and finfo_file. These points expand on the options discussed above and help avoid the common pitfalls people run into when combining image uploads and form data.

Recommended Answers

All 2 Replies

Member Avatar for codewall

You can create database table that have id,image and details, first upload the image first and insert into database table. Since the image have its own unique id you can query the id and assign to hidden textfield in next form(form detail), with this form you can update(insert info) the database table using the image id. hope its help. try this post about image uploading, hope it helps also. http://codewall.blogspot.com/2011/01/this-simple-tutorial-is-about-inserting.html

Member Avatar for tomato.pgn

Ya that's in that way you can do work...i.e. first uploading image and then if you want to insert the image and textfield record....you can do that and save the record in database.....
Check this as an example..

<html>
<head>
<title>
Voting
</title>
<style type="text/css">
div.header{
padding: 10px;
position :absolute;
width :780px;
left: 50px;
height :60px;
text-align: center;
border :1px dashed orange;
}
div.left {

padding: 10px;
position: absolute;
left: 50px;
top: 100px;
width: 500px;
height: 400px;
border: 1px dashed orange;
}
div.right {
padding: 10px;
position: absolute;
left: 580px;
top: 100px;
width: 250px;
height: 400px;
border: 1px dashed orange;
}
</style>
</head>
<body>
<div class="header">
VOTING SYSTEM
</div>
<div class="left">
<form action="partyshow.php" method="POST">
Party Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="party"><br/>
Unique Reg number &nbsp;<input type="text" name="u_reg"><br/>
Party Symbol &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input  type="text" name="sym"><br/>
Party Type &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="type" style="height: 22px; width: 145px">>
<option>National</option>
<option>Local</option>
<option>Others</option>
</select><br/>
<center>
<input type="submit" value="Submit">
</center>
</form>
</div>
<div class="right">

<?php
//51
echo "Party Symbol<br/>";
if(isset($_FILES["file"]["name"]))
  {
  if (file_exists("./images/" . $_FILES["file"]["name"]))
      {
      echo "<img src='"."./images/" . $_FILES["file"]["name"]."' width='100px' height='100px' border='2'>";
      }
    else
      {
      move_uploaded_file($_FILES["file"]["tmp_name"],
      "./images/" . $_FILES["file"]["name"]);
      //echo "Stored in: " . "./images/" . $_FILES["file"]["name"];
      echo "<img src='"."./images/" . $_FILES["file"]["name"]."' width='100px' height='100px' border='2'>";
      
	}  


   }
else
{

?>
<img src="./images/errer.jpg" width='100px' height='100px' border="2">
<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file" id="file" value="upload"><br/>
<input type="submit" value="submit">
</form>
<?php
}
?>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.