আমি জানি এটি খুব সাধারণ প্রশ্ন তবে আমি কৌনিক 2 এ কোনও ফাইল আপলোড করতে ব্যর্থ হচ্ছি I
1) http://valor-software.com/ng2-file-upload/ এবং
2) http://ng2-uploader.com/home
... তবে ব্যর্থ কেউ কৌণিকের মধ্যে একটি ফাইল আপলোড করেছেন? আপনি কোন পদ্ধতি ব্যবহার করেছেন? কীভাবে করবেন? যদি কোনও নমুনা কোড বা ডেমো লিঙ্ক সরবরাহ করা হয় তবে এটি সত্যই প্রশংসিত হবে।
উত্তর:
কৌণিক 2 ফাইল আপলোড করার জন্য ভাল সমর্থন সরবরাহ করে। কোনও তৃতীয় পক্ষের গ্রন্থাগারের প্রয়োজন নেই।
<input type="file" (change)="fileChange($event)" placeholder="Upload file" accept=".pdf,.doc,.docx">fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
let file: File = fileList[0];
let formData:FormData = new FormData();
formData.append('uploadFile', file, file.name);
let headers = new Headers();
/** In Angular 5, including the header Content-Type can invalidate your request */
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
let options = new RequestOptions({ headers: headers });
this.http.post(`${this.apiEndPoint}`, formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
)
}
}@ কৌণিক / কোর ":" ~ 2.0.0 "এবং @ কৌণিক / http ব্যবহার:
headers.append('enctype', 'multipart/form-data');লাইনটিতে কাজ করতে হয়েছিল- ('বিষয়বস্তুর ধরণ' প্রতিস্থাপন করতে 'এনটাইটাইপ' ব্যবহার করা হয়েছিল)। সম্ভবত এটি সার্ভার-সাইড কোডের উপর নির্ভর করে। (যেমন এপিআই)
উপরের উত্তরগুলি থেকে আমি এঙ্গুলার 5.x দিয়ে এটি তৈরি করি
শুধু uploadFile(url, file).subscribe()একটি আপলোড ট্রিগার কল
import { Injectable } from '@angular/core';
import {HttpClient, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';
import {Observable} from "rxjs";
@Injectable()
export class UploadService {
constructor(private http: HttpClient) { }
// file from event.target.files[0]
uploadFile(url: string, file: File): Observable<HttpEvent<any>> {
let formData = new FormData();
formData.append('upload', file);
let params = new HttpParams();
const options = {
params: params,
reportProgress: true,
};
const req = new HttpRequest('POST', url, formData, options);
return this.http.request(req);
}
}এটি আপনার উপাদানটিতে এটি ব্যবহার করুন
// At the drag drop area
// (drop)="onDropFile($event)"
onDropFile(event: DragEvent) {
event.preventDefault();
this.uploadFile(event.dataTransfer.files);
}
// At the drag drop area
// (dragover)="onDragOverFile($event)"
onDragOverFile(event) {
event.stopPropagation();
event.preventDefault();
}
// At the file input element
// (change)="selectFile($event)"
selectFile(event) {
this.uploadFile(event.target.files);
}
uploadFile(files: FileList) {
if (files.length == 0) {
console.log("No file selected!");
return
}
let file: File = files[0];
this.upload.uploadFile(this.appCfg.baseUrl + "/api/flash/upload", file)
.subscribe(
event => {
if (event.type == HttpEventType.UploadProgress) {
const percentDone = Math.round(100 * event.loaded / event.total);
console.log(`File is ${percentDone}% loaded.`);
} else if (event instanceof HttpResponse) {
console.log('File is completely loaded!');
}
},
(err) => {
console.log("Upload Error:", err);
}, () => {
console.log("Upload done");
}
)
}let params = new HttpParams(); let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + localStorage.getItem('accessToken'), }); const options = { headers: headers, params: params, reportProgress: true, };
Observableও HttpEventসম্পূর্ণরূপে যদি তুমি টাইপ অনুমান ব্যবহার করার জন্য ফাংশনের রিটার্ন টাইপ প্রদান সঙ্গে ঠিক বাদ দেওয়া যেতে পারে uploadFile()! this.http.request()ইতিমধ্যে একটি ধরণের রিটার্ন দেয় Observable<HttpEvent<{}>>, সুতরাং আপনি যদি অনুরোধটি জেনেরিক টাইপ কল করেন (যেমন this.http.request<any>()পুরো পুরো ফাংশনটি কেবল সঠিক ধরণের সাথে কাজ করে।
input type="file" (change)="addFiles($event)" style="display: none" #file multiple> <button mat-raised-button color="primary" (click)="selectFile($event)">Upload File </button>
ধন্যবাদ ইশ্বরকে। এই কোডটি আমার জন্য পুরোপুরি কাজ করেছিল worked আমি সমাধানটিতে কিছু জিনিস যুক্ত করতে চাই:
আমি ত্রুটি পাচ্ছিলাম: java.io.IOException: RESTEASY007550: Unable to get boundary for multipart
এই ত্রুটিটি সমাধান করার জন্য আপনার "সামগ্রী-প্রকার" "মাল্টিপার্ট / ফর্ম-ডেটা" মুছে ফেলা উচিত। এটি আমার সমস্যার সমাধান করেছে।
multipart/form-data; boundary=---------------------------186035562730765173675680113। আরো দেখুন stackoverflow.com/a/29697774/1475331 এবং github.com/angular/angular/issues/11819 ।
java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found"যা আপনার অনুরূপ, তবে আমি যখন Content-Typeশিরোনামটি সরিয়ে ফেলি তখন আমি ব্যাকএন্ড থেকে 404 পাই। আমরা স্প্রিং এবং কৌণিক 2 ব্যবহার করছি Any
কোড নমুনাটি কিছুটা পুরানো হওয়ায় আমি ভেবেছিলাম যে আমি কৌনিক 4.3 এবং নতুন (এর) এইচটিপিপ্লিনেন্ট এপিআই, @ কৌনিক / সাধারণ / HTTP ব্যবহার করে একটি সাম্প্রতিক পদ্ধতির ভাগ করব
export class FileUpload {
@ViewChild('selectedFile') selectedFileEl;
uploadFile() {
let params = new HttpParams();
let formData = new FormData();
formData.append('upload', this.selectedFileEl.nativeElement.files[0])
const options = {
headers: new HttpHeaders().set('Authorization', this.loopBackAuth.accessTokenId),
params: params,
reportProgress: true,
withCredentials: true,
}
this.http.post('http://localhost:3000/api/FileUploads/fileupload', formData, options)
.subscribe(
data => {
console.log("Subscribe data", data);
},
(err: HttpErrorResponse) => {
console.log(err.message, JSON.parse(err.error).error.message);
}
)
.add(() => this.uploadBtn.nativeElement.disabled = false);//teardown
}
কৌণিক 2+ তে কন্টেন্ট-প্রকারটি খালি রাখা খুব গুরুত্বপূর্ণ । আপনি যদি 'কনটেন্ট-টাইপ' সেট করে 'মাল্টিপার্ট / ফর্ম-ডেটা' সেট করেন তবে আপলোডটি কাজ করবে না!
upload.component.html
<input type="file" (change)="fileChange($event)" name="file" />
upload.component.ts
export class UploadComponent implements OnInit {
constructor(public http: Http) {}
fileChange(event): void {
const fileList: FileList = event.target.files;
if (fileList.length > 0) {
const file = fileList[0];
const formData = new FormData();
formData.append('file', file, file.name);
const headers = new Headers();
// It is very important to leave the Content-Type empty
// do not use headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', 'Bearer ' + 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9....');
const options = new RequestOptions({headers: headers});
this.http.post('https://api.mysite.com/uploadfile', formData, options)
.map(res => res.json())
.catch(error => Observable.throw(error))
.subscribe(
data => console.log('success'),
error => console.log(error)
);
}
}
}
সাফল্যের সাথে প্রাইমিং থেকে আমি নীচের সরঞ্জামটি ব্যবহার করেছি। প্রাইমএনজি নিয়ে আমার খেলায় কোনও ত্বক নেই, কেবল আমার পরামর্শটি মেনে চলছে।
এই সহজ সমাধানটি আমার পক্ষে কাজ করেছে: file-upload.componal.html
<div>
<input type="file" #fileInput placeholder="Upload file..." />
<button type="button" (click)="upload()">Upload</button>
</div>
এবং তারপরে এক্সএমএলএইচটিপিআরকোয়েস্ট দিয়ে সরাসরি উপাদানটিতে আপলোড করুন ।
import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
selector: 'app-file-upload',
templateUrl: './file-upload.component.html',
styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {
@ViewChild('fileInput') fileInput;
constructor() { }
ngOnInit() {
}
private upload() {
const fileBrowser = this.fileInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
const formData = new FormData();
formData.append('files', fileBrowser.files[0]);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/Data/UploadFiles', true);
xhr.onload = function () {
if (this['status'] === 200) {
const responseText = this['responseText'];
const files = JSON.parse(responseText);
//todo: emit event
} else {
//todo: error handling
}
};
xhr.send(formData);
}
}
}
আপনি যদি ডটনেট কোর ব্যবহার করছেন তবে প্যারামিটারের নামটি অবশ্যই ক্ষেত্রের নামের সাথে মেলে। এই ক্ষেত্রে ফাইলগুলি:
[HttpPost("[action]")]
public async Task<IList<FileDto>> UploadFiles(List<IFormFile> files)
{
return await _binaryService.UploadFilesAsync(files);
}
এই উত্তরটি http://blog.teamtreehouse.com/uploading-files-ajax এর একটি প্লাগিয়েট
সম্পাদনা : আপলোড করার পরে আপনাকে ফাইল-আপলোড সাফ করতে হবে যাতে ব্যবহারকারী কোনও নতুন ফাইল নির্বাচন করতে পারেন। এবং এক্সএমএলএইচটিপিপিউকেস্ট ব্যবহার করার পরিবর্তে, ফেচ ব্যবহার করা আরও ভাল:
private addFileInput() {
const fileInputParentNative = this.fileInputParent.nativeElement;
const oldFileInput = fileInputParentNative.querySelector('input');
const newFileInput = document.createElement('input');
newFileInput.type = 'file';
newFileInput.multiple = true;
newFileInput.name = 'fileInput';
const uploadfiles = this.uploadFiles.bind(this);
newFileInput.onchange = uploadfiles;
oldFileInput.parentNode.replaceChild(newFileInput, oldFileInput);
}
private uploadFiles() {
this.onUploadStarted.emit();
const fileInputParentNative = this.fileInputParent.nativeElement;
const fileInput = fileInputParentNative.querySelector('input');
if (fileInput.files && fileInput.files.length > 0) {
const formData = new FormData();
for (let i = 0; i < fileInput.files.length; i++) {
formData.append('files', fileInput.files[i]);
}
const onUploaded = this.onUploaded;
const onError = this.onError;
const addFileInput = this.addFileInput.bind(this);
fetch('/api/Data/UploadFiles', {
credentials: 'include',
method: 'POST',
body: formData,
}).then((response: any) => {
if (response.status !== 200) {
const error = `An error occured. Status: ${response.status}`;
throw new Error(error);
}
return response.json();
}).then(files => {
onUploaded.emit(files);
addFileInput();
}).catch((error) => {
onError.emit(error);
});
}
এটি এনজি 2-ফাইল-আপলোড এবং এনজি 2-ফাইল-আপলোড ছাড়াই কীভাবে ফাইল আপলোড করবেন তা দরকারী টিউটোরিয়াল ।
আমার জন্য এটি অনেক সাহায্য করে।
এই মুহুর্তে, টিউটোরিয়ালে কয়েকটি ভুল রয়েছে:
1- ক্লায়েন্টের সার্ভার হিসাবে একই আপলোড url থাকা উচিত, তাই app.component.tsপরিবর্তন লাইনে
const URL = 'http://localhost:8000/api/upload';
প্রতি
const URL = 'http://localhost:3000';
2- সার্ভার প্রতিক্রিয়াটিকে 'টেক্সট / এইচটিএমএল' হিসাবে প্রেরণ করে, তাই app.component.tsপরিবর্তিত হয়
.post(URL, formData).map((res:Response) => res.json()).subscribe(
//map the success function and alert the response
(success) => {
alert(success._body);
},
(error) => alert(error))
প্রতি
.post(URL, formData)
.subscribe((success) => alert('success'), (error) => alert(error));
ফর্ম ক্ষেত্রগুলি সহ চিত্র আপলোড করতে
SaveFileWithData(article: ArticleModel,picture:File): Observable<ArticleModel>
{
let headers = new Headers();
// headers.append('Content-Type', 'multipart/form-data');
// headers.append('Accept', 'application/json');
let requestoptions = new RequestOptions({
method: RequestMethod.Post,
headers:headers
});
let formData: FormData = new FormData();
if (picture != null || picture != undefined) {
formData.append('files', picture, picture.name);
}
formData.append("article",JSON.stringify(article));
return this.http.post("url",formData,requestoptions)
.map((response: Response) => response.json() as ArticleModel);
}
আমার ক্ষেত্রে আমার দরকার। সি # তে নেট ওয়েব অপি
// POST: api/Articles
[ResponseType(typeof(Article))]
public async Task<IHttpActionResult> PostArticle()
{
Article article = null;
try
{
HttpPostedFile postedFile = null;
var httpRequest = HttpContext.Current.Request;
if (httpRequest.Files.Count == 1)
{
postedFile = httpRequest.Files[0];
var filePath = HttpContext.Current.Server.MapPath("~/" + postedFile.FileName);
postedFile.SaveAs(filePath);
}
var json = httpRequest.Form["article"];
article = JsonConvert.DeserializeObject <Article>(json);
if (!ModelState.IsValid)
{
return BadRequest(ModelState);
}
article.CreatedDate = DateTime.Now;
article.CreatedBy = "Abbas";
db.articles.Add(article);
await db.SaveChangesAsync();
}
catch (Exception ex)
{
int a = 0;
}
return CreatedAtRoute("DefaultApi", new { id = article.Id }, article);
}
আজ আমি আমার কৌণিক 6 অ্যাপ্লিকেশনটিতে এনজি 2-ফাইল-আপলোড প্যাকেজ সংহত করেছি , এটি বেশ সহজ ছিল, দয়া করে নীচের উচ্চ-স্তরের কোডটি সন্ধান করুন।
এনজি 2-ফাইল-আপলোড মডিউলটি আমদানি করুন
app.module.ts
import { FileUploadModule } from 'ng2-file-upload';
------
------
imports: [ FileUploadModule ],
------
------
কম্পোনেন্ট ts ফাইল আমদানি ফাইলআপলোডার
app.component.ts
import { FileUploader, FileLikeObject } from 'ng2-file-upload';
------
------
const URL = 'http://localhost:3000/fileupload/';
------
------
public uploader: FileUploader = new FileUploader({
url: URL,
disableMultipart : false,
autoUpload: true,
method: 'post',
itemAlias: 'attachment'
});
public onFileSelected(event: EventEmitter<File[]>) {
const file: File = event[0];
console.log(file);
}
------
------
কম্পোনেন্ট এইচটিএমএল ফাইল ট্যাগ যুক্ত করুন
app.component.html
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" (onFileSelected)="onFileSelected($event)" />
ওয়ার্কিং অনলাইন স্ট্যাকব্লিটজ লিঙ্ক: https://ng2-file-upload-example.stackblitz.io
স্ট্যাকব্লিটজ কোড উদাহরণ: https://stackblitz.com/edit/ng2-file-upload-example
অফিসিয়াল ডকুমেন্টেশন লিঙ্ক https://valor-software.com/ng2-file-upload/
সহজতম ফর্মটিতে, নিম্নলিখিত কোডটি কৌনিক 6/7 এ কাজ করে
this.http.post("http://destinationurl.com/endpoint", fileFormData)
.subscribe(response => {
//handle response
}, err => {
//handle error
});
এখানে সম্পূর্ণ বাস্তবায়ন
jspdf এবং কৌণিক 8
আমি একটি পিডিএফ তৈরি করি এবং পিওএসটি অনুরোধের সাথে পিডিএফ আপলোড করতে চাই, আমি এটিই করি (স্পষ্টতার জন্য, আমি কিছু কোড এবং পরিষেবা স্তর মুছি)
import * as jsPDF from 'jspdf';
import { HttpClient } from '@angular/common/http';
constructor(private http: HttpClient)
upload() {
const pdf = new jsPDF()
const blob = pdf.output('blob')
const formData = new FormData()
formData.append('file', blob)
this.http.post('http://your-hostname/api/upload', formData).subscribe()
}
আমি রেফারেন্স ব্যবহার করে ফাইল আপলোড করেছি। এইভাবে ফাইল আপলোড করার জন্য কোনও প্যাকেজের প্রয়োজন নেই।
// কোড কোড .ts ফাইল লিখতে হবে
@ViewChild("fileInput") fileInput;
addFile(): void {
let fi = this.fileInput.nativeElement;
if (fi.files && fi.files[0]) {
let fileToUpload = fi.files[0];
this.admin.addQuestionApi(fileToUpload)
.subscribe(
success => {
this.loading = false;
this.flashMessagesService.show('Uploaded successfully', {
classes: ['alert', 'alert-success'],
timeout: 1000,
});
},
error => {
this.loading = false;
if(error.statusCode==401) this.router.navigate(['']);
else
this.flashMessagesService.show(error.message, {
classes: ['alert', 'alert-danger'],
timeout: 1000,
});
});
}
}
// কোড.সেবার.টসে ফাইল লিখতে হবে
addQuestionApi(fileToUpload: any){
var headers = this.getHeadersForMultipart();
let input = new FormData();
input.append("file", fileToUpload);
return this.http.post(this.baseUrl+'addQuestions', input, {headers:headers})
.map(response => response.json())
.catch(this.errorHandler);
}
// কোডটি এইচটিএমএল লিখতে হবে
<input type="file" #fileInput>