I'm trying to upload files in my angular2 application. Currently I'm using the ng2-file-upload directives and it works for uploading files. However, I would like to also upload a JSON object along with the file. Kinda like this
{username:"john",file:file}
I don’t see how I can implement this feature. I would be open to changing APIs if need be. Here is what I currently have, which can also be found in the sample online.
fetch-datat.ts
import * as ng from '#angular/core';
import { Http } from '#angular/http';
import { FileSelectDirective, FileDropDirective, FileUploader } from 'ng2-file-upload/ng2-file-upload';
const URL = 'http://localhost:5000/api/SampleData/upload';
#ng.Component({
selector: 'fetch-data',
directives: [FileSelectDirective, FileDropDirective],
template: require('./fetch-data.html')
})
export class FetchData {
public uploader:FileUploader = new FileUploader({url: URL});
public hasBaseDropZoneOver:boolean = false;
public hasAnotherDropZoneOver:boolean = false;
constructor(){
console.log(this.uploader);
}
public fileOverBase(e:any):void {
this.hasBaseDropZoneOver = e;
}
public fileOverAnother(e:any):void {
this.hasAnotherDropZoneOver = e;
}
}
fetch-data.html
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href>Angular2 File Upload</a>
</div>
</div>
<div class="row">
<div class="col-md-3">
<h3>Select files</h3>
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="well my-drop-zone">
Base drop zone
</div>
<div ng2FileDrop
[ngClass]="{'another-file-over-class': hasAnotherDropZoneOver}"
(fileOver)="fileOverAnother($event)"
[uploader]="uploader"
class="well my-drop-zone">
Another drop zone
</div>
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
Single
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
<div class="col-md-9" style="margin-bottom: 40px">
<h3>Upload queue</h3>
<p>Queue length: {{ uploader?.queue?.length }}</p>
<table class="table">
<thead>
<tr>
<th width="50%">Name</th>
<th>Size</th>
<th>Progress</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of uploader.queue">
<td><strong>{{ item?.file?.name }}</strong></td>
<td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
<td *ngIf="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
</div>
</td>
<td class="text-center">
<span *ngIf="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span>
<span *ngIf="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span *ngIf="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs"
(click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
<button type="button" class="btn btn-warning btn-xs"
(click)="item.cancel()" [disabled]="!item.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel
</button>
<button type="button" class="btn btn-danger btn-xs"
(click)="item.remove()">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<button type="button" class="btn btn-success btn-s"
(click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span> Upload all
</button>
<button type="button" class="btn btn-warning btn-s"
(click)="uploader.cancelAll()" [disabled]="!uploader.isUploading">
<span class="glyphicon glyphicon-ban-circle"></span> Cancel all
</button>
<button type="button" class="btn btn-danger btn-s"
(click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span> Remove all
</button>
</div>
</div>
</div>
</div>
Related
1.this is present in file index.blade.php .In this between html code one button tag is placed in which data target is present in different file .Can it be possible to trigger the modal from remote button
<button class="btn btn-small btn-warning btn-circle" data-toggle="modal" data-target=".ept-modal" onclick="productTestMapModal('<?=base64_encode(base64_encode($product->id));?>')">Available Tests</button>
2.while modal target file is
<div class="clear-back">
<div class="modal-header">
{{ $product->name }} - Available tests
<button type="button" title="Close" class="close pull-right white" data-dismiss="modal">
<i class="material-icons">close</i>
</button>
</div>
<div class="pad-15">
<span class="text-success"><i class="fa fa-circle user-online"></i> Select tests to be mapped in {{ $product->name }}</span>
<button class="btn btn-primary pull-right btn-circle" onclick="productTestMap(this, '<?=base64_encode(base64_encode($product->id));?>')">Save</button>
<div class="clearfix"></div><br/>
<div style="width:99%;overflow-y:auto;">
<table class="table">
<thead>
<tr class="center">
#foreach($product->course->testGroups as $testgroup)
<th>{{ $testgroup->name }}
<button class="btn btn-primary btn-circle btn-sm" onclick="selectTestgroups('{{$testgroup->id}}')">Select All</button>
<button class="btn btn-primary btn-circle btn-sm" onclick="unselectTestgroups('{{$testgroup->id}}')">UnSelect All</button>
</th>
#endforeach
</tr>
</thead>
<tbody>
<tr>
#foreach($product->course->testGroups as $testgroup)
<td>
#foreach($testgroup->subgroups as $subgroup)
#foreach($subgroup->tests as $t)
<span class="badge badgetest_{{$testgroup->id}} {{ in_array($t->id,$product_tests) ? 'selected' : '' }}" onclick="toggleSelection(this)"><span class="test-id hidden">{{ $t->id }}</span>{{ $t->name }}</span>
#endforeach
#endforeach
</td>
#endforeach
</tr>
</tbody>
</table>
</div>
<div class="clearfix"></div><br/>
</div>
in order to open modal from another blade file, you have to include that file, button in the target file index.blade.php like so:
#include('rel_path_to_modal_file.modal_file_name')
and please follow the bootstrap documentation to use modal as it call by id, not a class.
I would like to display the content of my route in a modal. To do this, I call the modal with the button and want to load the data via ajax in the modal. I always get the error message: Undefined variable: tasks
I have included the modal in the index page, because otherwise I can not rouse it with the button. Where is the mistake?
Button
<li><a href="{{route('todolists.show', $list->id)}}" id="show-task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
Controller
public function show($id)
{
$todolists = Todolists::find($id);
$tasks = $todolists->tasks()->orderBy('created_at', 'dsc')->get();
return view('elements.addTask', compact('tasks'));
}
route
Route::get('/tasks/{id}', 'Admin\TaskController#show')->name('todolists.show');
function
$(document).ready(function () {
$('body').on('click', '#show-task-modal', function(event) {
event.preventDefault();
var anchor = $(this),
url = anchor.attr('href'),
title = anchor.data('title');
$("#task-modal-subtitle").text(title);
$.ajax({
url: url,
dataType: 'html',
success: function(response) {
$('#task-table-body').html(response);
},
error: function (data){
console.log(data);
}
});
$('#task-modal').modal('show');
});
});
Modal
<div class="modal fade" id="task-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Todo List</h4>
<p>of <strong>To do List 1</strong></p>
</div>
<div id="task-table-body" class="modal-body">
<div class="panel panel-default">
<table class="table">
<thread>
<td width="50" style="vertical-align: middle;">
<label class="checkbox">
<input type="checkbox" name="check_all" id="check-all">
<i style="top: -12px;"></i>
</label>
</td>
<td>
<div class="fancy-form">
<i class="fa fa-tasks"></i>
<input type="text" class="form-control" placeholder="Neuer Task">
</div>
</td>
</thread>
<tbody>
#foreach ($tasks as $task)
<tr id="task-{{$task->id}}">
<td>
<label class="checkbox">
<input type="checkbox">
<i style="top: -12px;"></i>
</label>
</td>
<td class="task-item done">
{{$task->title}}
<div class="row-buttons">
<a href="#" class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="modal-footer clearfix">
<div class="pull-left">
All
Active
Completed
</div>
<div class="pull-right">
<small>3 items left</small>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Your ajax call is returning a view with tasks. $tasks can only be used on that view.
Your ajax call should not return view. It should just return data in json format.
return response()->json(['tasks' => $tasks]);
Then use jquery to loop from tasks array and make html from it and place in modal.
OR
If you still want to return view with tasks from ajax then your modal should not contain foreach loop (remove it). It should contain that view that you are returning from controller (addTask) and that view should have foreach loop to render $tasks
<div> ..#include('addTasks') </div> //modal
Read this also may be it can help.
You need to take all the html and code below the #task-table-body out of your modal that builds the table and put it in your elements.addTask view.
Then use it to build your table and return it as html with the render commands.
$view = view('elements.addTask', compact('tasks'))->render();
return response()->json(['html'=>$view]);
And replace it to the #task-table-body like you're already doing.
success: function(response) {
$('#task-table-body').html(response.html);
},
Put this is in your elements.addTask view (or maybe a different one).
<div class="panel panel-default">
<table class="table">
<thread>
<td width="50" style="vertical-align: middle;">
<label class="checkbox">
<input type="checkbox" name="check_all" id="check-all">
<i style="top: -12px;"></i>
</label>
</td>
<td>
<div class="fancy-form">
<i class="fa fa-tasks"></i>
<input type="text" class="form-control" placeholder="Neuer Task">
</div>
</td>
</thread>
<tbody>
#foreach ($tasks as $task)
<tr id="task-{{$task->id}}">
<td>
<label class="checkbox">
<input type="checkbox">
<i style="top: -12px;"></i>
</label>
</td>
<td class="task-item done">
{{$task->title}}
<div class="row-buttons">
<a href="#" class="btn btn-xs btn-danger">
<i class="glyphicon glyphicon-remove"></i>
</a>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
I have a strange issue. Maybe someone has encountered similar case. I have a modal window having a dual select list that pops up by a button click. List items can not be selected (activated by mouse click) on the 1st, 3th, 5th.. times of modal opening but selected only on the 2nd, 4th, 6th.. times of modal opening. I wonder if it is a js conflict issue. Any help will be appreciated. Here is the code:
#model IEnumerable<MajorAdmin.ViewModel.DList>
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="">
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a>#item.ev</a>
</td>
<td>
<a id="#item.id" name="edit" data-toggle="modal" data-target="#editpartialmodaldiv" class="btn btn-info btn-xs"><i class="fa fa-pencil-square-o"></i> Edit </a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="editpartialmodaldiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"></div>
</div>
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$("a[name='edit']").click(function () {
var selectedid = this.id;
var data = JSON.stringify({
'selecteditem': selectedid,
});
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetID")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: data,
success: function (json) {
$("#editpartialmodaldiv").load('#Url.Action("Edit")');
},
failure: function (errMsg) {
alert(data);
}
});
});
</script>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Edit</h4>
</div>
<div class="modal-body">
<div role="main">
<div class="">
<div class="clearfix"></div>
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul id="sortable1" class="list-group">
#foreach (var item in Model) { if (item.evl == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.emp</li>
} }
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul id="sortable2" class="list-group text-right">
#foreach (var item in Model) { if (item.emp == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.evaluator</li>
} }
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="savebutton" name="formsavebutton" value="Create" type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<!-- Dual List Scripts -->
<script src="~/Content/js/duallist/duallist.js"></script>
I finally found the answer. Thanks to #Kaddath..
I added toggle function to return success of ajax response ==> $('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
How can I use ng-model inside ng-repeat loop in AngularJS ?
Database is mySQL and also I am doing this because I want to edit on same row where data display.
I think this detail is ok to understand
<tbody ng-repeat="x in names">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" name="x.fname" ng-model="x.fname_m" value="{{x.fname}}" disabled /> </div>
</div>
</td>
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control" value="{{x.email}}" disabled /> </div>
</div>
</td>
<td>
<button class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#followUps1"><i class="fa fa-calendar"></i> </button>
<a class="btn btn-xs btn-warning btn-collapse" data-toggle="collapse" data-target="#oppTasks1"> <i class="fa fa-star"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewDetail1"> <i class="fa fa-eye"></i> </a>
<a class="btn btn-xs btn-default btn-collapse" data-toggle="collapse" data-target="#viewComment1"> <i class="fa fa-comments"></i> </a>
<button ng-click="updateData(x.id, x.fname, x.lname, x.email, x.phone, x.country, x.skype_id, x.lead_source, x.lead_status, x.lead_priority)" class="btn btn-edit btn-primary btn-xs"><i class="fa fa-pencil"></i>
</button>
<button class="btn btn-update btn-success btn-xs"><i class="fa fa-floppy-o"></i>
</button>
</td>
</tr>
</tbody>
I would suggest this:
<tbody ng-repeat="x in names track by $index">
<tr class="edit-row">
<td>
<div class="form-group editable">
<div class="input-group">
<input class="form-control"
name="x.fname" ng-model="x.fname_m[$index]"
value="{{x.fname}}" disabled /> </div>
</div>
</td>
//... rest of your code
Use the 'track by $index' on your repeat, and then you access the model via model[$index]. I would probably suggest, if you don't have a populated model, to also set the model to null at the start of your controller:
$onInit() {
this.fname_m = {};
}
<div ng-repeat="item in items">
<input ng-model="item.valueobject">
</div>
or binds
<div ng-repeat="item in items">
{{ item.valueobjects }}
</div>
i have a table of articles for each item when i click delete button a popup of confirmation appear the problem is how to pass the Id of article so that when the user click on confirmation button the record will be deleted
here is the code of the table
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td>
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-thumbnail" width="100" src="http://cfisinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div>
</td>
<td>
<div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div>
</td>
<td>
<p>
<button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p>
</td>
<td>
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" data-placement="top" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</c:forEach>
</table>
and the code of the popup
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div>le numero de l'article</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
this is the solution for my question
table code:
<div class="tab-pane" id="article">
<table id="mytable" class="table table-bordred table-striped">
<c:forEach items="${articles}" var="o">
<tr>
<td>${o.id}</td>
<td><div class="media">
<a class="pull-left" href="#"> <img
class="media-object img-thumbnail" width="100"
src="http://cfi-sinergia.epfl.ch/files/content/sites/cfi-sinergia/files/WORKSHOPS/Workshop1.jpg"
alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">${o.titre}</h4>
${o.description}
</div>
</div></td>
<td><div class="pull-right">
<i class="glyphicon glyphicon-time"></i>${o.date}
</div></td>
<td><p>
<button class="btn btn-primary btn-xs" data-title="Edit"
data-toggle="modal" data-target="#edit" data-placement="top"
rel="tooltip">
<span class="glyphicon glyphicon-pencil"></span>
</button>
</p></td>
<td>
<button class="open-deleteDialog btn btn-danger btn-xs"
data-title="Delete" data-toggle="modal"
data-target="#delete-article" data-placement="top"
data-id="ISBN564541" rel="tooltip">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</c:forEach>
</table>
<button class="btn btn-primary btn-xs" data-toggle="modal"
data-target="#ajoutart" data-placement="top" rel="tooltip">
<span>Ajouter Article</span>
</button>
</div>
</div>
</div>
</div>
code of modal class :
<div class="modal fade" id="delete-article" tabindex="-1" role="dialog"
aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true"></button>
<h4 class="modal-title custom_align" id="Heading">Delete this
entry</h4>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="id" id="id" value="" />
</div>
<div class="modal-body">
<div class="alert alert-warning">
<span class="glyphicon glyphicon-warning-sign"></span> Are you
sure you want to delete this Record?
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-ok-sign"></span> Yes
</button>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-remove"></span> No
</button>
</div>
</div>
</div>
</div>
and the javascript function:
<script type="text/javascript">
$(document).on("click", ".open-deleteDialog", function() {
var ida = $(this).data('id');
$(".modal-body #id").val(ida);
// As pointed out in comments,
// it is superfluous to have to manually call the modal.
$('#delete').modal('show');
});
this link http://jsfiddle.net/Au9tc/605/ was very useful