So I have this form that needs to be filled out by the user. In the form, there is a place to upload an image. Currently, the upload takes place when the user hits "Submit" at the end of the form, however, that causes an up to 30 second delay (due to image size).
What I'm wondering is if there is a way to start that upload while the user is still filling out the form, rather than selecting the image, finishing the form, then uploading it. (This way it really cuts down on the time needed, per form)
The form itself already has a dozen other things it's doing to submit the information to the database and such, so i've been looking into using javascript with an onchange event to get into the javascript, and perhaps from there moving back into php to perform the upload, all while not reloading the page.
Any ideas or suggestions?
There really aren't many ways, the most common one is to use an iframe. Something along the lines of: http://valums.com/ajax-upload/
This has worked very well for me:
jQUploader
Related
I'm Just working on a simple form in PHP but i have a problem, i have many fields in my form and one of these is a file input type, if there are no issues with the file uploaded but an error occurred on another field, How can I ( in the refreshed page) maintain the file previously uploaded?
Edit: We understood what you want, but this is not possible, filling the file-input again automatically after validation. The user has to select his files again, this is how browsers works, for security matters.
Well, since you know what you're doing, you dont really need a script, you really need some help/ideas on how to approach what you want. What I would do is:
- Save the path of the uploaded file in session user data variable, like $_SESSION['uploaded_file'], and retrieve it after error.
- Use AJAX, different form, to upload the file before user hit submit.
Obs: If the user gives up on completing the form even though he uploaded a file, his files will be on your server, 'stealing' some useful space. So I don't know if this is a really good approach, but a good one, would be using different forms, disassembling the upload action from the form's informations.
Real example: If user is filling out a form to be a member of your website/forum/whatever, just let him upload the profile picture later, only when his account is really active. You could be saving some trouble.
Another one: If the user just wants to change profile picture, also make the uploading action to have no influence (and vice-versa) with his profile informations and etc. This is a trouble-saver, and a better approaching solution.
But, if you're like uploading a photo to a gallery and setting description and etc for the picture, then you could be using of a more elaborated validation, using javascript/ajax to check if fields are being filled correctly before submiting data.
On your upload code first save the values into SESSION like:
$_SESSION[name] = $_POST[name];
then print it into your INPUTS like:
<input type="text" name="name" value="<?=$_SESSION[name]?>">
Don't forget to use session_start().
Or look for javascript alternatives
Having an interesting time trying to get an upload to work. So here's the thing: I have a form that uses some javascript to pretend it's 3 separate pages. It's all one form, but as you click "next" one section fades away and another section is shown. The last page is the page where you can make the most errors....if you miss a required field or you're trying to sign up with an already used email address the app will kick out an error, but it has to do a:
redirect(/path/to/app#!section2);
to show the correct page where the error is located. I can get all the data back, by quickly putting all the variables into a flashvar. So IF this redirect were to happen I have all the data to show back in the form....except....if you tried to upload a photo, I've lost the photo upload. My first thought was to try and save the $_FILES data to a flashvar, but I don't think that will work.
Anyone see this before? There has to be a way around this.
Thanks
I would make the entire process ajax based so you wouldn't have to worry about preserving data through redirects. You could do all of your validation in your controllers as usual and then either return json or javascript code back to the browser to parse and handle what to do next.
I have a page with a form on it that the user visits to fill in some info before he signs up for a profile. Underneath the form is a preview of what the profile will look like. I have some javascript so that as the user types into the boxes in the form, the corresponding bit of their profile fills with whatever they're typing. IE they type into the 'title' form input and it will appear in the id="title" div below.
In that form I also have a field so the user can upload a photograph. When the user chooses the pic he wants to upload and closes the dialog, I'd like a resized (so that it fits my max height/width requirements) image to also appear in the preview bit below the form. All this would happen before the profile form had been submitted.
Whats the best way to go about this? I've done a fair bit of googling and while there's plenty of plugings they all seem to either do something far too complicated or miss something out. Can anyone please tell me the best way to handle this?
Thanks :)
If it makes any difference I'm using cakephp.
Side question - is there a way to make sure that when the choose file dialog opens, there is only the option to select image file types. IE all the .doc .xlt etc aren't there?
As to your first question, you'll have to upload the file. So you'd upload the image and store it in a temporary location that you can still stream back in an IMG element. When the user saves the form, you can then discard the temp image. You'll probably also need some sort of cron/scheduled task that cleans them up if folks never save the information and just leave.
As to your second question, nope. You can check it on the client after they have selected a file, but then I strongly recommend checking it again on the server.
Is it possible to reload a form after 'file-input' change?
I have a form where the user can chose an image for upload. I also have a php script which displays that image resized.
I only wonder if it is possible to reload a form OnChange of the file-input and then call the php code which uploads the picture, so that the user can preview it?
Does the php file have to be the same file as in the ? or can I call another php file for the image upload only, with javascript?
NOTE: The user will be able to upload multiple pictures...
Please guide me in the right direction with as much input you can...
UPDATE:
No ajax... can this be done without it? No problem for me if the page reloads, but with the image this time... can it be done?
Thanks
It is possible of course, as with all programming, in most cases if you can think it it is possible.
From what I see you are looking at a form that will update the result of an upload via AJAX. You will need to look at javascript frameworks like jQuery to accomplish this, and you will basically upload the image/resize it, and display it to the user all without a page reload.
Data in the form will be updated with an ajax call coming back from your PHP 'image resizer'
EDIT
Examples of ajax image uploads that may help:
http://www.phpletter.com/Demo/AjaxFileUpload-Demo/
http://pixeline.be/experiments/jqUploader/test.php
You have two issues here.
1) Multiple uploads, so the preview will need to be in a table for each upload. The user will click submit or send and the browser will send it to the server. To do this behind the scenes you will need to find a php script that will help you do this asynchronously.
One I found useful was: http://www.anyexample.com/programming/php/php_ajax_example__asynchronous_file_upload.xml
2) In the iframe response you can then pass back the urls for the thumbnails. This could be the id of each file. The best bet is to create an image tag that calls a php script, which will return the image directly, as a thumbnail.
<img src="/imageview.php?id=3&mode=thumbnail" />
This way you don't have to save the thumbnails, but the user will be able to see it immediately, as you update the src property with the new url.
When you submit the form, the entire page reloads. The only way around this is to put the upload form in an iframe. You cannot upload an image without submitting the form, and you cannot upload a thumbnail of the image, you have to upload the entire image, unless you use flash, silverlight or java.
<input type="file" name="…" onchange="this.form.submit();">
You will need to be smart about tracking which images have been loaded with a given form session and storing a reference to them in hidden inputs.
I have a file field in my form.
I want the user to be able to choose an image, press OK, and then without submitting the form, preview the image in a smaller resized way. If everything is to the satisfactory of the user, then hit submit and the image as well as the form is submitted...
How would you good professionals do this basically?
Thanks
You need to submit at least a form to upload the file and display it. You can simulate an Ajax upload by using an iframe.
You might want to have a look to the following:
http://www.atwebresults.com/php_ajax_image_upload/
I think the best method would be:
The user presses the OK button, an AJAX request is made in the background to submit the form which would upload the image in a temporary location, without the user knowing. The request would return to you the temporary files location.
Then you can display the resized image to the user and if they are satisfied they can choose to submit the form and upload the original image.
Here's an article which also might help you out
When you've uploaded the image once, there's no point uploading it a second time, you may as well keep the copy already on the server, so long as you have some way to tie it back to the form once that's submitted, or removing it if the form is never submitted.
Cleaning up uploaded images is a problem you will have to solve anyway. Once you've uploaded the image, the server will have to keep it around, as the browser will have to request the image in a second request to be able to display it.
I would do this then:
Have a separate form for the image(s), make sure it includes some id field so that you can tie them all together.
Have the image(s) form automatically submit using AJAX as part of an onchange event on the file field.
When the AJAX call succeeds, add an img element to your page to display the uploaded image.
Submit the rest of the form separately.
Cleaning up uploaded images that you don't want (say the user adds a couple of pictures, and then closes the browser without submitting the main form), is a separate issue, and how you deal with it will depend on what sort of application you are developing.
You can use the tag for this.
Basically, you put your upload field to an iframe. When a user uploads an image, the iframe gets reloaded, but not the whole page, at the mean time on the server side you peform resizing.