Android javascript interaction - trying to upload file to CGI - javascript

Alright, so let me preface this by saying that I'm really unsure as to what I'm doing here and if it is at all possible.
I'm trying to build an android app that will interact with a pre-existing website. The site has a field to browse for a file, and a button upload it. Hitting upload opens a /upload.cgi which seems to do the uploading itself before redirecting to a results page.
Is it possible to use the underlying javascript to upload a file without having to use the pre-existing GUI that the website presents? I would like to just use my own interface, but have it interact with what the website has.
Thanks, and apologies for the vagueness.

You maybe able to get it working using the Java/JavaScript bridge to submit the form for you (using a WebView). But my guess is it would be more trouble than it's worth. And you should be able to do it directly in Java using a post.
Files in HTML forms are normally uploaded using a multipart form encoded post body. Something like this:
<form enctype="multipart/form-data" action="upload.cgi" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
All you need to do is create the same post request that the form would generate. Here are a few links to get you started with creating multipart post request on Android.
How use multipart/form-data upload picture/image on Android
http://w3mentor.com/learn/java/android-development/android-http-services/example-of-multipart-post-using-android/
http://www.17od.com/2010/02/18/multipart-form-upload-on-android/
http://evgenyg.wordpress.com/2010/05/01/uploading-files-multipart-post-apache/
Here's a debugging tip if you get stuck: You can installed fiddler as a reverse proxy on the CGI server, then you can watch both requests (HTML and Java) as they happen to compare them for differences. http://www.fiddler2.com/fiddler/help/reverseproxy.asp just remove it for production.

Related

How to save form uploaded files in a form in a specific folder in javascript?

So, I have trying to save uploaded files in a specific folder. Say, I have an html file as shown:
<form>
<input type="file" id="image_file" />
<input type="file" id="text_file" />
<input type="submit" />
</form>
Now, I want to write a js onsubmit function for the above form such that it saves the given file in a unique folder inside a base folder.
I had been researching various ways of doing this, and the only solution I found is using a server by making ajax calls, which I dont want to do.
Is there any native way in javascript that allows me to do this?
You can not store upload files to the server only using client-side Javascript. You need any backend language/technology. Javascript is the client-side language which runs only in the client's browser, so you need to send the selected file to the server and then save it on the server using any backend language (for example, php or 'node.js`)
Check out these links:
https://www.w3schools.com/php/php_file_upload.asp
https://www.w3schools.com/nodejs/nodejs_uploadfiles.asp

Can javascript modify on-the-fly the contents of files uploaded as multipart/form-data?

Scenario: a simple HTML form allows users to upload one or more files on their computer to a remote server (as multipart/form-data).
<form action="upload-page.php" enctype="multipart/form-data" method="post">
<input type="file" multiple name="filesToUpload[]" id="filesToUpload">
<input type="submit" name="mybutton" id="mybutton" value="Upload" />
</form>
<script>
function latin2utf8(s){ return unescape(encodeURIComponent(s)); }
</script>
Can javascript modify on the fly the contents of the files before they hit the wire? (ie. the remote server only sees the modified data)
I 'm trying to do (transparent) character encoding conversion of the uploaded text files (ie. Latin-X to Unicode UTF-8). Is what I 'm after even possible? I' m basically looking for a javascript hook (callback?), that will let me apply latin2utf8() on the file contents before the browser POSTs them.
I have already tried Mini Multiple File Upload and JQuery File Uploader, but they don't seem to allow any processing of the file contents.
Any javascript code doing something similar, or pointers to such would be really appreciated.

Uploading picture to the server using javascript

I'm wondering. Is there any way to upload picture to the server with using javascript(jquery)?
And save picture path(name) into database?
I'm running Windows platform server in asp .net 1.1. (I'm remaking 10years old web page) There are absolutely no chance to use php that I know well..
Thanks for all comments, I'm pretty desperate..
You can't directly upload/insert into the database with javascript, you will need some server side code to handle where the file is saved and inserting into the database.
With that said there are a couple options.
First you have traditional forms - <input type="file" />
Secondly you have Drag/Drop and <input type="file" /> dataTransfer object, which contain the base64 encoded version of the binary data from those files. Here is a quick example: http://www.html5rocks.com/en/tutorials/dnd/basics/
Hope that helps!
http://msdn.microsoft.com/en-us/library/aa479405.aspx
The above link details how you can upload a file using ASP.NET. I don't think you necessarily need Javascript/JQuery unless you're doing some validation on the type or trying to do some additional UI stuff with the uploader.

How to post a file to a form using javascript automatically

I have some client-side JavaScript which will output a jpeg file based on HTML5 canvas manipulation, if the user performs an action such as clicking the "OK" button.
I would like the jpeg output to be automatically loaded into the "Upload Front Side" field in a form, as if the user uploaded the file from his or her own hard drive.
However, I can't seem to get it to work.
Here is the form:
<div class="property-wrapper">
<label for="upload-front">Upload Front Side</label>
<input id="upload" class="file" type="file" enctype="multipart/form-data" id="Front-Side" name="properties[Front Side]" onchange="readURL(this);" accept="image/*" />
</div>
<script>
document.getElementById('upload').value="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg"
</script>
The problem is browsers have several restrictions on what can be done programatically with file upload due to security reasons, have a look at this answer.
The file upload functionality is potentially exploitable, and some browsers will for example not open the explorer box if for example the file upload input field is hidden with display:none.
Most browsers will not allow programatic clicks to a file upload element and require the user to click them instead, to prevent attacks where someone sends a link to a page that immediately steals content from the user's hard drive.
So the functionality you mention does not seem to be feasible due to common browser security restrictions. There are usually no error messages or warnings, it just doesn't work.
An alternative to using the file upload browser input component could be to encode the contents of the file in Base64 and send in the body of an ajax POST for example.
Are you asking how to upload to a server, via a form, the graphic image you extracted from the canvas of your page? This would be useful, I hope to see this answered.
I would start by enabling the user to download/export the image. This might be done with a blob. Ive done this for text data exports, works nicely.
Maybe there is a way to apply the same tricks, just feed the blob/buffer to the server.
Another path might be to "PUT" the file at the server.
Hope this helps.
I would ajax POST a base64 encoded string of the image and forget the whole file upload thingy. You can upload the canvas code directly and reconvert it server side if you need a preview or something or see what other outputs are available from your canvas/image converter code.
I am assuming you are uploading to same server so you would not have cross domain issue but otherwise you can setup your server to accept cross domain ajax request very easily.

How to upload an image from a remote website, by using javascript?

Is there any way I can do that? For example, I have an
<input type="file" id="upload_file" />
Obviously I can't just
$('#upload_file').val('http://www.site.com/path/to/image.jpg').parent().submit();
You can't do it.
Javascript won't let you read from other domains (for security reasons).
File inputs don't accept URL inputs (or for that matter paths) AFAIK.
I can't see how you will get this to work. What server side language are you using? Would it not be better to just make a direct request for the remote file from the server?
IF that site supports what are you trying to do it should work.
Most of file uploads are very strict, as you can't just upload a file wherever you want even if you know the upload script.
If host supports sending a link to the picture and he knows what to do with it ... I don't see why your script should not work.
<form method="post" action="http://www.example.org/">
<input type="text" name="upload_file" id="upload_file" value="" />
<input type="submit" onclick="$('#upload_file').val('http://www.example.org/example.jpg');">
</form>
Te begin with, you cannot do file uploads without a server-side tool. Sending a file to the server is pointless if there isn't anything on the side other to receive it.
Said that, if you already have a server-side language available and a file that's publicly reachable at a URL, the server-side language is perfectly capable of fetching the file by its own means. There's no need to use the browser as intermediary. You just need to send the URL in a regular <input type="text"> element.
If the file is not publicly reachable, e.g., it belongs to an intranet or is password-protected, it's probably simpler to instruct the user to type the URL in the browser's "Open file" dialoque. In many cases, the browser will download the file and fill the <input type="file"> control with the temporary downloaded file.

Categories