How do I create a script for this? - html

I am trying to take 2 media files and merge them together to become 1 media file. The problem is that whenever I upload 2 files from my computer, nothing happens. Does anybody know what I am doing wrong?
<html>
<body>
<p><form action="/action_page.php"><label for="myfile"><font size="6"> Choose a file </font></label><input type="file" id="myfile" name="myfile"><br><br><output type="submit"</form></p>
<p><form action="/action_page.php"><label for="myfile"><font size="6"> Choose a file </font></label><input type="file" id="myfile" name="myfile"><br><br><output type="submit"</form></p>
<p><form method="get" action="file.doc"><label for="myfile"><button type="submit" onclick="window.open('file.doc')">Download!</button></form></p>
</body>
</html>

That's not how HTML forms work.
Your action parameter should point to a backend (PHP, NodeJs, C#, Java... the options are plentiful), and that backend will process what you've uploaded.
The best you could do right now to eliminate the requirement of a backend to handle your form inputs is to use some lib on your frontend to perform what you want (I'm sure there's some jQuery plugin that'd enable you to do so).

Related

successful file upload opens new blank page, also allows "empty/blank" to upload

following code is working but with 2 issues: It is part of bigger form on the web page it appears on.
<FORM id="my_file_upld_form"
style="display: inline;"
METHOD="POST"
ACTION="/cgi-bin/fileupload_ajax.pl"
ENCTYPE="multipart/form-data">
<INPUT TYPE="file" class="ajaxfileupload" NAME="myfile" SIZE="42">
<input type="hidden" class="ajaxfileupload" name="fileupload" value="ajax_fileupload">
<input class="ajaxfileupload" type="submit" value="Upload"/>
</FORM>
it is allowing "blank" or empty (no file selection and upload button clicked) to upload. which is causing 500 error on server.
bigger problem is: after the file is uploaded, a new blank page is opened in browser and user has to use back button to go back to the page from where this was run. This happens irrespective of the fact that the ajax script returns anything back or not.
how to fix? I am open to replace this piece of code on the page, if needed.
It's hard to tell exactly what is going wrong without your java script code. However I think I know how to fix some of your problems.
Don't trust the client you need to handle in your backend code the ability to handle a form that gives you bad data. You can validate the form client side but you always need to validate server side as well.
I suspect this problem is happening because you aren't preventing the default event in javascript. In jquery you would do
$("#my_file_upld_form").submit(function(e){
e.preventDefault()
})

Need jsp form to submit query to specific path

I'm trying to setup a simple form in a jsp that will put a search query in the URL submitted.
This is what I have so far:
<form action="search/" method="get" onsubmit="this.action+=this.q.value.trim();return true">
<input type="text" id="q">
<input type="submit" value="go">
</form>
This is in a jsp that's included on each page of my web app and it works when I'm at the root of the app. For example, if I initially load "http://localhost:8080/MyApp/" then type "123456" in the search form, it takes me to "http://localhost:8080/MyApp/search/123456", which is what I want. However, from that page, if I search again (for "654321" for example) it goes to "http://localhost:8080/MyApp/search/search/654321", which doesn't work for me. I need search/{query} to be appended to the root of the app's path no matter what page I may be on at the time.
I would like to avoid javascript if possible, I'm fine with JSTL though.
Any suggestions would be much appreciated!
Simply add a full path to your action, start it with /. Note it will depend on your application context, you could use :
<form action="${pageContext.request.contextPath}/search/"...
It will work in dev and also prod.
EDIT :
Path : search will try to load relative from current path so : http://domain.com/contact/search/
Path : /search will try to load relative from the domain so : http://domain.com/
With the context path above, it will work no matter if it change from dev to prod.
Hope this helps!

Using <input type="file"> in Django

When someone clicks Submit after selecting a file with the <input type="file"> element, how do I access the contents of the file in Django?
(It seems like the request sent to the request handler has no trace of the file anywhere -- not even in request.FILES.)
Currently my template is like:
<form method="post" enctype="multipart/form-data">
<input type="file" enctype="multipart/form-data" name="file" accept="text/csv"/>
<input type="submit" value="Upload" />
</form>
View:
def HandleRequest(request):
print "**** request:", request
I don't see anything being printed about the file.
Note:
There's probably other ways to do this in Django, but I'm looking a solution using the simple input tag, and not something else (which would probably involve Javascript).
The code you posted, as it is posted, works fine. The HTML is sound (though I think the enctype on the <input> is redundant at best), and a very simple view shows an InMemoryFile after the POST. The problem must lie in something between the browser and your view. Some things to check:
Middleware.
Apache.
Nginx.
Decorators on your view.
mod_wsgi configuration.

Is there anyway to use the Imageshack API without PHP?

If I use the ImageShack API just in a form like this:
<form method="post" enctype="multipart/form-data" action="http://www.imageshack.us/upload_api.php">
<p><input type="file" name="fileupload"></p>
<p><input type="text" name="key" value="Your_Developer_Key"></p>
<p><input type="submit" value="Go"></p>
</form>
the browser gets taken to an XML doc, which has the image URL, but is no use because I'm no longer on my site. I've tried loading it in an iFrame and that works, but I can't access it because it's cross-domain.
A Http Post in jquery won't work because I can't send a file in it. I don't know any PHP so using that would take lots of time to learn & setup etc. Do I have any other options?
You mention you know Ruby on Rails.
Posting a file with Ruby is rather simple. See: Ruby: How to post a file via HTTP as multipart/form-data?

Passing HTML form data in the URL on local machine (file://)

I'm building a small HTML/JS application for primary use on local machine (i.e. everything is accessed via file:// protocol, though maybe in the future it will be hosted on a server within intranet).
I'm trying to make a form with method="get" and action="target.html", in the hope that the browser will put form data in the URL (like, file://<path>/target.html?param1=aaa&param2=bbb). However, it's not happening (target.html opens fine, but no parameters is passed).
What am I doing wrong? Is it possible to use forms over file:// at all? I can always build the url manually (via JS), but being lazy I'd prefer the browser do it for me. ;)
Here is my sample form:
<form name='config' action="test_form.html" method="get" enctype="application/x-www-form-urlencoded">
<input type="text" name="param1">
<input type="text" name="param2">
<input type="submit" value="Go">
</form>
It might be some browser specific restriction. What browser are you using?
I tested this in Firefox 3.6.3 and Internet Explorer 8, and it works just fine.
Ok, that was stupid. The controls of my form are generated dynamically (via JS), and the generation function was setting ids for them, but not names. So, from the form's point of view, there was no parameters at all.
Thanks to Guffa for providing me a nudge in the right direction!