How to prevent an image to upload BEFORE submitting the form?

Hi everyone basically I have created a simple form which works fine.
I wanted to add an upload input to it but I can’t manage to make it work.

The upload script on his own works fine but not within the form.
In fact, the form is submitted as soon as I upload the image instead of waiting for me to click on the submitting form button. The outcome of this is that nothing worked. The data are not added to my DB and the image is not uploaded to my folder.

Any ideas?

EDIT

Here my full form within the input field it it.

<form action ="addOutfit.php" method="post" enctype="multipart/form-data"> 
    <div class="form-group">
  	<label for="title">Title</label>
  	<input type="text" class="form-control" name="title" value="">
	</div>

	<div class="form-group">
  	<label for="description">Description</label>
  	<textarea class="form-control" rows="3" name="description" value=""></textarea>
	</div>

     <form action="upload.php" method="post" enctype="multipart/form-data">
      Select image to upload:
      <input type="file" name="fileToUpload" id="fileToUpload">
      <input type="submit" value="Upload Image" name="submit">
    </form>
 
	 <button type="submit" class="btn btn-default" name="submit" value="send">Send</button>     

</form>

Thanks a lot.

Have you tried putting the button within the form, ie before the <form> tag?

Thanks I tried but it didn’t work.
You made me just realize though that I have actually included a form in a form… I guess this is not allowed, maybe that’s the problem? I have edited my question with the full form.

Ooh, no, not a form within a form! I kind-of understand why you’re trying that. I don’t think you can prevent a file attachment from being uploaded (although I may be wrong). The thing is to check the file once it’s uploaded and if it doesn’t make the grade (whatever that may be) then you simply don’t save it and give the user some sort of error message.

Thanks for your reply but I am not sure to understand… Maybe my question is not very clear too…

I already have an upload.php file which works fine, if the file doesn’t meet the requirements It doesn’t get uploaded…
My question is how can I do to include an upload input field inside a form?

In fact I need the image to be uploaded at the same time as the form is submitted because the file gets renamed with the id of the item submitted through the form so I really need to have just one form…
Is it possible to give the form 2 actions?
For instance action=“addOutfit.php” “upload.php”

Basically, you just want one form and one submit button. I haven’t had time to check your code, but removing the inner form tags and the second submit button should do the trick I think.

Thanks I managed to make it work in the end. I simply included my upload.php script in the same page as my form.

1 Like

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