Igor Kulikov
3 years ago
13 changed files with 335 additions and 95 deletions
@ -0,0 +1,139 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Injectable } from '@angular/core'; |
||||
|
import { HttpClient } from '@angular/common/http'; |
||||
|
import { PageLink } from '@shared/models/page/page-link'; |
||||
|
import { defaultHttpOptionsFromConfig, defaultHttpUploadOptions, RequestConfig } from '@core/http/http-utils'; |
||||
|
import { Observable, of } from 'rxjs'; |
||||
|
import { PageData } from '@shared/models/page/page-data'; |
||||
|
import { |
||||
|
NO_IMAGE_DATA_URI, |
||||
|
ImageResourceInfo, |
||||
|
imageResourceType, |
||||
|
ImageResourceType, |
||||
|
IMAGES_URL_PREFIX, isImageResourceUrl |
||||
|
} from '@shared/models/resource.models'; |
||||
|
import { catchError, map, switchMap } from 'rxjs/operators'; |
||||
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
||||
|
import { blobToBase64 } from '@core/utils'; |
||||
|
|
||||
|
@Injectable({ |
||||
|
providedIn: 'root' |
||||
|
}) |
||||
|
export class ImageService { |
||||
|
constructor( |
||||
|
private http: HttpClient, |
||||
|
private sanitizer: DomSanitizer |
||||
|
) { |
||||
|
} |
||||
|
|
||||
|
public uploadImage(file: File, config?: RequestConfig): Observable<ImageResourceInfo> { |
||||
|
if (!config) { |
||||
|
config = {}; |
||||
|
} |
||||
|
const formData = new FormData(); |
||||
|
formData.append('file', file); |
||||
|
return this.http.post<ImageResourceInfo>('/api/image', formData, |
||||
|
defaultHttpUploadOptions(config.ignoreLoading, config.ignoreErrors, config.resendRequest)); |
||||
|
} |
||||
|
|
||||
|
public updateImage(type: ImageResourceType, key: string, file: File, config?: RequestConfig): Observable<ImageResourceInfo> { |
||||
|
if (!config) { |
||||
|
config = {}; |
||||
|
} |
||||
|
const formData = new FormData(); |
||||
|
formData.append('file', file); |
||||
|
return this.http.post<ImageResourceInfo>(`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(key)}`, formData, |
||||
|
defaultHttpUploadOptions(config.ignoreLoading, config.ignoreErrors, config.resendRequest)); |
||||
|
} |
||||
|
|
||||
|
public updateImageInfo(imageInfo: ImageResourceInfo, config?: RequestConfig): Observable<ImageResourceInfo> { |
||||
|
const type = imageResourceType(imageInfo); |
||||
|
const key = encodeURIComponent(imageInfo.resourceKey); |
||||
|
return this.http.put<ImageResourceInfo>(`${IMAGES_URL_PREFIX}/${type}/${key}/info`, |
||||
|
imageInfo, defaultHttpOptionsFromConfig(config)); |
||||
|
} |
||||
|
|
||||
|
public getImages(pageLink: PageLink, config?: RequestConfig): Observable<PageData<ImageResourceInfo>> { |
||||
|
return this.http.get<PageData<ImageResourceInfo>>(`${IMAGES_URL_PREFIX}${pageLink.toQuery()}`, defaultHttpOptionsFromConfig(config)); |
||||
|
} |
||||
|
|
||||
|
public getImageInfo(type: ImageResourceType, key: string, config?: RequestConfig): Observable<ImageResourceInfo> { |
||||
|
return this.http.get<ImageResourceInfo>(`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(key)}/info`, |
||||
|
defaultHttpOptionsFromConfig(config)); |
||||
|
} |
||||
|
|
||||
|
public getImageDataUrl(imageUrl: string, preview = false, asString = false): Observable<SafeUrl | string> { |
||||
|
const parts = imageUrl.split('/'); |
||||
|
const key = parts[parts.length - 1]; |
||||
|
parts[parts.length - 1] = encodeURIComponent(key); |
||||
|
const encodedUrl = parts.join('/'); |
||||
|
const imageLink = preview ? (encodedUrl + '/preview') : encodedUrl; |
||||
|
const options = defaultHttpOptionsFromConfig({ignoreLoading: true, ignoreErrors: true}); |
||||
|
return this.http |
||||
|
.get(imageLink, {...options, ...{ responseType: 'blob' } }).pipe( |
||||
|
switchMap(val => blobToBase64(val).pipe( |
||||
|
map((dataUrl) => asString ? dataUrl : this.sanitizer.bypassSecurityTrustUrl(dataUrl)) |
||||
|
)), |
||||
|
catchError(() => of(asString ? NO_IMAGE_DATA_URI : this.sanitizer.bypassSecurityTrustUrl(NO_IMAGE_DATA_URI))) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
public resolveImageUrl(imageUrl: string, preview = false, asString = false): Observable<SafeUrl | string> { |
||||
|
if (isImageResourceUrl(imageUrl)) { |
||||
|
return this.getImageDataUrl(imageUrl, preview, asString); |
||||
|
} else { |
||||
|
return of(asString ? imageUrl : this.sanitizer.bypassSecurityTrustUrl(imageUrl)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
public downloadImage(type: ImageResourceType, key: string): Observable<any> { |
||||
|
return this.http.get(`${IMAGES_URL_PREFIX}/${type}/${encodeURIComponent(key)}`, { |
||||
|
responseType: 'arraybuffer', |
||||
|
observe: 'response' |
||||
|
}).pipe( |
||||
|
map((response) => { |
||||
|
const headers = response.headers; |
||||
|
const filename = headers.get('x-filename'); |
||||
|
const contentType = headers.get('content-type'); |
||||
|
const linkElement = document.createElement('a'); |
||||
|
try { |
||||
|
const blob = new Blob([response.body], {type: contentType}); |
||||
|
const url = URL.createObjectURL(blob); |
||||
|
linkElement.setAttribute('href', url); |
||||
|
linkElement.setAttribute('download', filename); |
||||
|
const clickEvent = new MouseEvent('click', |
||||
|
{ |
||||
|
view: window, |
||||
|
bubbles: true, |
||||
|
cancelable: false |
||||
|
} |
||||
|
); |
||||
|
linkElement.dispatchEvent(clickEvent); |
||||
|
return null; |
||||
|
} catch (e) { |
||||
|
throw e; |
||||
|
} |
||||
|
}) |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
public deleteImage(type: ImageResourceType, key: string, config?: RequestConfig) { |
||||
|
return this.http.delete(`${IMAGES_URL_PREFIX}${type}/${encodeURIComponent}`, defaultHttpOptionsFromConfig(config)); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,52 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2023 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import { Pipe, PipeTransform } from '@angular/core'; |
||||
|
import { ImageService } from '@core/http/image.service'; |
||||
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
||||
|
import { BehaviorSubject, Observable, of, Subject } from 'rxjs'; |
||||
|
import { isDefinedAndNotNull } from '@core/utils'; |
||||
|
import { NO_IMAGE_DATA_URI } from '@shared/models/resource.models'; |
||||
|
|
||||
|
const LOADING_IMAGE_DATA_URI = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPgo='; |
||||
|
|
||||
|
@Pipe({ |
||||
|
name: 'image' |
||||
|
}) |
||||
|
export class ImagePipe implements PipeTransform { |
||||
|
|
||||
|
constructor(private imageService: ImageService, |
||||
|
private sanitizer: DomSanitizer) { } |
||||
|
|
||||
|
transform(url: string, args?: any): Observable<SafeUrl | string> { |
||||
|
const ignoreLoadingImage = !!args?.ignoreLoadingImage; |
||||
|
const asString = !!args?.asString; |
||||
|
const image$ = ignoreLoadingImage ? new Subject<SafeUrl | string>() : new BehaviorSubject<SafeUrl | string>(LOADING_IMAGE_DATA_URI); |
||||
|
if (isDefinedAndNotNull(url)) { |
||||
|
const preview = !!args?.preview; |
||||
|
this.imageService.resolveImageUrl(url, preview, asString).subscribe((imageUrl) => { |
||||
|
image$.next(imageUrl); |
||||
|
image$.complete(); |
||||
|
}); |
||||
|
} else { |
||||
|
const emptyUrl = args?.emptyUrl || NO_IMAGE_DATA_URI; |
||||
|
image$.next(asString ? emptyUrl : this.sanitizer.bypassSecurityTrustUrl(emptyUrl)); |
||||
|
image$.complete(); |
||||
|
} |
||||
|
return image$.asObservable(); |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue