I am new in angular and I have an issue with uploading files from different inputs. All the examples I have seen was about uploading files only from one input.
This is what I need for example :
<form>
<div>
<lable>type file A</lable>
<input type='text'>
<input type='file'>
</div>
<div>
<lable>type file B</lable>
<input type='text'>
<input type='file'>
</div>
<button type='submit'>submit</button>
</form>
In my API I want to get the file type A the file type B and the files A and B.
I do not need the API code but I do need to see how to do it in angular.
Related
i ve created a database in localhost and table in it called gallery. I want to upload and store pictures there but i m stuck.. Can you please give me any guides or tutorial how to do it? Thanks.
upload file just refer to laravel document
for example photo is the name fo file in form
<form action="xxx" method="post" enctype="multipart/form-data">
<input type="file" name="photo" />
<input type="submit" value="update" />
</form>
store the file then return file's path in filesystem
$path = $request->photo->storeAs('images', 'filename.jpg');
$path = $request->photo->storeAs('images', 'filename.jpg', 's3');
then store the $path to your database
First you need the form on your view (don't forget the csrf token):
<form action="/image-upload" method="POST" enctype="multipart/form-data">
#csrf
<input type="file" name="image">
<button type="submit">Upload</button>
</form>
And on your routes file add the route for POST method:
Route::post('image-upload', 'ImageUploadController#imageUploadPost');
Then on your Controller create the function that will validate and
move your image to the 'public/images' folder.
public function imageUploadPost()
{
request()->validate([
'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
]);
$imageName = time().'.'.request()->image->getClientOriginalExtension();
request()->image->move(public_path('images'), $imageName);
}
When I'm rendering HTML from on server side (with JSP or another server-side technology) browser suggests me to save login / password inputs.
When I'm using ReactJS to render form I don't those suggestions from browser.
Is there any way to get form autofilling?
There is example of my form from ReactJS code
return (
<div>
<div className="registration-block">
<form onSubmit={e => this.handleSubmit(e)}>
<div className="registration-block-inputs">
<div className="input-block" id="input-block-0">
<div className="input-block-header">E-mail</div>
<input type="text" placeholder="E-mail" name="login" id="login"
value={this.state.login}
onChange={this.handleInputChange}/>
</div>
{passwordInput}
<SubmitButton buttonName={this.props.buttonName} processing={this.state.processing}/>
</div>
</form>
</div>
{popup}
</div>
);
You want to use the type="password" or type="email" HTML attributes so that the browser can determine the kind of information the input is accepting.
All the form attributes are set by putting certain attributes on the actual html elements. You use certain elements based on what you want the browser to recommend. On top of that different browsers might use different attributes are various things. I would recommend this resource.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
I am writing a recipe web app, I have recipes that all hold an array of ingredients, and this is how I wrote my application
<h2>Add {{addRecipeForm.controls.name.value}}</h2>
<form [formGroup]="addRecipeForm">
<label>Name:</label>
<input type="text" formControlName="name" >
<p *ngIf="addRecipeForm.controls.name.errors">This field is required!</p><p></p>
<label>Serves:</label>
<input type="text" formControlName="serves" >
<p></p>
<label>Steps:</label>
<textarea name="Text1" cols="60" rows="5" type="text" formControlName="steps" ></textarea>
<p></p>
<label>Remarks:</label>
<textarea name="Text1" cols="60" rows="3" type="text" formControlName="remarks" ></textarea>
<p></p>
<hr>
<app-add-ingredient></app-add-ingredient>
<hr>
<button type="submit">Add new recipe</button> <button (click)="goBack()">Back</button>
</form>
I call to show the ingredient adder/lister, how do I send the array the add-ingredient component builds back up to its parent the add-recipe component, I looked into eventemitter but as stated here: What is the proper use of an EventEmitter? it doesnt seem to be a good idea? or atleast not ideal.
If eventemitter is not the best way to pass an array to its parent, what is? a service or some other way?
I have also read the official doc on this sort of thing found here https://angular.io/guide/component-interaction#!#parent-to-child-local-var
but im not sure how to feed an array back to a parent after its been created (inputted via a form by the user) back
the best solution would be to use a service only accessible with the two component.
You will find some examples on the angular doc https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service
I have followed countless examples (from here and other sites) that explain how you upload files from Angular to a web server. I am happy with the solution of using angular-file-upload and processing the data on the server (Node) with Multer.
What I haven't been able to find is a way to upload files from the form with a post that contains all the other controller data.
controller:
$scope.files = [];
$scope.name = "";
$scope.post = //$http post to server from service
view:
<input type="text" ng-model="name">
<input type="file">
<button ng-click="post()">Send post without page refresh</button>
Is there a way I can send the [name] and the [files] in the same post? If I send with multi part data will that be ok for [name] and [files]? Do I need to send two separate posts?
At the moment, my working example submits with a form action of 'post' and an enctype of "multipart/form-data". But I don't want the page to refresh and I want to send [name] and [files] from the scope... do I need to attach the files from the form to the scope or get the scope to pull the files from the DOM?
You can push formData to file before upload.
$scope.uploader.onBeforeUploadItem = function(fileItem) {
fileItem.formData.push({name: $scope.name});
};
Please look through the demo for complete solution :)
Plunkr
<form>
<input type="text" placeholder="Enter Name here" ng-model="newCountry.Name" />
<label>Choose 1 or more files:</label>
<input type="file" ng-files="AddnewCountryFlag($files)" multiple />
<h3>Try Uploading Image file. It will preview your image.</h3>
<div ng-repeat="item in imagesrc">
<img src="{{item.Src}}" />
<label>{{item.Size}}kB</label>
</div>
<input type="submit" value="Send Data" ng-click="AddCountry()" />
I am trying to create a view to send an email by attaching a file. I just started coding but not sure how to attach .could anybody help me for this.
here is my small code.
<div>
<div> To</div>
<div><input type="text" name="" placeholder="" size="70" /></div>
</div>
<div>
<div>Subject</div>
<div><input type="text" name="" placeholder="" size="70"/></div>
</div>
after this I have to add image and by click that image I have to attach a file and enter message, then click send button.
You could take a look at the ngDroplet module.