I want to integrate the BlueImp AngularJS file upload plugin into my site , but the problem is I'm using a template / directive / controller / service model. Ignoring the service I still can't seem to find which part of the code goes where.
My template
<div> <form id="fileuploadbeta" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form></div>
Now my problem is what code should be in the directive? ( I mean what part of the template) And which should be in the Controller?
Related
I have been using Dropzone js Javascript library to upload multiple image files using Ajax.
The issue is that when I select multiple files to upload, it creates 1 progress bar for each file.
While I want to show only 1 single progress bar for all the selected files and make it progress according to number of files uploaded/left to server.
How can I achieve this?
I read about its documentation and other stackoverflow questions but could't find anything.
My HTML code template for dropzone preview is below:
<div class="table table-striped" class="files" id="previews">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div>
<p class="name" data-dz-name></p>
<strong class="error text-danger" data-dz-errormessage></strong>
</div>
<div>
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
</div>
</div>
<div>
<button class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
</div>
i am trying to achieve the functionality of move scroll bar as per new upload, when i am uploading any document at that time i am high lighting that document,suppose i have 20 document in my list then i am uploading 21th document that time scroll bar should move to that document means it should move as per new document,currently i am showing latest document through high lighting but scroll bar is not moving,if somebody know how to achieve this functionality please guide me how to do that i am new to UI.Thanks.
here is my html code where i am showing list of document:
<div id="resume-panel" class="panel-collapse collapse">
<div class="panel-body upload-newFile-container">
<div class="input-group file-preview">
<input placeholder="" type="text" class="form-control file-preview-filename" ng-value="(myFile.length > 1 ? myFile[0]._file.webkitRelativePath.substring(0, myFile[0]._file.webkitRelativePath.lastIndexOf('/')) : myFile.name)" disabled="disabled">
<span class="input-group-btn button-position">
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
<span class="glyphicon glyphicon-folder-open"></span>
<span class="file-preview-input-title">BrowseFolder</span>
<input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
name="input-file-preview" />
</div>
<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
<span class="glyphicon glyphicon-file"></span>
<span class="file-preview-input-title">BrowseFile</span>
<input type="file" ng-click="clearFileName()" file-upload="myFile" ng-disabled="isFolderSelected" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
/>
</div>
<button type="button" class="btn btn-labeled btn-info" ng-disabled="myFile === null || myFile === undefined || uploadButtonDisabled" data-ng-click="upload();disableButton()" ng-change="latestResume()">
<span class="btn-label">
<i class="glyphicon glyphicon-upload"></i>
</span>Upload
</button>
</span>
</div>
<uib-progressbar
class="progress-striped active"
ng-show="folderProcessing && !isSingleFile"
animate="true" max="100"
value="progressValuePercentage"
type="success">
<i>
<span>
{{progressValuePercentage}} / 100
</span>
</i>
</uib-progressbar>
<div class="processed-file-container col-xs-12 col-md-12 nopadding">
<div class="loading-message-container" ng-show="showResumeLoadingPanel">
<h3>Loading data... Please wait.</h3>
<div class="progress progress-striped active page-progress-bar">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
<div class="processed-document col-xs-12 col-md-12 col-lg-12 nopadding" ng-show="!showResumeLoadingPanel">
<div class="panel-heading">
<span ng-if="jdSelected" class="jdContext jdContextInManageResume" ng-show="isjdDeleted">
<span>Company : {{companyName}}</span><br>
<span>JobDescription : {{jdName}}</span>
</span>
<div class="pull-right nopadding refreshBtnInManageResume">
<button class="btn btn-labeled btn-info btn-reload pull-right" data-ng-click="loadResumePanel()">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span class="small-left-margin">Refresh</span>
</button>
</div>
<div class="pull-right nopadding download-quick-tracker-position" ng-if="jdSelected && processResumeFiles.length > 0" ng-show="isjdDeleted">
<button class="btn btn-labeled btn-info pull-right" data-ng-click="downloadQuickTracker(jdUniqueId)">
<i class="fa fa-download" aria-hidden="true"></i>
<span class="">QuickTracker</span>
</button>
</div>
</div>
<div class="panel-body">
<div class="row marginForRefreshBtn">
<table class="table table-striped" id="manageResumeTable">
<thead class="text-center text-info text-capitalize">
<th class="text-center col-xs-1">Sr.No.</th>
<th class="text-center col-xs-4">Document</th>
<th class="text-center col-xs-1">Score</th>
<th class="text-center col-xs-1">QuickScore</th>
<th class="text-center col-xs-5">Actions</th>
</thead>
<tr ng-repeat="file in processResumeFiles" ng-class="{'highlighter-row-Class' : file.id == 1}">
<td class="text-center col-xs-1">{{ file.temporaryId }}</td>
<td class="view-orphan uploadResumeTableCellOverFlow col-xs-4">
{{ file.attributes.name }}
</td>
<td class="text-center col-xs-1">{{file.totalScore}}</td>
<td class="text-center col-xs-1" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td>
<td class="text-center col-xs-5">
<button class="btn btn-labeled btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)">
<i class="fa fa-eye" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Promote to Gold Standard" ng-disabled="!file.attributes.isModelHtmlPresent" data-ng-click="markAsGoldStd(file.attributes.name)">
<i class="fa fa-share" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<button class="btn btn-labeled btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected"
data-ng-click="moveToJobDescription(file.attributes.name)">
<i class="fa fa-check-square" aria-hidden="true"></i>
</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
here is my UI view how its showing currently.
if you didnt understand question please ask me, thanks you
you can keep your scroll bar at the top position :
$('html, body').animate({
scrollTop: 0
}, 1000);
I am in trouble with getting specific variable javascript class name from Laravel loop.I tried to get it from html data but I got only the first data info of loop.
Here is my blade
#foreach($myanmarmenus as $myanmarmenu)
<div class="col-md-6 col-sm-12">
<div class="menu">
<img src="{{ '/images/menus/'. $myanmarmenu->image }}" class="menuimg">
<p class="menutitle">{{$myanmarmenu->title}} <span class="menuprice">{{$myanmarmenu->price}} <span id="kyat">Ks</span> </span>
</p>
<p class='menudescription'>
{{$myanmarmenu->description}}
</p>
<span class="menushop">
#foreach($myanmarmenu->shops as $shop)
{{$shop->name}}
#endforeach
</span>
<!-- spinner -->
<div class="custom_spinner {{$myanmarmenu->title . $myanmarmenu->id}}" data-spinnerclass="{{$myanmarmenu->id}}">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-sm input-number" value="1" min="1" max="1000" id="spinnerval-{{$myanmarmenu->title . $myanmarmenu->id}}">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<!-- spinner -->
<!-- add -->
<div class="spinner_btn {{$myanmarmenu->title . $myanmarmenu->id}}" data-addclass="{{$myanmarmenu->id}}">Add Item</div>
<!-- add -->
</div>
</div>
#endforeach
And this is js
$('.spinner_btn').click(function () {
var spinner = $(".custom_spinner").data('spinnerclass');
alert(spinner);
});
my actual purpose is to get the specific class name
I think you mean this:
$('.spinner_btn').each(function () {
$(this).on('click', function () {
var spinner = $(this).siblings(".custom_spinner").data('spinnerclass');
alert(spinner);
});
});
I've got some global variables in my html code responsible for showing and / or hiding a new table entry field and an edit table entry field. For some reasons, each time I try to show or hide one of those fields using the buttons in my table, it doesn't work.
Here's my code:
<!--Page HTML du module News du dashboard.-->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
<meta charset="UTF-8">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<button type="button" class="btn btn-default pull-right" ng-click="add = !add; updt = false"/>
Ajouter une annonce
<span class="glyphicon glyphicon-new-window"></span>
</button>
<br>
<br>
<table class="table table-striped table-responsive table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="col-md-1 text-center">
<span class="glyphicon glyphicon-pushpin"></span>
</th>
<th class="col-md-7">News</th>
<th class="col-md-1">Auteur</th>
<th class="col-md-1">Date</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td class="text-center">
<b> {{x.pinned}} </b>
</td>
<td>
<b>{{x.title}}</b>
<button type="button" class="btn btn-default pull-right" ng-click="body = !body">
<span class="fa fa-chevron-up" ng-show="body"></span>
<span class="fa fa-chevron-down" ng-hide="body"></span>
</button>
<div class="check-element animate-hide" ng-show="body">
<p>{{x.body}}</p>
</div>
</td>
<td>
{{x.author}}
</td>
<td>
{{x.date}}
</td>
<td>
<div class="text-center">
<button type="button" class="btn btn-default" ng-click="pinUnpin(x.id,x.pinned)">
<span class="glyphicon glyphicon-pushpin"></span>
</button>
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-default" ng-click="delEntry(x.id, x.title)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<div class="page-header">
<h3>Nouvelle news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="checkbox">
<label><input type="checkbox" value="" ng-model="newPinned"/>Epingler la news?</label>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="add = !add">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="newEntry()">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
<div ng-show="updt">
<div class="page-header">
<h3>Editer une news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="updt = !updt">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="updtEntry(); updt = !updt">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./controller.js"></script>
</body>
</html>
For instance, when I click on the first button (Ajouter une annonce), my "add" and "updt" div fields are shown or hidden accordingly. Same when I use the cancel button in those divs. But the button each table row:
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
doesn't seem to update my "add" and "updt" variables. And I know that my function prepareUpdt is called, so I know that ng-click is reached.
Where's the problem ?
This is due to a scoping issue with ng-repeat. More information is here.
Basically, add and updt do not exist in the outer scope (outside of the ng-repeat scope), and therefore their values never change when you click the button in the table.
To resolve, I suggest that you change each definition (line ~11, 55) of
ng-click="add = !add; updt = false"
to
ng-click="viewObj.add = !viewObj.add; viewObj.updt = false"
And
<div ng-show="add">
to
<div ng-show="viewObj.add">
..and..
<div ng-show="updt">
to
<div ng-show="viewObj.updt">
Also,
~77 to:
<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">
and
~95 to:
<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">
You also have a line around ~36 ng-click="body = !body". Since you are using that within the ng-repeat scope, you should be fine, however, bear in mind that will not be available outside of ng-repeat.
You shouldn't put this logic in your view. You should declare the variables in your controller and change them in your controller inside the function prepareUpdt(). This way angular will double bind these variables and update your view upon changes.
vm.updt = true;
vm.add = true;
function prepareUpdt() {
// your other code
vm.updt = !vm.updt;
vm.add = false;
}
and in your html:
<div ng-show="vm.add">
...
<div ng-show="vm.updt">
I have a huge issue with my ui-sortable.
If i have a small list (as the one in the example on their website: jquery sortable)
Then there is no Issue.
However if the list gets big long enough and the user would have to scroll to see the total list then when ever i try to drag an element it automaticly scrolls to the bottom and i have a hard time getting it up again.
Every time i attempt to scroll up it scrolls down seconds later. So my question is has anyone tried this before and know a fix for it? ( i know there wasnt much code however if you really need code to solve this problem il gladly provide what i have)
The element im dragging:
<ul class="list-group gutter list-group-lg list-group-sp" ui-sortable="sortable" ng-model="academyModules">
<li class="list-group-item module" style="padding-top: 15px; padding-bottom: 0px; display: block" ng-repeat="module in academyModules" draggable="true">
<div class="clear" ng-if="module.module.module_type_id != null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color || module.module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name || module.module.module_type.name}}
</button>
<span class="text text-muted" translate="TERMS.MODULE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" ng-really-message="{{ 'ACADEMY.EDIT.MODULES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteModule($index, module);">
<i class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i><span translate="ACADEMY.EDIT.MODULES.CHANGE_MODULE"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
<div class="clear" ng-if="module.module.module_type_id == null">
<span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg bg-grey"
style="padding: 2px 10px; min-width: 90px;" translate="TERMS.COURSE">
</button>
<span class="text text-muted" translate="TERMS.COURSE"></span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-really-message="{{ 'ACADEMY.EDIT.COURSES.DELETE_WARNING' | translate }}" tooltip="{{ 'TOOLTIP.DELETE' | translate }}" ng-really-click="deleteCourse($index, module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" ng-click="changeCourse(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-edit"></i><span translate="ACADEMY.EDIT.COURSES.EDIT"></span>
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.name}}" style="height: 27px" disabled="">
</div>
</div>
</div>
</li>
</ul>