This is code snippet.
When user select a file by clicking on Change Image button, file gets selected and name is displayed in text box.
<img src="" alt="" border=3 height=75 width=75><br><br>
<input type="text" ng-model="b.files[0].name" data-ng-hide="!uploadMode" readonly="readonly">
<button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
<span class="glyphicon glyphicon-picture"></span> Change Image
</button>
I also want to display the image of selected file to preview to user, before actual upload.
Can please any one help me, what changes i need to do for that?
Take a look at the example (ngThumb directive). Basically, it's all about using the FileReader API and listening to the appropriate events.
Related
In Laravel,
I uploaded file successfully in storage and also link storage with public. My uploaded directory like this,
This is my download directory map
This is my Download button code,
<form action="{{route('download', $file->id)}} " method="get">
#csrf
<button type="submit" class="btn border-none btn-sm btn-primary">Download</button>
</form>
This is my Route setup for this ,
//Download uploaded file
Route::get('/download/{file}', [UploadUserFileController::class, 'downloadfile'])->name('download')->middleware('auth');
This is my Controller code for this,
// Download requested file
public function downloadfile($id){
$filelink = File::find($id);
// return Storage::disk('public')->download('./storage/files/'.$filelink->files);
// return Storage::download('./files/'.$filelink->files);
return response()->download('/storage/files/'.$filelink->files, $filelink->files);
}
But after I click Download button it show me this error,
The file "/storage/files/Demand.pdf" does not exist
I am new in Laravel, I am not understanding the problem. Please help me.
I get my problem, My form was wrong , I was pass files wrong way.
Now, My problem was solved by using this,
<form action="{{route('download', $file->files)}} " method="get">
#csrf
<button type="submit" class="btn border-none btn-sm btn-primary">Download</button>
</form>
I am using file input of jasny-boostrap in AngularJS in a Modal, so I also used the jasny-bootstrap-angular. I am having two doubts about:
When I Click on the button to open the model, I am able to select then file I want. If I select a file e close the model, when I open again the model, the file will be in data-preview, it it not cleaning up. I want pass null value (or reset) this image preview (fileinput-preview thumbnail) in my angularjs when I click in my button to open the modal;
If a click in a button that call a modal, I want to automatic get the image from my web service to the data-previw and automatic change the buttons to 'remove' and 'change' and I get a picture to service.
My HTML:
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new">Select a image</span>
<span class="fileinput-exists">Change</span>
<input type="file" name="file" file-model="fileinput"> <!--compose.myFile-->
</span>
Remover
<button class="btn btn-info" ng-click="showInput()">Show Input</button>
</div>
</div>
And if I click on 'show input' I can see the image binary, I used this angularjs:
$scope.showInput = function () {
console.log($scope.fileinput.result);
}
I am using this HTML code with my angularjs to see the image from web service and it is everything work perfect:
<!-- Foto view-->
<div class="form-group">
<img ng-show="equipamento.FotoEquipamento != null" style="height:auto; width:225px;" data-ng-src="{{getImage(equipamento.FotoEquipamento)}}" />
</div>
jasny-bootstrap-angular is UPDATED.
Please check it out.
Now it supports event handlers also.
I have a preview and edit button in my project. when i click edit, editor will show and preview hides, viceversa. how to create the preview of summernote angularjs editor data in a div or something, the editor content may include the images .like stack overflow shows while creating post like question or answer. how to do it. Can anyone please help me ?
<button class="btn btn-primary saveBtn" ng-click="saveContent()">Save</button>
<summernote id="editor" height="400" ng-model="content" on-image-upload="imageUpload(files)"></summernote>
<div class="preview" ng-show="item == 'preview'">
{{content}}</div>
the preview here shows the code like <p>preview</p>. but i need to show like paragraph text and image will show in some format (with some code like appearance) which doesn't display the image.how to do to show the image and content in preview.
<button class="btn btn-primary saveBtn" ng-click="saveContent()">Save</button>
<summernote id="editor" height="400" ng-model="content"></summernote>
<div class="preview" ng-show="item == 'preview'">
<div ng-bind-html="content| trusted"></div>
</div>
trusted filter
angular.module('app.filters')
.filter('trusted', function($sce){
return function(html){
return $sce.trustAsHtml(html)
}
})
adding ng-bind-html="expression |filter" along with ngSanitize module solved my issue
I'm using Angular Bootstrap and want to have my tooltips trigger using a "hover" on desktop and "click" on mobile devices which can't hover but also have the tooltips close if you click outside the tooltip. I set it to tooltip-trigger="hover outsideClick" since "outsideClick" is now a supported trigger (https://github.com/angular-ui/bootstrap/tree/master/src/tooltip/docs), however this breaks the tooltip completely so even the hover doesn't work.
<span class="glyphicon glyphicon-info-sign" tooltip-trigger="hover outsideClick" uib-tooltip="Tooltip text here"></span>
Is there any way to make these work together?
If I just use tooltip-trigger="hover click" it's decent, but on mobile I can only close the tooltip by clicking the item again, versus being able to click elsewhere on the page to close it.
Have you tried tooltip-trigger="mouseenter outsideClick"?
It seems likehover is not mentioned in the doc.
I think what you're looking for is the tooltip-trigger="hover focus", the focus will act as the outsideClick, closing the tooltip on the next click that the user makes. I've personally used this and it works great both for mobile and desktop.
It actually defaults to hover focus so you shouldn't even have to add them manually.
If there is any chance you can use the native bootstrap library? As it supports what you are looking for by default.
I have created a jsfiddle demonstrating this(please view it on your mobile device to see the tootlips working as expected)
HTML:
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
JS:
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
You can read up on it here, as a side note, you have to manually enable the tooltip
For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.
One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:
I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open