I want to make a form in which when I upload my text file it will appear in the textarea box (the content of the txt csv file to be printed in the textarea box). I have done a web search but didn't get any idea.
The new JS File API can help you.
If you dont need the file uploaded on your serveur, then take a look here.
You'll just need to adapt it a little to make it fill the value of your input box (maybe you should use a textarea instead of a simple input here).
If you need upload:
How to handle file upload: http://www.w3schools.com/php/php_file_upload.asp
How to read file content and put it on a string: http://php.net/manual/fr/function.file-get-contents.php
If I was you, I would make two scripts. The first one handle upload and redirect to the second one, wich show a page (or the same form as the previous) with the text field updated.
Related
I'm trying to populate a second file input with the selected file from the first.
I've looked into this and, for security reasons, it's not possible to get the full path from one file input - only the file name. This isn't of any help as the other file input won't be able to upload as it won't be able to find the file.
Example:
<input type="file" id="1" /> - User browse the file by clicking on this input
<input type="file" id="2" /> - This input gets the value from the other file input
The reason I want to do this is because I am building a web app in Wordpress that allows users to upload a photo to Facebook but I also what the same photo to be attached to the wp post. I don't want them to have to select the file for each input.
Is there any way to achieve this using PHP and jQuery?
Due to security restrictions, you cannot programatically set the value of file input type fields, it is not possible.
Also, I don't see why you need to upload the same file twice? If you wish to save the same file in multiple locations, you can copy the first file into the second location too, isnt it ?
Please rephrase the question explaining why you want to upload the same file twice so a better answer can be given.
It sounds like you are approaching this the wrong way. Modern browsers prevent you manipulating the value of file inputs for security reasons. What you are suggesting is not possible.
You should be uploading the file to one single location and the sending it to Facebook/WordPress once it is uploaded. If the method of submitting the photo to either must be via POST, then you can use cURL to send that file.
Here is an example: Send a file via POST with cURL
so basically I have a multistep form with X steps.
In the first step, I offer a file upload form to the user.
This just behaves like a normal HTML file uploader:
User selects file
File Box, shows pathname
If the user clicks on "next" the file should not be uploaded.
If the user reaches the last step of the form, the files he/she has choosen in step-1 should be uploaded now.
I have no idea if this is actually possible. There are also a couple of problems
The value from input type="file" gives something like C:\fakepath\filename.ext
Saving the above in a session for later upload does not make sense.
How can I get the uploader to work in the last step?
Yes, this is actually possible, and saving data between pages make sense, otherwise, how could you remember what he sets in the file input?
If it is a simple HTML page, I assume your are using PHP. Register files in a temporary variable or session, put it in a hidden input in the HTML code if you don't use session.
At the last step, set your files and upload it.
Good luck.
I am building a form right now that returns the user back to the form itself if there is missing fields or fields are entered wrong. One of the inputs is a image file. I was wondering if you want to echo out the image location again, do you use $_FILES[tmp_name]?
e.g. value="$_FILES[tmp_name]" to echo back the location so the user doesn't have to reselect the image again.
its not possible this way.
the $_FILES[tmp_name] reflects the full path of the already uploaded image on the server.
an its not possible to pre-select the upload field in the browser and its also not possible to get the full client-side path of the uploaded file.
so in case of an error, you could copy this temporary file to another location and display the already uploaded image to the user instead of giving him the upload field again.
but you need to make sure to delete this copied image if the user didn't try to fix his invalid fields.
or you seperate the validation of the fields from the image upload part. using some ajax magic or seperate form.
No, you can't use $_FILES['tmp_name'] in this way, as that isn't the name it had on the users computer, but the temporary name that it has on your server in your tmp folder. Not sure if there is a way to do this. I'll look into it and let you know if I find anything, but I doubt there is.
If you used an AJAX file upload, you wouldn't have to worry about this though.
This is not possible, you could try to use a value attribute on a file input to see that it has no effect.
Imagine that if you could do this it would be a serious security problem (ie: hide a file input with a pre-filled value with a common path for an important file and get it the same time with some other details)
If the form is submitted via normal html form submission then you do not have access to the user's file path. Your best bet is to use an AJAX form submission.
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');
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.