Я использую Angular 6 для разработки веб-приложения, и я хотел бы также загрузить видео, аудио и файл документа вместо изображения. Я пробовал много решений, но не помогаю
Сейчас я могу загружать толькоизображение, но моя статья может содержать видео, аудио или документ
article.component.html
<div class="mb-3">
<div class="card">
<div class="card-body">
<h5 class="card-title"><span class="card-component-title">Article:</span> {{data.title}}</h5>
<div class="row">
<div class="col-md-12">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" >Title</span>
</div>
<input type="text" class="form-control" [(ngModel)]="data.title">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Subtitle</span>
</div>
<input type="text" class="form-control" [(ngModel)]="data.subtitle">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="text-right mb-3">
<button type="button" class="btn btn-sm btn-primary"
(click)="addContentLayout(editContentLayoutModal);">Add section</button>
</div>
<table class="table table-sm table-hover ">
<thead class="bg-light ">
<tr>
<th class="w-90">Title</th>
<th class="w-10 text-center">Delete</th>
</tr>
</thead>
<tbody dragula="ARTICLE-VAMPIRES" [(dragulaModel)]="data['data']">
<tr draggable *ngFor="let listItem of data.data; index as i" class="pointer-cursor">
<td (click)="openEditContentLayout(editContentLayoutModal, listItem)">{{listItem.title}}</td>
<td class="text-center">
<a href="javascript:void(0)" (click)="deleteItem(i)"><i class="fa fa-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<ng-template #editContentLayoutModal let-modal>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Edit Content</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<form [formGroup]="layoutFormContainer">
<div class="row">
<div class="col">
<div class="row">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" >Title</span>
</div>
<input type="text" class="form-control" formControlName="title">
</div>
</div>
<div class="row">
<quill-editor format="html" formControlName="content" class="h-100"></quill-editor>
</div>
</div>
<div class="col-4">
<ngx-image-uploader [options]="options" name="imageLayout" (upload)="onUpload($event)" formControlName="image"></ngx-image-uploader>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
</div>
</ng-template>
article.component.ts
import {Component, Input, OnInit} from '@angular/core';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { ImageUploaderOptions, FileQueueObject } from 'ngx-image-uploader';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
selector: 'app-article',
templateUrl: './article.component.html',
styleUrls: ['./article.component.scss']
})
export class ArticleComponent implements OnInit {
selectedSection: any;
@Input() data: any;
layoutFormContainer: FormGroup;
uploadedImageUrl: any;
options: ImageUploaderOptions = {
uploadUrl: 'http://46.101.253.10:3000/upload',
allowedImageTypes: ['image/png', 'image/jpeg','video/mp4','application/pdf'],
maxImageSize: 500
};
constructor(private modalService: NgbModal,
private formBuilder: FormBuilder) { }
ngOnInit() {
this.layoutFormContainer = this.formBuilder.group({
title: ['' , Validators.required],
content: ['' , Validators.required],
image: ['' , [Validators.required, Validators.email]]
});
}
openEditContentLayout(content: any, itemContent: any) {
console.log(itemContent.image)
this.selectedSection = itemContent;
this.uploadedImageUrl = null;
console.log(this.selectedSection);
this.layoutFormContainer.patchValue({
title: itemContent.title,
content: itemContent.content,
image: itemContent.image
});
this.modalService.open(content, { size: 'lg' }).result.then(() => {
this.selectedSection.title = this.layoutFormContainer.get('title').value;
this.selectedSection.content = this.layoutFormContainer.get('content').value;
this.selectedSection.image = this.uploadedImageUrl ?
this.uploadedImageUrl : this.layoutFormContainer.get('image').value;
}, () => {
});
}
addContentLayout(content: any) {
this.data.data.push({
title: 'Title',
content: 'Body'
});
this.openEditContentLayout(content, this.data.data[this.data.data.length - 1]);
}
deleteItem(index: number) {
if (confirm('Are you sure you want to delete this item?')) {
this.data.data.splice(index, 1);
}
}
onUpload(file: FileQueueObject) {
if (file.response && file.response['body'] && file.response['body']['url']) {
this.uploadedImageUrl = file.response['body']['url'];
}
}
}
appContent.service.ts :
import { Injectable } from '@angular/core';
import {AppConstants} from '@app/core/appConstants.service';
import {AppContentHttpService} from '@app/app-content/appContent.http.service';
@Injectable()
export class AppContentService {
_appContent: any;
_selectedPageContent: any;
_selectedCategory: any;
/**The goal is to disable or not the button Menu List */
disabled:boolean;
/**buttons of each category */
question:boolean;
// petitionsNationales, petitionsLocales or Motions
petitionMotion:boolean;
//media
media:boolean;
//Actialites
actualites:boolean;
//menuList:
constructor(private appContentHttp: AppContentHttpService,
private appConstants: AppConstants) {
}
/**
* Get data of all categories from api deponds on the language(fr,ar, en) and the userGroup(individual,association)
*/
syncData() {
this.appContentHttp.getAppContent(this.appConstants.language, this.appConstants.userGroup)
.subscribe(data => {
this._appContent = data;
console.log(data)
});
}
saveData() {
this.appContentHttp.saveAppContent(
this.appConstants.language,
this.appConstants.userGroup,
this._appContent
)
.subscribe();
}
/**
* That method that is launched when the side menu is clicked
* @param key
*/
selectCategory(key: string) {
console.log("key " +key)
if(key=="questionsAnswers"){
this.question=true;
this.petitionMotion=false;
this.actualites=false;
}
else if (key=="motions" || key=="petitionsNationales" || key=="petitionsLocales") {
this.question=false;
this.petitionMotion=true;
this.media=false;
this.actualites=false;
} else if (key=="media"){
this.question=false;
this.petitionMotion=false;
this.media=true;
this.actualites=false;
}else if(key=="actualites") {
console.log("toto")
this.actualites=true;
this.question=false;
this.media=false;
this.petitionMotion=false;
} else{
}
this._selectedPageContent = null;
/**if(this._appCpntent) {this._selectedCategory = this._appContent[key]} else this._selectedCategory = {} */
this._selectedCategory = this._appContent ? this._appContent[key] : {};
this.disabled=false;
}
/**
* That method displays the content if we click on article element, menu list or quiz of categories
* @param index
*/
selectPageContent(index: number) {
//TODO : why there was two similar conditions (this._selectedCategory && this._selectedCategory)
this._selectedPageContent = (this._selectedCategory) ? this._selectedCategory.data[index] : {};
/**equal true because we need to disable the button menu list of the menu list (category)
* in order to avoid to add it again when we click on menu list of the menu list of each category.
* Here the main idea is to add only one menu list for each category (A category is in the form of menu list)
*/
this.disabled=true;
console.log("_selectedPageContent:"+this._selectedPageContent)
}
get appSelectedPageContent(): any {
return this._selectedPageContent;
}
get appSelectedCategory(): any {
return this._selectedCategory;
}
get appContent(): any {
return this._appContent;
}
get isDisabled(): boolean {
return this.disabled;
}
}
Но я получаю эту ошибку в своей консоли и похоже, что она не может загрузить ее, пожалуйста, посмотритена изображении ниже
Иногда я тоже получаю это:
Может кто-нибудь помочь мне, пожалуйста, я потратил много дней на поиск решения