Simple form submit with files - javascript

I am trying to write a simple upload form with input file type using React JS. When i submit the file, it is not submitting multi form data. It is submitting plain input file name.
Do we need to make any other changes if we want to write upload functionality in React.
Basic javascript code for uploading (js fiddle link) :
/** #jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return (<div>
<form name="secret" ENCTYPE="multipart/form-data" method="POST" action="http://localhost:8080/uploadFile">
Please choose two files to upload.
<br/>
File 1:<input type="file" id="profilePic" name="profilePic"/>
<br/>
<input type="submit" value="submit"/>
</form>
</div>);
}
});
React.renderComponent(<HelloMessage />, document.body);
Can someone help me to write using React JS.

Casing is important for React components. Try encType instead of ENCTYPE. (You should have seen a warning in your console suggesting that you use encType.)
Here's a complete list of tags and attributes:DOM Elements.

Related

Is is possible to send form data to an external link with Angular?

For example, consider this code:
<form method = post action="URL">
<Input type = text name= first name />
<Input type = text name= last name/>
<Input type = submit value= submit name=submit/>
<form/>
In the code above we can see form data in headers. Can the same functionality be replicated in Angular?
To be clear, I want to pass input values to an external link via the post method in Angular.
Rakesh, if you only want to send a value -typical to an API that update a dbs- it's only using httpClient, see the docs
constructor(private:httpClient:HttpClient){}
submit()
{
this.httpClient.post('your-url',
{firstname:'yourName',lastname:'lastname'})
}
if you need to show a page that not belong to the app -typical external url to login or a virtual tpv-, you can create a form "outside Angular" adding ngNoForm to your form
<form method ="post" action="URL" ngNoForm >
</form>
Of course you can use variables

How to use native html form with Angular 5

I'm trying to add simple form element which must not be controlled by Angular.
The goal is to POST file download request, passing authentication token with use of hidden input.
Form code:
<form action="api/admin/codes-csv" method="POST" target="_blank">
<input type="hidden" name="token" value="{{token}}" />
<input class="admin-link" type="submit" value="Download Codes" />
</form>
At server side (aspnet core) I'm returning FileResult with CSV data to download.
This approach worked well with AngularJS but with Angular 5 it does not post to the server (request never happens actually).
If add another <input type="submit" /> right in browser DOM explorer, it works. I've tried to add another submit after page load by the script, but Angular seems to somehow override the behavior and it still doesn't work.
So what I need is seems to stop Angular doing anything with this form and make it act as plain html form.
At first: Are You include FormsModule ?
and try
<button type="submit" class="admin-link">Download Codes</button>
This is not a precise answer, because I was unable to make the form work.
But I was able to make file download with use of native HttpClient & FileSaver plugin.
1) Using my API authenticated via http headers, I'm providing my data as JSON with "text" property containing my CSV: { text: "hello,world,etc" }
2) after getting this result with usual API call, I'm using FileSaver (https://github.com/eligrey/FileSaver.js) to save with proper name, so something like this:
Template:
<a (click)="DownloadCsv()">Download All</a>
Component:
DownloadCsv() {
this.ApiService.Admin.CodesCsv.Post()
.subscribe(result => {
var blob = new Blob([result.text], { type: 'text/csv' });
fs.saveAs(blob, "codes.csv");
});
}
As a result, save dialog with proper file name appears. The ApiService is just a wrapper for native http client, which appends auth headers, handles errors and adds strong-typed definitions.
You use ngNoForm if you want the following:
To import the FormsModule but skip its usage in some forms, for example, to use native HTML5 validation, add the ngNoForm and the tags won't create an NgForm directive.
Source: https://angular.io/api/forms/NgForm#description
Similar answer: https://stackoverflow.com/a/49989002/1918775

how to create static html page with form data?

I have html form where i can enter the data in the form of text . once the submit button iis pressed, should get option to save it as html page. and it should create static html page.
what is the best possible way to do this?
html form cade can be some thing like this.
<form method="post">
<textarea name="name" rows="2" cols="20"> </textarea >
<input type="submit" value="Submit" />
</form>
Check out this library! https://github.com/eligrey/FileSaver.js It allows you to generate files client-side (an html file in this case) and allow the client to download it, without interacting with a server
Here's a solution based loosely on this answer. When you click the button, it opens the entered html in the browser, which the user can save.
Sample HTML:
Get HTML page
Javascript:
var textInput = document.getElementById("textInput");
var getHtml = document.getElementById("getHtml");
getHtml.addEventListener("click", function () {
var htmlBlob = new Blob([textInput.value], {type: "text/html"});
window.location.href = window.URL.createObjectURL(htmlBlob);
});
Here's a jsfiddle version

Jquery custom file input plugin

This jquery plugin allows you to turn any element into a file input element. http://plugins.jquery.com/project/custom-file
But to actually upload the file, the only documentation i could found is this:
To upload the chosen file to a server you should then attach the input element to a form element
how can i do that?
I think you need to create an html form and append the input to the form, and if you need to submit, you can do it via a submit button or via $.submit
# from http://www.daimi.au.dk/~u061768/file-input.html
<script type="text/javascript">
$(function() {
$('button').button().add('#foo, a').file().choose(function(e, input) {
$(input).appendTo('#TheForm').
attr('name', 'a-name').
attr('id', 'an-id');
});
});
</script>
...
<form method="post" enctype="multipart/form-data" id="TheForm" action="/path/in/your/server/">
<input type="submit" value="send">
</form>
Anyway this is not the best plugin for submiting the files via ajax.
The uploading itself is not of the scope of this plugin. You should see this with your server side technology.

Get files from input.files instead of value on submit

I have following problem. I have input field in form, type of file:
<FORM action="http://server.com/cgi/handle"
enctype="multipart/form-data"
method="post">
<P>
What is your name? <INPUT type="text" name="submit-name"><BR>
What files are you sending? <INPUT type="file" name="files"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</FORM>
I am setting using JavaScript also files property of this input and I want this input on submit of form send the file property instead of his value. Is it possible to do so?
var data = e.dataTransfer;
var input = dojo.byId(inputName);
var file = data.files[i];
input.files[0] = file;
data is a datatransfer object, I am getting files from there.
I know, it will be possible only in few browsers, I dont care. I just need to get it working at least in FF.
So if I understand you correctly you drop some files and you want to populate a file input object
I see a drop example here http://help.dottoro.com/ljslrhdh.php
but to populate the file field you will need a pretty heavy privilege change using a signed script - UniversalFileRead is probably the one you need

Categories

Resources