I'm trying to implement copying multiple images from adobe illustrator and pasting it in web page to upload. I could achieve the same for single image but when I copy multiple images, all the images together act as single image.
Below is the code
<mat-card class="imageUpload" (paste)=handlePaste($event)></mat-card>
handlePaste(event: any) {
const items = (event.clipboardData ||
event.originalEvent.clipboardData).items;
let blob = null;
for (const item of items) {
if (item.type.indexOf('image') === 0) {
blob = item.getAsFile();
const reader = new FileReader();
reader.onload = (evt: any) => {
this.onUpload("blob.name", evt.target.result);
};
reader.readAsDataURL(blob);
}
}
}
Related
I have a file upload control in my angular app where user could upload any type of file except a few ones .exe, .sql etc
<input type="file" id="file" #file (change)="fileUploadHandler($event)" multiple>
fileupload.component.ts
fileUploadHandler(event: Event) {
const inputElement = event.target as HTMLInputElement;
if (inputElement.files && inputElement.files?.length) {
_each(inputElement.files, (_file) => {
const fileSize = _file.size;
if (fileSize < this.MAX_DOC_SIZE) {
const fileName = _file.name?.trim();
const doc = new Document();
doc.name = fileName;
doc.extension = fileName.slice(fileName.lastIndexOf('.') + 1);
doc.size = fileSize;
this.docs.push(doc);
}
});
}}
This list the files in UI as below
Now what I need is that when user click on a file, that file should open in a new tab
how can I do this?
On googling I see suggestions to use FileReader & gave a try
_each(inputElement.files, (_file) => {
const reader = new FileReader();
const data = reader.readAsDataURL(_file);
console.log(data) // nothing is printed on console
Please suggest. Thanks!
You have to enhance the code a little bit (as #mav-raj also stated). In Angular you can use the following:
_each(inputElement.files, (_file) => {
const reader = new FileReader();
reader.onloadend = ((result) => {
console.log(result) // now something will be printed!
});
reader.readAsDataURL(_file);
})
I am using the below script to implement light and dark theme support on my website. For contrast reasons I would like to display a light version of the image (img1.png) when the dark theme is enabled and a dark version of the image (img2.png) when the light theme is enabled. I am using the img tag in the HTML file to insert the image, but I am usure how I could go about doing that. Given I must specify a path to one image image in the html file.
Is there any way I can create a variable and somehow make it dependent on the local storage variable I create? How should I go about it?
let darkTheme = localStorage.getItem('darkTheme');
const themeToggle = document.querySelector('#themeButton');
const bodyBackground = document.getElementById('#body');
const enableDark = () => {
document.body.classList.add('darktheme');
localStorage.setItem('darkTheme', 'enabled');
themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="sun"></i>`;
lucide.createIcons();
};
const disableDark = () => {
document.body.classList.remove('darktheme');
localStorage.setItem('darkTheme', null);
themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="moon"></i>`;
lucide.createIcons();
};
if (darkTheme === 'enabled') {
document.body.classList.add('notransition');
enableDark();
document.body.classList.remove('notransition');
} else {
disableDark();
}
themeToggle.addEventListener('click', () => {
darkTheme = localStorage.getItem('darkTheme');
if (darkTheme !== 'enabled') {
enableDark();
} else {
disableDark();
}
});
I am trying to preview selected file in Angular 9.
<h3>Angular 9 Image Preview before Upload:</h3>
<input #file type="file" accept='image/*' (change)="preview(file.files)" />
<img [src]="imgURL" height="200" *ngIf="imgURL">
And ts file is
preview(files) {
if (files.length === 0)
return;
var mimeType = files[0].type;
if (mimeType.match(/image\/*/) == null) {
let message = "Only images are supported.";
return;
}
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (_event) => {
this.imgURL = _event.target.result;
}
}
But when first time i select the file i dont get any display, next time when i upload a file i get the display of last file i selected. I saw many working example with the same concept on internet, Is there any change in file upload login for new angular version i.e Angular 9.
After some RnD got the solution. We need to call detectChanges() after the imgUrl is changed.
preview(files) {
if (files.length === 0)
return;
var mimeType = files[0].type;
if (mimeType.match(/image\/*/) == null) {
let message = "Only images are supported.";
return;
}
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (_event) => {
this.imgURL = _event.target.result;
this.ref.detectChanges();
}
}
the above solution worked fine for me.
I can select multiple images and watch their preview, but I can't sort them out or drag them to change positions.
Can anyone help me implement this?
Thank you very much.
Component ts
files:any;
urls = new Array<string>();
detectFiles(event) {
// this.urls = [];
this.files = event.target.files;
if (this.files.length < 7) {
for (let file of this.files) {
let reader = new FileReader();
reader.onload = (e: any) => {
this.urls.push(e.target.result);
}
reader.readAsDataURL(file);
}
}
}
There is an angular library available called ngx-drag-drop. You can make use of that.
npm link => https://www.npmjs.com/package/ngx-drag-drop
Stackblitz links:
https://stackblitz.com/edit/ngx-drag-and-drop-lists-5apzjp
https://stackblitz.com/edit/angular-ngx-drag-drop-test-ut3rj7
I'm using Dart to develop a personal whiteboard Chrome app and it is sometimes useful to be able to quickly copy and paste an image (e.g. a slide from a presentation, a diagram or a handout) so that I can add notes over the image while teaching a class or giving a presentation.
How can I paste an image stored on the clipboard onto a canvas element in Dart?
Actually, this answer to the same question for JS is almost directly applicable. A Dart translation might look something like:
import 'dart:html';
void main() {
var can = new CanvasElement()
..width = 600
..height = 600
;
var con = can.getContext('2d');
document.onPaste.listen((e) {
var blob = e.clipboardData.items[0].getAsFile();
var reader = new FileReader();
reader.onLoad.listen((e) {
var img = new ImageElement()
..src = (e.target as FileReader).result;
img.onLoad.listen((_) {
con.drawImage(img, 0, 0);
});
});
reader.readAsDataUrl(blob);
});
document.body.children.add(can);
}