I have created a script to Upload a file using PHP. I have also added file validation checking for File size & File type. But the scenario here is, the Form contain 10-12 Text boxes & a File upload box. So whenever someone fill the complete form & submit and they get File upload validation error, they get back to the Form with the validation error message. But the form gets empty as obviously it get posted on server side.
Is there any way to do the file upload validation without reloading/refreshing the page ?
I strongly recommend this plugin for file uploads. http://malsup.com/jquery/form/
It will allow you to verify the file, and if theres an error you can use json to determine whether the file is valid or not. I use it in all my projects, it's fantastic.
EDIT: Also it allows you to submit files without page refresh, which is the most important part.
You can use ajax:
1) when submit an ajax synchrounous call send the form content to the php server page
2) the php page validates the input
3) if return is "false" (error in validation) the javascript that executed the call sympli insert into the html of the page a proper message. The form stands filled in with the values of the user
You can use $_POST array for the posted values from the form . You should have write form method as POST
Also the same way you can ajax form this will not loose any of your data and page will not refresh as well
Related
I have a form that contains both data inputs and file inputs. Now i want to upload files selected right after selection without submitting the form, because form submit will send other data. The reason that i want upload files before submitting form is saving the time, so when the user is filling the form, files will be uploaded.
As i understood i need to use iframes, because ajax can not simply send files, and formData is not supported in IE. But i couldn't find a clear example of it.
Any idea how to do it?
Okay so here's the scenario:
User is presented with form that contains file inputs.
User submits form.
Form does not pass validation/verification for one reason or another.
User is presented form with errors highlighted.
File inputs are now blank.
Question:
Is it possible to re-populate the file inputs with the paths to the files the user originally selected. A PHP solution would be ideal, but I'm also open to JavaScript solutions as well.
I think the short answer here is no. You can't repopulate file upload fields. However, you can work around it.
If a file has been selected and the form submitted, then you've already received the file. What you can do is keep a reference to the file on disk and put that in a hidden field and show a message to indicate to the user you still have their file uploaded so it does not need to be replaced/re-uploaded. When your form gets submitted again without a file, you can check for the hidden field value and use that to get your local copy of the file they uploaded in their last attempt.
The other way to do this is to either submit the form via ajax (using either flash or the iframe method for the file upload) or to do an ajax call to validate the form first, and then only submit as normal if valid (thus no form reload, no loss of file upload field data).
I solved this problem by let user pick upload file as the last field before submit the form ^^
We have a form where user can submit a message, as well as upload 1-10 files (not displayed in-line in the message, but as links at the bottom of the message).
This is all working fine so far... using two separate forms.
1 x form (MAIN/parent form) is the message details form (name. date, message..etc)
1 x form that is under this form, and if for handling the selected/uploading of user selected files.
This is done through a hidden iFrame and dedicated php script, and returns a list of uploaded file names/paths back to the MAIN/parent form (as hidden fields).. so when the MAIN/parent form is submitted.. all the data get saved to the database at one time, and the image/file uploading event/portion wont cause any loss of message data if there is timeout or other uploading error.
This is all working so far.
What I am not clear about or stuck on... is that for each message post the message 'owner/poster' can go back and edit the message..
This should include letting the user edit the files uploaded/attached to the post as well.
Which I'm not sure how I should be handling? or a nice and easy to do this?
I'm guessing I'll have to do the 'two form' approach I use for the initial posting/uploading of the message?.. but how can I pre-populate the file input fields? DO I just pre-populate the value with the file name/path form the DB.. ?
As we know you cannot create a file download via ajax.
you can however submit a form which will create a download prompt.
I am generating quite a big file when the users presses a button so I display a "please wait" style message.
My question is,
How can I detect when the form submission has finished, hence the dialog box has been shown?
(this is to hide the message)
Place a redirect when form submission is successful. If redirect will hit the file which browser can't display - it will start download.
In my case I return JavaScript code from form submit handler, which form widget eval()s. That code could be a redirect to the fine which was just produced by the back-end.
Maybe my blog post about AJAX Forms best practices will be helpful:
http://agiletoolkit.org/blog/forms/
If you wish to keep things simple, then:
add form.onSubmit handler, it should prevent default action, collect form data and send to server. You can use some ajax submission plugin for jQuery.
server should parse data, prepare file and send back the name of the file to browser.
your JS code gets executed when transfer is complete (callback) and does redirect to the file through document.location.
In Agile Toolkit it would be as simple as this:
$f=$p->add('MyForm');
if($f->isSubmitted()){
$f->js()->univ()->location(prepare_file($f->getAllData()))->execute();
}
Maybe you should try something like this
http://www.iamkumaran.com/xdownloader-a-flash-javascript-library/
See the demo how file download works and I hope it may help you.
I have a cForms II contact form set up. It works perfectly if I just want the results emailed to myself (default behavior).
I now have a custom PHP file that will take the POST data from the form and submit it to an external database for me. However, when I set the Alternative Form Action page to this PHP page, clicking the Submit button just causes the form to hang.
How exactly do I pass the form data to my own PHP file while still keeping AJAX enabled (so form validation works)?
Cheers!
Ah, I figured it out!
To do post-processing, you don't redirect the form submission to your own file.
You simply modify the my_cforms_ajax_filter($params) function in the my-functions.php file (in your cForms directory).
This function is executed after form validation and before any data processing takes place (so you can intercept the form data).