I have a form with series of 3 file upload fields, each of which has a related hidden "todo" fields.
The file upload fields start greyed out and a user can either upload a new file, remove a file if one has previously been uploaded in that position or leave it unchanged (i.e. use the previously uploaded file or leave it blank).
The todo fields should store what is to be done with each file (i.e. 0=upload new, 1=delete existing, 2=leave unchanged).
I have a series of buttons next to the upload field. One for "upload new" (which enables the file upload field and (should) set the related todo field to 0; one for remove (which disables the file upload box); and one for "leave unchanged" (which also disables the file upload field).
I've found the name="blah[]" technique for creating arrays when the form is posted to a PHP document which makes looping through the files nice and easy. The trouble is that I need to edit the value in the related "todo" fields and if they're all named "todo[]" then I can't refer to one specifically...
The code is something like this:
<input type="file" name="file[]" />
<input type="hidden" name="todo[]" />
<input type="button" onclick="enableFileField('file[]', 0)" value="Upload New" />
<input type="button" onclick="enableFileField('file[]', 1)" value="Remove Current" />
<input type="button" onclick="enableFileField('file[]', 2)" value="No Change" />
I'm pretty sure I'm missing something and that this is actually quite simple...
You can give the fields ids in addition to names. The name would be used for the post to the server, but the id can be used for referencing the input in JavaScript:
<input type='hidden' id='todo_0' name='todo[]'>
<input type='hidden' id='todo_1' name='todo[]'>
In JavaScript, document.getElementById("todo_0") will give you the first todo field. Be sure to keep the ids sufficiently different that Internet Explorer doesn't get confused (it has namespace bugs around id and name [it tends -- completely incorrectly -- to put them in the same namespace]).
You could increment a counter in javascript as you add more fields, so you create todo[0], todo[1], etc. This wouldn't change how PHP interprets it.
Edit:
Realised you aren't creating fields on the fly in javascript, but the naming still applies
You could give each of the todo inputs a unique ID that you remember, or, I believe you can use
<input type='hidden' name='todo[0]' />
<input type='hidden' name='todo[1]' />
etc. in your HTML.
If I understand what you are asking, you want to be able have to multiple fields that will be used to upload a file. For example, if you have 3 files to modify, you would have three hidden todo fields?
A quick and easy solution would be to keep a hidden field for the number of files such as:
<input type='hidden' name='numFiles' value='1' />
and update that as you add or remove files with javascript. Then as others have suggested, give each todo a unique id as such:
<input type='hidden' name='todo1' />
Now you can easily find a todo because each file will have a unique one and you will be able to update it from there.
Once you post the form, you can pull the number of files there will be from the numFiles field and loop through all the todo's with a number appended to the end.
Related
I have a file input element that is used to upload a profile image to a user profile page. By default browsers only allow this element to upload one file unless you add the multiple attribute.
I'd like to set a back up in the PHP though just in case someone decides to add the 'multiple' attribute in the HTML.
I thought assigning the $_POST superglobal to a variable and having an if statement saying if this value is greater than 1 would be prevent this, but it doesn't?
What is the best way to approach this? I've tried various things such as the count() array method but can't seem to find a solution to what seems like a very simple problem?
if(isset($_POST['submit-profile-image'])) {
$profileImage = $_POST['submit-profile-image'];
if (isset($profileImage)) {
if ($profileImage > 1) {
$error[] = "You cannot upload more than one profile image";
}
}
// ALL OTHER CODE
}
I've also tried using the $_FILES superglobal and counting the instances of the $_FILES['profile-image']. This encounters a different problem in that it blocks more than one file upload BUT also blocks single file uploads (and I don't understand why)?
if(isset($_FILES['profile-image'])){
if(count($_FILES['profile-image']) > 1){
$error[] = "You cannot upload more than one profile image";
}
}
You can't prevent a user sending multiple files. All you can do is defend against the possibility, and fail gracefully.
Let's assume that your HTML includes this <form>
<form method='post' enctype="multipart/form_data">
<input type='file' name='uploadFile'>
<input type='submit' name='submit'>
</form>
When the user selects a file and clicks submit the browser packs up the file and sends it, PHP unpacks the file to the server disk, and then presents the file details to your program in the $_FILES['uploadFile'] array.
If we assume that the user edits your HTML and adds multiple then the browser will pack up the files and send them. PHP will unpack the first file and add its detail to $_FILES['uploadFile'] as before. It will then unpack the second file and place its details in $_FILES['uploadFile'], overwriting the first file. Your program sees only one file, knows nothing of any other file, and carries on.
To get two files your user will have to change the name of the file input to use array syntax, so lets suppose he changes the line to
<input type='file' name='uploadFile[]' multiple>
Now PHP unpacks the file details into a set of arrays. Instead of having $_FILES['uploadFile']['name'] containing a string with one filename, it becomes an array of strings.
It is likely that your code, expecting a string, will choke on an array and fail in some unexpected way. You can check for this condition with
if (is_array($_FILES['uploadFile']['name'])) {throw new Exception("Too many files");}
So, our user, determined to force this extra file on you now adds a second <input> to the form:
<form method='post' enctype="multipart/form_data">
<input type='file' name='uploadFile'>
<input type='file' name='uploadFile'>
<input type='submit' name='submit'>
</form>
The second file overwrites the first as it has the same name. Your program is none the wiser and carries on with just one file. So the user changes the name on the second input:
<form method='post' enctype="multipart/form_data">
<input type='file' name='uploadFile'>
<input type='file' name='uploadFileB'>
<input type='submit' name='submit'>
</form>
You could check for this by looking at count($_FILES), but your program isn't looking for a second input, so it will ignore it anyway and carry on handling just the first file. If the user also changes the first name your program won't see any files, and if he reverses the names, your program will see just the second file and ignore the first.
Alternatively, set the PHP configuration value in PHP.INI:
max_file_uploads = 1;
If you do this, PHP will ignore the second and subsequent files. Your code will still have to deal with the naming issues. Setting this with ini_set() doesn't seem to have any effect.
When a form has multiple image inputs and the server side uses their names and/or values to distinguish which one was clicked, it works perfectly in FireFox. However, people often write the whole thing before finding out that HTML specifies that nothing has to be sent, and thus some browsers are not sending it.
It's not about sending any random object, but sending a pair as input_name=input_value. The best worst-case scenario example here would be what I've encountered: A list of elements all in one form and all accompanied by buttons with name="delete" value="<item_id>"
What can I do to fix this problem?
Per the HTML spec, clicking on an IMAGE input will return the parameters:
name.x=x-value and name.y=y-value where "name" is the value of the name attribute
with x-value and y-value corresponding to the click position.
Sure, the server code to deal with this will be a little annoying, but you could just check all the query parameter keys with a regular expression:
/^(.*)\.[xy]$/
to search for the IMAGE input keys to determine which IMAGE was clicked.
I tried with this sample:
<form action="#" method="GET">
<input type="text" name="t" value="Text here"><br>
<input type="image" name="a" value="1" src="http://sstatic.net/so/img/logo.png"><br>
<input type="image" name="b" value="2" src="http://www.gravatar.com/avatar/c541838c5795886fd1b264330b305a1d?s=32&d=identicon&r=PG"><br>
</form>
And I get the following urls:
FF 3.6: x.html?t=Text+here&b.x=19&b.y=17&b=2#
IE 8: x.html?t=Text+here&b.x=22&b.y=18
IE 7: x.html?t=Text+here&a.x=185&a.y=51
Opera 10: x.html?t=Text+here&a.x=107&a.y=53#
Chrome: x.html?t=Text+here&b.x=20&b.y=17&b=2#
So it seems that all the browsers are sending something image related, even if it isn't the image name directly. Since you need to scan for all the image names that you expect to see you can just scan for imagename.x instead. This seems to be how the spec indicates it should work.
The problem was half solved up to now: like here
But it didn't allow to get the value!
The correct answer is:
$('input[type=image]')
.unbind('mousedown')
.mousedown(function(){
$(this).after('<input type="hidden" name="'+$(this).attr('name')+'" value="'+$(this).attr('value')+'" />');
});
This code creates a hidden duplicate of the input when user starts clicking it. The unbind('mousedown') is to secure it happens once even if You put the code in multiple places in a weird application and it might be called more than once.
I recommend putting it in $(document).ready();
I think I am/was having a similar problem. I wanted to click on an thumbnail and have it enlarged on a different page. I was trying to do this with PHP alone but I finally had to use the tag with the . Worked great for FF3 and safari but the INPUT IMAGE values did not post for IE9 or FF9.
My work around was to put each image in its own form and then also use a hidden input to send the needed data.
<table>
<tr>
<td>
<form method="post" class="form_photo">
<input type="image" name="img_photo" value="does nothing in IE9 or FF9" />
<input type="hidden" name="photo" value="nameoftheimage.jpg" />
</form>
<form method="post" class="form_photo">
<input ...>
<input ...>
</form>
<form> ...
</td>
</tr>
Then I discovered the forms displayed vertical, making it very odd. CSS to the rescue.
.form_photo { display:inline; }
seems to have solved the vertical problem. Now the user can click on the thumbnail and the value now passes in all the browsers I have access to testing.
Using the type="image" is problematic because the ability to pass a value is disabled for some stupid lack of reason. Anyways & although it's not as customizable & thus as pretty, you can still use you images so long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
Is it possible in php to include a forms value into the action redirection?
For example:
<form method='POST' name='Select' action='customer.php?CID=xxxxx'>
<input type=text width='5' name='searchVal' />
where xxxxx is the value entered into the form.
I've tried a number of different ways and I'm just not figuring it out! (Still sort of new to php) Any help would be appreciated.
It was looking like I would have to use $_POST and $_GET. A little more information might be in order... customer.php displays a list of customers in order by ID, name, etc. The user currently clicks on the customer ID that they want to display the details for. I'm trying to add a box where they can just enter the customer number to get to the details quickly, but I still want to have the listing displayed. From what it is sounding like, I will have to do this as two separate programs...is that true?
How about this:
<form method='POST' name='Select' action='customer.php'>
<input type='hidden' value='xxxxx' name='CID' />
<input type=text width='5' name='searchVal' />
...
</form>
You are free to add as much hidden values as needed.
Note, that you can even use PHP-like array notation_
<input type='hidden' value='xxxxx' name='CID[1]' />
<input type='hidden' value='yyyyy' name='CID[2]' />
At the PHP-side, access those values using this syntax:
$_POST[ 'CID' ][ 1 ]
$_POST[ 'CID' ][ 2 ]
UPDATE-1
Ah, you want to use a user-entered values to the Action URL just before the form gets submitted?
In this case you need to use JavaScript. Access the DOM to change the Action URL.
But let me ask, why you need to post a form value additionally as a parameter of the Action URL?
UPDATE-2
You wrote: 'From what it is sounding like, I will have to do this as two separate programs...is that true?'
No, actually not. You can still use one customer.php which checks at its beginning, if it was called using a linked customer in the table element or a searched customer in the search field.
In other words: You don't need to prepare two scripts, but two forms for two purposes which call the same script customer.php.
You can include the required value in a hidden field in your form:
<input type="hidden" name="CID" value="xxxxx" />
The reason this is required is that you are submitting the form to your server via POST, but appending parameters to the URL requires submission via the GET method.
Not without a post to the server. The value in the form is filled in client-side, so it has to return to the server before you can add it to the action. (at least, if you want to use php).
You can either
add it after posting (might not be usefull)
use javascript
just not use the GET CID, but get it out of the POST in your customer.php script.
I got it finally! It's actually very simple!
In the body of the code I put this:
<form action='#_SELF' method='GET' name='Projected'>
<input type=text size=5 name='CID' value='' title='Enter Customer number to display' />
<a href='#' onclick='document.Projected.submit();' title='Enter Customer number to display'>Go</a>
And at the top of the code I just do a:
if (!isset($_GET['CID'])) { ...
It works exactly the way I wanted it to!
Thanks everyone for the help! I appreciate it! (And I'm learning more and more about PHP everyday!)
Im pretty sure you cant do that unfortunately
My PHP book gives a template HTML form for uploading a file:
<form action="upload.php" method="post" enctype="multipart/form-data"/>
<div>
<input type="hidden" name="MAX_FILE_SIZE" value="10000000"/>
<label for="userfile">Upload a file:</label>
<input type="file" name="userfile" id="userfile"/>
<input type="submit" value="Send File"/>
</div>
</form>
The book displays it as "Upload a file:" [textbox] [Browse...] [Send File]
I copied it verbatim, and the result I'm getting is "Upload a file:" [Choose File] "no file chosen" [Send File]
I'm wondering why the discrepancy exists. Is there a way around it? I'm using XHTML Transitional. No doctype is given in the book. But I doubt that's the issue.
The script I'm writing aims to take the file the user chooses, process it, and write the result into another file that doesn't exist yet. I'm asking this question because it would be useful to let the user more easily copy the initial file path/name, paste it into the other field, and just change a part of it.
(Also: why the difference between "Browse..." and "Choose File"? I tried manually setting the value of the "userfile" field to "Browse..." but nothing happened. This is less important but I'm curious nonetheless.)
It is probably showing a different browser and/or version.
It sounds like you are looking at it under Safari and the book has screenshots of IE, for example.
There are a few ways to get complete control of file uploading and the <input type="file" /> element. You can use Flash, or you can set the input to opacity: 0 and then position what you want beneath it.
Some time ago the browser engines took almost complete control over the input type="file" - fields, since it nowadays is regarded as a security issue. For example the days before that you could easily prefill the file input filed with some path and filename (e.g. something like /etc/passwd) and hide the field, so sending the form you would not remark that you're also sending the file...
That's why for example you could not preset the filename of such a field and that's also why browsers now all do their own thing with these special input fields.
As Alex said above, you could get around this, but it will be some hassle, because it would mean to "fake" the file input field.
I am working on an image gallery at the moment. When a user is logged in, an x appears over each image and a checkbox next to it to enable the user to delete that image. Only if the checkbox is checked will the image be deleted.
They are both in a (one for each image in the gallery), the small image "x.gif" is an input type="image" that submits the $_POST form. The checkbox inherits the name of the image and is to prevent accidentally pressing the x button and deleting an image.
The problem is that the checkbox name, upon posting it gets converted from (for instance)
"Image.jpg" to "Image_jpg"
When i test it with print_r($_POST);
Should I create code for replacing _jpg or _gif into .jpg and .gif after the post or is there a way to make it possible to use period signs in input names?
Any help is greatly appreciated.
This is standard PHP behaviour. More info here.
Doing a manual str_replace on _jpg or _gif is a bad idea because those strings could also appear within a file name:
winter_impression_jpg_strong_colours.jpg
In that case, the file name would become unusable.
You could alternatively either
Mask the dots using some other combination of characters (e.g. ___DOT___)
Change the logic: Have numbered fields (checkbox_1 checkbox_2....) and store the name in a separate field (checkbox_1_name = "image.jpg")
I would recommend changing the structure of your form to have a field for confirmation (the checkbox) one field for the name (hidden) and your submission button (image):
<input type="checkbox" name="confirmation" />
<input type="hidden" name="target" value="file.jpg" />
<input type="image" />
Rather than using input type="image" use the normal img tag and place the x image in that and then modify your code as per those changes otherwise you can simply replace the underscore with a dot.