I am having issues with jQuery file upload integration onto my project. In my previous post, javascript DropZone Dynamic Issue, I couldn't find a solution so I am looking for alternatives.
I want to be able to use this in a bootstrap modal, but I couldn't get it working. If I just set it outside of modal, it is working fine.
To simplify the code, I pretty much copy and paste from jQuery File Upload website: https://blueimp.github.io/jQuery-File-Upload/index.html. You can find the code below. Setting the code below inside modal, it won't work. Outside of modal, it'll work fine.
What I tried is setting the z-index of table to 9999, but that didn't do any good. The table is not showing the thumbnail or anything.
Any suggestions?
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- 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">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
<br>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Demo Notes</h3>
</div>
<div class="panel-body">
<ul>
<li>The maximum file size for uploads in this demo is <strong>999 KB</strong> (default file size is unlimited).</li>
<li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
<li>Uploaded files will be deleted automatically after <strong>5 minutes or less</strong> (demo files are stored in memory).</li>
<li>You can <strong>drag & drop</strong> files from your desktop on this webpage (see Browser support).</li>
<li>Please refer to the project website and documentation for more information.</li>
<li>Built with the Bootstrap CSS framework and Icons from Glyphicons.</li>
</ul>
</div>
</div>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
<td>
<span class="preview"></span>
</td>
<td>
<p class="name">{%=file.name%}</p>
<strong class="error text-danger"></strong>
</td>
<td>
<p class="size">Processing...</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%;"></div></div>
</td>
<td>
{% if (!i && !o.options.autoUpload) { %}
<button class="btn btn-primary start" disabled>
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
{% } %}
{% if (!i) { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<td>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
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'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>
I use blueimp-gallery with the bootstrap plugin and all portrait pictures are 90° rotate on left. Is this a bug from blueimp or navigator?
Here is my code:
<!-- Gallery -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
<!-- The container for the modal slides -->
<div class="slides"></div>
<!-- Controls for the borderless lightbox -->
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
<!-- The modal dialog, which will be used to wrap the lightbox content -->
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body next"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left prev">
<i class="glyphicon glyphicon-chevron-left"></i>
Previous
</button>
<button type="button" class="btn btn-primary next">
Next
<i class="glyphicon glyphicon-chevron-right"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="links" class="hidden">
{% for image in images %}
<a href="{{ image.image.url }}" title="{{ image.name }}" data-gallery>
<img src="{{ image.image.url }}" alt="{{ image.name }}">
</a>
{% endfor %}
</div>
And the javascript:
$("#diapBtn").on('click', function(e){
links = $('#links a');
blueimp.Gallery(links, {useBootstrapModal: false});
});
The blueimp-gallery documentation doesn't talk about flip or rotation of pictures.
I have worked with Django and Bootstrap, and I have a problem with onclick attribute. When I click on a button, it does not show me nothing. Here are the HTML:
{% extends 'base_profile.html' %}
{% block profile %}
<br />
<div id="content">
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<div class="container">
<div class="fb-profile">
<img id='background_picture' align="left" class="fb-image-lg" src="https://s-media-cache-ak0.pinimg.com/originals/ad/38/bd/ad38bd348826054d3fd5e940950b1124.jpg" alt="Profile image example"/>
{% load staticfiles %}
<img id='profile_picture' align="left" class="fb-image-profile thumbnail" src="{% static 'media/{{path}}' %}" alt="media/{{path}}"/>
<!-- 200 x 200 -->
<div class="fb-profile-text">
{{ user.first_name }} {{ user.last_name }}
<div id="wrap">
<p>
<ul class="nav nav-tabs">
<li role="presentation" class="active">My profile</li>
<li role="presentation">Fallowers</li>
<li role="presentation">Fallowing</li>
<li role="presentation">Logout</li>
<li role="presentation">
<button id="compose" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Compose Twitt
</button> </li>
</ul>
</p>
<p>{{ user_profile.moto }}</p>
{% for twitt in all_twitters reversed %}
<hr>
<div class="media">
<div class="media-left media-middle">
<a href="#">
{% load staticfiles %}
<img class="media-object" src="{% static 'twittapp/images/logo_profile.png' %}" alt="Some picture">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">{{ user.first_name }} {{ user.last_name }}</h4>
{{ twitt.content }}
</div>
</div>
<hr>
<span class="glyphicon glyphicon-trash"></span> Delete
<span class="glyphicon glyphicon-comment"></span> Comment
<span class="glyphicon glyphicon-eye-open"></span> See the comments
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">Compose Twitt</h4>
</div>
<form action="/profile/compose/" method="post">{% csrf_token %}
<div class="modal-body">
<textarea style="resize:none" class="form-control" rows="3" cols="20" name="twitt_content" id="textarea"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="save_twitt" type="submit" class="btn btn-primary">Twitt</button>
</div>
<p id="left_chars">sdks</p>
</form>
</div>
</div>
</div>
{% endblock profile %}
Here is a function located in the external js file:
function deleteTwitt(){
$.post('/delete', {twitt_id: '{{ twitt.id }}'});
};
First make sure you have embedded external js file using script tag in current page and if it is not then please embed it and check. If file is embedded then just change following in your HTML code
<span class="glyphicon glyphicon-trash"></span> Delete
Here I just removed "javascript:void(0)" from href of anchor tag. Still if it's does not work then let me know.