I am trying to allow users on my website to upload an image with a form.
I have been using formspree (https://formspree.io/)
I receive the name of the image but no image attached to the email.
I'm using:
<label>
Upload Photo
<input type="file" name="uploadField" />
</label>
Has anyone managed to do this?
Formspree currently doesn't support file inputs, but Formsprees FAQ has this advice:
For almost zero work and cheap (or free) prices you can integrate external file upload services into a Formspree form. Uploadcare is one example. If you just create an account and include their widget:
<!-- The best place for this one is your <HEAD> tag -->
<script>UPLOADCARE_PUBLIC_KEY = "demopublickey";</script>
<script
src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"
charset="utf-8"></script>
<!-- This is where the widget will be. Don't forget the name attribute! -->
<input type="hidden" role="uploadcare-uploader" name="my_file" />
Per their documentation, you can use that inside the Formspree form and receive the URL of the document in your email address.
Source: https://help.formspree.io/articles/6199-how-to-do-file-uploads-with-formspree
I'm pretty sure the issue is your enctype isn't defined. Here's an example using a basic HTML form (you'll need some PHP/server side code to process the file):
<form action="your_script.php" method="post" enctype="multipart/form-data">
Image: <input type="file" name="uploadField" />
<input type="submit" value="Submit">
</form>
Related
I'm creating an offline HTML document to set as my browser homepage for work. I'd like to include a Google search bar at the top of the page that will allow me to search Google directly.
Google seems to make it easy to embed a Google Custom Search Engine into the page which will let me use Google to search the local page, but I need it to redirect to Google and search there.
Their code:
<!-- Use of this code assumes agreement with the Google Custom Search Terms of Service. -->
<!-- The terms of service are available at http://www.google.com//cse/docs/tos.html -->
<form name="cse" id="searchbox_demo" action="https://www.google.com/cse">
<input type="hidden" name="cref" value="" />
<input type="hidden" name="ie" value="utf-8" />
<input type="hidden" name="hl" value="" />
<input name="q" type="text" size="40" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="https%3A%2F%2Fcse.google.com%2Fcse/tools/onthefly?form=searchbox_demo&lang="></script>
Testing this form returns a Google results page with no results that changes the url to: google.com/cse?cref=&ie=utf-8&hl=&q=test&sa=Search#gsc.tab=0&gsc.q=test&gsc.page=1
Surprisingly, I couldn't find any answers on SO or various search engines. I tried to create a form, use GET, and redirect to https://www.google.com/search? and https://www.google.com/search?q= with no luck. It keeps changing the url search parameter following the ?
I know I'm overlooking something simple but can't find the answer anywhere.
Simply put, is Google preventing any search queries from offline documents in an effort to fight scripts/robots?
There is a good explanation of how to use Google Search for your own site or the entire web here.
Make sure that your <form> action is
<form method="get" action="http://www.google.com/search">
Set the variable sitesearch to null. (In the link example it is a radio button. Here you can just make it a hidden input.)
<input type="hidden" name="sitesearch" value="" />
Submit the form. (When you say "offline HTML document" realize that to redirect to the Google search results page you will need an internet connection.
I do a similar thing for my projects. I create simple pages with all the links and data that I need regularly. Easy links to hand when I open the browser.
This worked for me:
<script>
function SearchQuery(val) {
document.getElementById("searchButton").href = "https://www.google.com/search?q=" + val;
}
function buttonClick(){
document.getElementById("searchBox").value = "";
}
</script>
<section>
<input id="searchBox" type="text" name="searchBox" value="" onchange="SearchQuery(this.value)">
<a id="searchButton" href="https://www.google.co.uk/" target="_blank" onclick="buttonClick()">Search with Google</p>
<section>
I have made a form and I want the user to have this option to type into the form and have the ability to close the page and open it again and see the text they have typed into the form. Do I have to use a database?
Here's my form:
<form action="" name="form1">
<label>Enter the title: </label>
<input type="text" name="title" class="title">
<label>Enter the description: </label>
<textarea name="description" class="description">
<!--Here's the save button-->
<input type="submit" name="submit" value="Save" class="savebtn">
</form>
I'm also not sure if I have to use a submit button.
You can use offline storage capabilities of HTML5.
See Client-Side Storage
Cheers !!
There are a number of different solutions.
The easiest way I would think of is to use a cookie, you can find how to create and manage cookie with easy javascript here
Then with some simple javascript code, when you load the page you just check if there is a cookie, if there is you retrieve the data and populate the form.
I am looking for a one-click solution that will call up a file open dialog and from that dialog, send the file name to the next page. I stole this code, but it requires 2 clicks to get to the next page:
<form enctype="multipart/form-data" action="ImportTOA.php" method="POST" accept="text/csv">
<!-- MAX_FILE_SIZE must precede the file input field -->
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<!-- Name of input element determines name in $_FILES array -->
Upload Daily TOA Logs: <br /><input name="userfile" type="file" />
<input type="submit" value="Send File" />
</form>
I don't need to upload the file, I just need to pass the file name that the user chooses.
If you don't need to upload the file, just remove the enctype. The file name should get passed without the upload. Then you could submit the form on the change event on the file. I'll need to double check the documentation, but I think change fires on the file input.
Looks like IE might be a bit different: Jquery: change event to input file on IE
You don't even really need to "submit" the form, just grab the file name via javascript and do whatever you need to do.
OK. With a sufficiently narrow Google query, I found the answer. Should anyone come along to read this thread, here's the code I borrowed that worked:
<form enctype="multipart/form-data" action="ImportTOA.php" method="POST" accept="text/csv">
<!-- MAX_FILE_SIZE must precede the file input field -->
<input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<!-- Name of input element determines name in $_FILES array -->
Upload Daily TOA Logs: <br /><input name="userfile" type="file" onChange = "this.form.submit()" />
</form>
I want visitors to my website to be able to search for airport lounges offered by a company called Priority Pass. I have created the following form:
<form action="http://prioritypass.com/lounges/lounge-print.cfm" method="post">
<input type="text" id="print_airport_code" name="print_airport_code" value="MAN" />
<input type="submit" value="Submit" />
</form>
Which mirrors the form they have on their own mobile search site (here). But when I submit my form it doesnt seem like the parameters are being posted properly.
Any help would be great. Thanks.
The form on their website doesnt appear to contain any fields which I have missed?
You're pointing to the wrong URL; POSTing to /lounges/lounge-print.cfm is producing an HTTP redirect header, which is corrupting your output.
Additionally, the name of your input field is incorrect. Using someone else's form results often requires you to maintain all field names consistently as they appear on the remote site.
Change the form to:
<form action="http://www.prioritypass.com/mobile/lounges.cfm" method="post">
<input id="Airport_Code" name="Airport_Code" type="text" size="10" value="MAN" />
<input type="submit" value="Submit" />
</form>
Ok I really didn't know how else to sum it up for the title. I need to create a form where a user can specify an existing file, but I don't need to upload it (it's on a shared server already accessible) -- I just need to grab the filename and save it in the database so it's linked to other data.
I thought about the input tag as it provides a convenient already done interface to the user's filesystem, but I don't know if it's possible to use it without the acutal upload (leaving out enctype="multipart/form-data" doesn't seem to work). Can I tweak this to make it work, or is there any way to do it other than writing a custom mini file browser?
EDIT: I need the full path name of the file, asking the users to enter it is out of the question...
You could place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>