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.
Related
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
I know that since the creation of HTML5 there has been many additions that make programming websites more easy than ever. It seems they may have failed to add a File system that actually creates a file in a specified directory (not to my knowledge anyway). I have been searching the web and have found nothing about doing such a thing without using a 3rd party i.e JQuery, php, Javascript Libraries. I assume that since there is pure js libraries that can accomplish this that it is possible, but I do not know for sure. What I would like to do is output an html file from the outerHtml generated in my JavaScript minus the script source itself. Note that I do not want the client to have to download.
Try this:
<head>
<script type="text/javascript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline("HI");
s.writeline("Bye");
s.writeline("-----------------------------");
s.Close();
}
</script>
</head>
<body>
<p>Fill out the form below:
</p>
<form onSubmit="WriteToFile(this)">
Type your first name:
<input type="text" name="FirstName" size="20">
<br>Type your last name:
<input type="text" name="LastName" size="20">
<br>
<input type="submit" value="submit">
</form>
This will work only on IE.
Also see: create a file using javascript in chrome on client side
Preventing webpage scripts from creating files on local filesystem is done for your own security. You don't want website you visit create an executable file on your local disk with virus.
There is a File System API in HTML5, but it's kind of internal filesystem intended as a local storage for user data.
You can force user to save file by returning HTTP header Content-Disposition with value attachment; filename=example.csv. This will force browser to save file locally.
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.
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.
My javascript script has an image as URI data, like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==
I have a multipart/form-data form that has an <input type="file" /> element. I want to use that <input type="file" /> element to send my image(the one I have as a Data URI) to the server.
I have no control over the server.
Is there a way to achieve this? Some way I can trick the browser to send my image to the server?
There is no way to set the <input type="file"> value programatically.
However, you could replace the real form submission with an AJAX one. Using AJAX, you have more flexibility as to what is sent to the server.
See this question: HTML5 File API readAsBinaryString reads files as much larger, different than files on disk.