How to create a PHP parseable input using AJAX? - php

I'm creating an admin space for a local news company. The structure of an uploaded news is the following:
title
date
picture
text
They asked me to let them change the uploaded picture from the admin space, in case they uploaded a wrong image.
Therefore when a user clicks "EDIT EXISTING NEWS", the page displays the above mentioned parts (title, date, picture and text) in the appropriate input (text, textarea) and shows also the picture.
I created a little RECYCLE BIN icon under the picture, which if clicked, does the following:
using AJAX replaces the displayed picture with a FILE INPUT.
However this newly created input type="file" name="picture" isn't viewable, parseable, processable after SUBMIT. Simply I can't view the $_POST["picture"], telling me it isn't set.
What can I do to be able to see it?
Please help!
Many thanks!
Huba

Data uploaded with <input type="file" ... /> is not accessible through $_POST, but through $_FILES (even though it's received through a POST request). See handling file uploads.

Related

Server distinction among deleting and preserving an input type file

I am using an input file type inside a form:
<input name="upfile" id="upfile" type="file" >
through which I am uploading images to a MySQL BLOB field of STUDENTS table. So far so good. With another php file I am retrieving and presenting in a form, data from STUDENTS and the user has the possibility of directly changing some of this data and sending it back to STUDENTS.
In case the user uploads (client side) a new image inside "upfile" , I can manipulate it (server side) with $_FILES array. In case the user removes(client side) the existing image, $_FILES has no content at all. However, the same happens in case the user does nothing with the existing image; $_FILES has no content again.
My problem is I cannot find a way to distinguish among erasing the existing image and doing nothing with it, since in both cases $_FILES has no content. So, how the server will know if the user preserves or deletes the existing image as to act correctly?
Thank you very much
How does the user know if they are deleting or not-changing the image? Give them a "delete image" checkbox or something so that they, and you, will know what should happen.

PHP: problems with upload files while refreshing page

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

Echo uploaded file value in the form using PHP

I have got a simple form which has few fields like name, address, etc and two fields for uploading images and finally two buttons, one for preview and the other is a final submission.
I want to make the form much more user friendly, so that when the user clicks the preview button, I show a small prview and still if the user has to makes some changes in the fields which he has already entered, I want to the show the form echoing all the values which the user has entered.
In case of text field I am just using this piece of PHP code inside the tag to echo the name
<input type="text" name="name" value="<?php echo (isset($_REQUEST['name']) ? $_REQUEST['name'] : ""); ?>" />
and so for other fields in the form.
My question is that how can I echo/show the uploaded file names even after clicking the preview button, which in my case does upload the two images into the specified directory, that is I can see that the uploaded images are stored in the specified directory. In case if the user wants to upload only one image, then he can see the names of the already uploaded images in the output form, so that the user doesnot need to choose both the fields for uploading the images one more time.
I hope I explained it in a understandable way, in case if something is unclear then please let me know.
P.S. A small example would be good to follow.
Regards
Maks
Unfortunately if you're using the file input type you cannot modify their values in any way. This is done for the safety of the user so that you don't specify a default file to upload from the user's system (you could theoretically upload a sensitive file if they didn't change the field from the default).
You could try using a text input field that's read-only and shows the url to the file the user uploaded. An edit button next to this field could create a file upload field and allow them to upload a new file.

Transfering a uploaded file from page to page

My client wants to have a 3 page form. The first page allows the user to enter data including a uploaded file. the second page confirms this data. and the third page submits the data to the database and directories.
Via post, I can keep saving the data to a hidden input fields, thats no problem. My problem is the uploaded file. how do I hold that document from page to page ? I am using Cakephp but any advice would help, thanks
You can always just create the illustion that the form is utilising three different pages. Use AJAX to accept and validate/request the user confirm their submitted data. If in this view they accept it initiate a POST to submit all that data.
You really don't need three physically different files to achieve this but you can still let it appear in three stages to keep your client happy.
You just upload the file to temp directory and keep the value in hidden variables just like other form data . If form successfully submitted then the image copy to desired location other wise delete the image
You can easily fake these 3 pages using CSS. Or even 2, as "third page" is actually a server script which has nothing to do with pages in the browser.
Just make your form, then put an event on the submit button which changes divs to whatever "confirmation page" he wants. and then actually send the form using a button on this page.
that's all
An uploaded file is always held temporarily. The server env var should tell you where it is. In Ruby's rack it is stored in the params var. So I guess there is a similar params var in php which has a hash with all the necessary information.
Since the file would be uploaded on the first step, one option is to put the file's location in a hidden input field along with the rest of the data (either there, or put it in the session). With CakePHP, if your file field looks somewhat like that:
<input type="file" name="data[User][image]" id="UserImage" />
Then you will be able to capture the location through
$location = $this->data['User']['image']['tmp_name'];
Which will correspond to something like /var/tmp/xxxxxx
On the last page, if the user confirms all the data, you just use move_uploaded_file() to put the file wherever you want on the server.
move_uploaded_file($location, '/new/location');

PHP File Upload + jQuery

So I have my upload script working just fine, but now it's a matter of making it look the way I want for my layout.
<input type="file" name="userfile" id="userfile"/>
This obviously shows a textbox with a Choose File button. What I really need is my own custom button (which will ultimately be an image) that upon successful file select (not upload quite yet) triggers a jQuery event to show a div. I do NOT want the filename textbox to show.
Basic steps outlined below.
User clicks on image button to upload their file
User selects file
jQuery shows a div with more fields
User clicks submit and file is uploaded
File upload elements are notoriously difficult to access for security reasons. I think the best you can do is attach a handler to the change event of the file upload that displays the div if the file field's value is different from null.
A custom button is out of the question. To get that, you would have to resort to a file upload alternative like Flash-based SWFUpload.
There is a solution for this using jQuery here. It enables you to use an image for the upload button, and with a little customization I believe you could get it to do what you're looking for.
The few solutions to this that I've seen actually hide the upload input field and then display their own custom button. As the mouse moves over this custom button they use a script to reposition the input element beneath the cursor. Quite a lot of work.

Categories