I am trying to upload video file to the remote server using ionic framework capacitor and webApi. But when run the code, it is showing the error like Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content with ionic.
My Code: MyController.cs(webApi):
[Route("api/Upload")]
public async Task<string> Upload()
{
try
{
var fileuploadPath = ConfigurationManager.AppSettings["FileUploadLocation"];
var provider = new MultipartFormDataStreamProvider(fileuploadPath);
var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true));
foreach (var header in Request.Content.Headers)
{
content.Headers.TryAddWithoutValidation(header.Key, header.Value);
}
await content.ReadAsMultipartAsync(provider);
string uploadingFileName = provider.FileData.Select(x => x.LocalFileName).FirstOrDefault();
string originalFileName = String.Concat(fileuploadPath, "\\" + (provider.Contents[0].Headers.ContentDisposition.FileName).Trim(new Char[] { '"' }));
if (File.Exists(originalFileName))
{
File.Delete(originalFileName);
}
File.Move(uploadingFileName, originalFileName);
return "success";
}
catch (Exception ex)
{
return ex.Message;
}
}
webconfig.cs:
<add key="FileUploadLocation" value="D:\Asp.Net\Fileupload" />
upload.html:
<input #fileInput type="file" [multiple]="true" (change)="uploadFiles( fileInput.files ); fileInput.value = null;"/>
upload.ts:
public async uploadFiles( files: File[] ) : Promise<void>
{
Array.from(files).forEach(async(file1:any)=>
{
try
{
this.uploads.push(await this.Service.uploadFile(file1));
}
catch ( error )
{
console.warn( "File upload failed." );
console.error( error );
}
});
}
service.ts:
public async uploadFile( file: File ) : Promise<UploadResult>
{
var result = await this.httpClient.post<ApiUploadResult>("http://12.99.45.21:8021/Mobile/api/Upload",file, // Send the File Blob as the POST body.
{
headers: {
"Content-Type": file.type
},
params: {
clientFilename: file.name,
mimeType: file.type
}
}
)
.toPromise();
return({
name: file.name,
type: file.type,
size: file.size,
url: result.url,
});
}
I got 200 ok status. But the video file is not saved on the specify path. But when I run the API on postman, it is working fine.
Please help to resolve this issue.
Related
I am trying to upload video file to the remote server using ionic framework capacitor and webApi. But when run the code, it is showing the error like Invalid 'HttpContent' instance provided. It does not have a content type header starting with 'multipart/'. Parameter name: content with ionic.
My Code:
MyController.cs(webApi):
[Route("api/Upload")]
public async Task<string> Upload()
{
try
{
var fileuploadPath = ConfigurationManager.AppSettings["FileUploadLocation"];
var provider = new MultipartFormDataStreamProvider(fileuploadPath);
var content = new StreamContent(HttpContext.Current.Request.GetBufferlessInputStream(true));
foreach (var header in Request.Content.Headers)
{
content.Headers.TryAddWithoutValidation(header.Key, header.Value);
}
await content.ReadAsMultipartAsync(provider);
string uploadingFileName = provider.FileData.Select(x => x.LocalFileName).FirstOrDefault();
string originalFileName = String.Concat(fileuploadPath, "\\" + (provider.Contents[0].Headers.ContentDisposition.FileName).Trim(new Char[] { '"' }));
if (File.Exists(originalFileName))
{
File.Delete(originalFileName);
}
File.Move(uploadingFileName, originalFileName);
return "success";
}
catch (Exception ex)
{
return ex.Message;
}
}
webconfig.cs:
<add key="FileUploadLocation" value="D:\Asp.Net\Fileupload" />
upload.html:
<input #fileInput type="file" [multiple]="true" (change)="uploadFiles( fileInput.files ); fileInput.value = null;"/>
upload.ts:
public async uploadFiles( files: File[] ) : Promise<void>
{
Array.from(files).forEach(async(file1:any)=>
{
try
{
this.uploads.push(await this.Service.uploadFile(file1));
}
catch ( error )
{
console.warn( "File upload failed." );
console.error( error );
}
});
}
service.ts:
public async uploadFile( file: File ) : Promise<UploadResult>
{
var result = await this.httpClient.post<ApiUploadResult>("http://12.99.45.21:8021/Mobile/api/Upload",file, // Send the File Blob as the POST body.
{
headers: {
"Content-Type": file.type
},
params: {
clientFilename: file.name,
mimeType: file.type
}
}
)
.toPromise();
return({
name: file.name,
type: file.type,
size: file.size,
url: result.url,
});
}
I have a problem with Vue3+service worker+keep-alive.
I use keep-live in template
<q-page-container>
<router-view v-slot="{ Component }">
<keep-alive :include="['WorkPage']">
<component :is="Component" :key="$route.fullPath"/>
</keep-alive>
</router-view>
</q-page-container>
create queue
createWorkQueue = new Queue('createWorkQueue', {
onSync: async ( {queue} ) => {
let entry
while (entry = await queue.shiftRequest()) {
try {
await fetch(entry.request);
const channel = new BroadcastChannel('sw-messages-work');
channel.postMessage({msg: 'offline-work-uploaded'});
} catch (error) {
await queue.unshiftRequest(entry);
throw error;
}
}
}
})
addEventListener('fetch'
self.addEventListener('fetch', (event) => {
if (event.request.url.endsWith('/api/ins_new_work')) {
const bgSyncLogic = async () => {
try {
const response = await fetch(event.request.clone())
return response
} catch (error) {
await createWorkQueue.pushRequest({request: event.request})
return error
}
}
event.respondWith(bgSyncLogic())
}
})
when in offline I send form - createWorkQueue.pushRequest hangs to 5 minutes
if I delete from keep-alive - WorkPage - then pushRequest works well
but I need keep-alive page. How can I solve this?
I found!!
I use IndexedDB library and for show offline message I read from DB information
const db = await openDB('workbox-background-sync')
but in first time - table 'requests' don't create
I insert next code
const db = await openDB('workbox-background-sync', undefined, { upgrade(db) { db.createObjectStore('requests') }})
and works well
I'm using MongoDB Stitch to upload images using React Native, and I can successfully upload text and what appears to be an image, but I can't open the image from S3.
I'm using the following code from their example in a Stitch function (https://docs.mongodb.com/stitch/services/aws/):
exports = async function(key, body) {
const s3 = context.services.get('MY_S3_SERVICE').s3("us-east-1");
try {
const result = await s3.PutObject({
"Bucket": "my_bucket_on_s3",
"Key": key,
"Body": body
});
console.log(EJSON.stringify(result));
return result;
} catch(error) {
console.error(EJSON.stringify(error));
}
};
From the client side I'm using react-native-image-picker to pick the image, and upload it like so:
handleSelectedImage = response => {
if (response.didCancel) {
console.log('User cancelled image picker')
} else if (response.error) {
console.log('ImagePicker Error: ', response.error)
} else if (response.customButton) {
console.log('User tapped custom button: ', response.customButton)
} else {
const source = { uri: response.uri }
//const s = { uri: 'data:image/jpeg;base64,' + response.data }
const imageId = generateUniqueId()
const fileType = '.jpg'
const key = imageId + fileType
uploadImage(key, source.uri).then(result => {
console.log('Did upload image!', result)
})
}
}
And the client side function that calls the Stitch function:
export const uploadImage = (key, body) => {
const client = Stitch.defaultAppClient
return client.callFunction('uploadImage', [key, body])
}
I can successfully upload what appears to be an image file to S3, but when i download the file, I can't open it:
You have to convert the base64 image to BSON.Binary:
context.services.get("MY_S3_SERVICE").s3("us-east-1").PutObject({
Bucket: "my_bucket_on_s3",
Key: "hello.jpg",
ContentType: "image/jpeg",
Body: BSON.Binary.fromBase64("iVBORw0KGgoAA... (rest of the base64 string)", 0),
})
I have my REST API where I put my pdf file, now I want my angular app to download it on click via my web browser but I got HttpErrorResponse
"Unexpected token % in JSON at position 0"
"SyntaxError: Unexpected token % in JSON at position 0↵ at JSON.parse (
this is my endpoint
#GetMapping("/help/pdf2")
public ResponseEntity<InputStreamResource> getPdf2(){
Resource resource = new ClassPathResource("/pdf-sample.pdf");
long r = 0;
InputStream is=null;
try {
is = resource.getInputStream();
r = resource.contentLength();
} catch (IOException e) {
e.printStackTrace();
}
return ResponseEntity.ok().contentLength(r)
.contentType(MediaType.parseMediaType("application/pdf"))
.body(new InputStreamResource(is));
}
this is my service
getPdf() {
this.authKey = localStorage.getItem('jwt_token');
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/pdf',
'Authorization' : this.authKey,
responseType : 'blob',
Accept : 'application/pdf',
observe : 'response'
})
};
return this.http
.get("http://localhost:9989/api/download/help/pdf2", httpOptions);
}
and invocation
this.downloadService.getPdf()
.subscribe((resultBlob: Blob) => {
var downloadURL = URL.createObjectURL(resultBlob);
window.open(downloadURL);});
I resolved it as follows:
// header.component.ts
this.downloadService.getPdf().subscribe((data) => {
this.blob = new Blob([data], {type: 'application/pdf'});
var downloadURL = window.URL.createObjectURL(data);
var link = document.createElement('a');
link.href = downloadURL;
link.download = "help.pdf";
link.click();
});
//download.service.ts
getPdf() {
const httpOptions = {
responseType: 'blob' as 'json')
};
return this.http.get(`${this.BASE_URL}/help/pdf`, httpOptions);
}
I solved the issue in this way (please note that I have merged multiple solutions found on stack overflow, but I cannot find the references. Feel free to add them in the comments).
In My service I have:
public getPDF(): Observable<Blob> {
//const options = { responseType: 'blob' }; there is no use of this
let uri = '/my/uri';
// this.http refers to HttpClient. Note here that you cannot use the generic get<Blob> as it does not compile: instead you "choose" the appropriate API in this way.
return this.http.get(uri, { responseType: 'blob' });
}
In the component, I have (this is the part merged from multiple answers):
public showPDF(fileName: string): void {
this.myService.getPDF()
.subscribe(x => {
// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
var newBlob = new Blob([x], { type: "application/pdf" });
// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(newBlob, fileName);
return;
}
// For other browsers:
// Create a link pointing to the ObjectURL containing the blob.
const data = window.URL.createObjectURL(newBlob);
var link = document.createElement('a');
link.href = data;
link.download = fileName;
// this is necessary as link.click() does not work on the latest firefox
link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));
setTimeout(function () {
// For Firefox it is necessary to delay revoking the ObjectURL
window.URL.revokeObjectURL(data);
link.remove();
}, 100);
});
}
The code above works in IE, Edge, Chrome and Firefox. However, I don't really like it, as my component is pulluted with browser specific stuff which will surely change over time.
For Angular 12+, I came up with something like this:
this.ApiService
.getFileFromApi()
.pipe(take(1))
.subscribe((response) => {
const downloadLink = document.createElement('a');
downloadLink.href = URL.createObjectURL(new Blob([response.body], { type: response.body.type }));
const contentDisposition = response.headers.get('content-disposition');
const fileName = contentDisposition.split(';')[1].split('filename')[1].split('=')[1].trim();
downloadLink.download = fileName;
downloadLink.click();
});
The subscribe is on a simple get() with the Angular HttpClient.
// api-service.ts
getFileFromApi(url: string): Observable<HttpResponse<Blob>> {
return this.httpClient.get<Blob>(this.baseApiUrl + url, { observe: 'response', responseType: 'blob' as 'json'});
}
You can do it with angular directives:
#Directive({
selector: '[downloadInvoice]',
exportAs: 'downloadInvoice',
})
export class DownloadInvoiceDirective implements OnDestroy {
#Input() orderNumber: string;
private destroy$: Subject<void> = new Subject<void>();
_loading = false;
constructor(private ref: ElementRef, private api: Api) {}
#HostListener('click')
onClick(): void {
this._loading = true;
this.api.downloadInvoice(this.orderNumber)
.pipe(
takeUntil(this.destroy$),
map(response => new Blob([response], { type: 'application/pdf' })),
)
.subscribe((pdf: Blob) => {
this.ref.nativeElement.href = window.URL.createObjectURL(pdf);
this.ref.nativeElement.click();
});
}
// your loading custom class
#HostBinding('class.btn-loading') get loading() {
return this._loading;
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
In the template:
<a
downloadInvoice
[orderNumber]="order.number"
class="btn-show-invoice"
>
Show invoice
</a>
My answer is based on #Yennefer's, but I wanted to use the file name from the server since I didn't have it in my FE. I used the Content-Disposition header to transmit this, since that is what the browser uses for a direct download.
First, I needed access to the headers from the request (notice the get method options object):
public getFile(): Observable<HttpResponse<Blob>> {
let uri = '/my/uri';
return this.http.get(uri, { responseType: 'blob', observe: 'response' });
}
Next, I needed to extract the file name from the header.
public getFileName(res: HttpResponse<any>): string {
const disposition = res.headers.get('Content-Disposition');
if (!disposition) {
// either the disposition was not sent, or is not accessible
// (see CORS Access-Control-Expose-Headers)
return null;
}
const utf8FilenameRegex = /filename\*=UTF-8''([\w%\-\.]+)(?:; |$)/;
const asciiFilenameRegex = /filename=(["'])(.*?[^\\])\1(?:; |$)/;
let fileName: string = null;
if (utf8FilenameRegex.test(disposition)) {
fileName = decodeURIComponent(utf8FilenameRegex.exec(disposition)[1]);
} else {
const matches = asciiFilenameRegex.exec(disposition);
if (matches != null && matches[2]) {
fileName = matches[2];
}
}
return fileName;
}
This method checks for both ascii and utf-8 encoded file names, prefering utf-8.
Once I have the file name, I can update the download property of the link object (in #Yennifer's answer, that's the lines link.download = 'FileName.ext' and window.navigator.msSaveOrOpenBlob(newBlob, 'FileName.ext');)
A couple of notes on this code:
Content-Disposition is not in the default CORS whitelist, so it may not be accessible from the response object based on the your server's configuration. If this is the case, in the response server, set the header Access-Control-Expose-Headers to include Content-Disposition.
Some browsers will further clean up file names. My version of chrome seems to replace : and " with underscores. I'm sure there are others but that's out of scope.
//Step: 1
//Base Service
this.getPDF() {
return this.http.get(environment.baseUrl + apiUrl, {
responseType: 'blob',
headers: new HttpHeaders({
'Access-Control-Allow-Origin': '*',
'Authorization': localStorage.getItem('AccessToken') || ''
})
});
}
//Step: 2
//downloadService
getReceipt() {
return new Promise((resolve, reject) => {
try {
// {
const apiName = 'js/getReceipt/type/10/id/2';
this.getPDF(apiName).subscribe((data) => {
if (data !== null && data !== undefined) {
resolve(data);
} else {
reject();
}
}, (error) => {
console.log('ERROR STATUS', error.status);
reject(error);
});
} catch (error) {
reject(error);
}
});
}
//Step 3:
//Component
getReceipt().subscribe((respect: any) => {
var downloadURL = window.URL.createObjectURL(data);
var link = document.createElement(‘a’);
link.href = downloadURL;
link.download = “sample.pdf";
link.click();
});
This also works in IE and Chrome, almost the same answer only for other browsers the answer is a bit shorter.
getPdf(url: string): void {
this.invoiceService.getPdf(url).subscribe(response => {
// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
const newBlob = new Blob([(response)], { type: 'application/pdf' });
// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(newBlob);
return;
}
// For other browsers:
// Create a link pointing to the ObjectURL containing the blob.
const downloadURL = URL.createObjectURL(newBlob);
window.open(downloadURL);
});
}
It has been hours now, since I am trying to figure out how to download a zip file using Angular.
The file downloaded is smaller than the original file. I followed this link How do I download a file with Angular2.
I am not simply using the <a> tag for the download for authentication reason.
service
downloadfile(filePath: string){
return this.http
.get( URL_API_REST + 'downloadMaj?filePath='+ filePath)
.map(res => new Blob([res], {type: 'application/zip'}))
}
component
downloadfileComponent(filePath: string){
this.appService.downloadfile(filePath)
.subscribe(data => this.getZipFile(data)),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.');
}
getZipFile(data: any){
var a: any = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
var blob = new Blob([data], { type: 'application/zip' });
var url= window.URL.createObjectURL(blob);
a.href = url;
a.download = "test.zip";
a.click();
window.URL.revokeObjectURL(url);
}
rest api
public void downloadMaj(#RequestParam(value = "filePath") String filePath, HttpServletResponse response) {
System.out.println("downloadMaj");
File fichierZip = new File(filePath);
try {
System.out.println("nom du fichier:" + fichierZip.getName());
InputStream inputStream = new FileInputStream(fichierZip);
response.addHeader("Content-Disposition", "attachment; filename="+fichierZip.getName());
response.setHeader("Content-Type", "application/octet-stream");
org.apache.commons.io.IOUtils.copy(inputStream, response.getOutputStream());
response.getOutputStream().flush();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
Anyone could tell why all the file is not downloaded?
Solved
downloadfile(filePath: string) {
return this.http
.get( URL_API_REST + 'download?filePath=' + filePath, {responseType: ResponseContentType.ArrayBuffer})
.map(res => res)
}
private getZipFile(data: any) {
const blob = new Blob([data['_body']], { type: 'application/zip' });
const a: any = document.createElement('a');
document.body.appendChild(a);
a.style = 'display: none';
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = test.zip;
a.click();
window.URL.revokeObjectURL(url);
}
In responseType you need to assign a string, in this case, is arraybuffer (Angular 5+)
downloadFile(filename: string) {
return this.http.get(URL_API_REST + 'download?filename=' + filename, {
responseType: 'arraybuffer'
});
}
We can do a window to download directly our file using next code:
this.myService.downloadFile(filename).subscribe(data => {
const blob = new Blob([data], {
type: 'application/zip'
});
const url = window.URL.createObjectURL(blob);
window.open(url);
});
There are multiple plugins you'll need to get zip download working using angular:
angular-file-saver.bundle
This plugin will bundle Blob.js and FileSaver.js
follow all instructions now just add dependencies on your controller and module.
.module('fileSaverExample', ['ngFileSaver'])
.controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);
add JSZip and JSZipUtils
Include files:jszip.js, jszip-utils.js, angular-file-saver.bundle.js
var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
// when everything has been downloaded, we can trigger the dl
zip.generateAsync({type:"blob"}).then(function (blob) { // 1) generate the zip file
FileSaver.saveAs(blob, "downloadables.zip"); // 2) trigger the download
}, function (err) {
console.log('err: '+ err);
});
In Angular there is no need of jsZip-util ,you can simple make an service call with header options.
public zipAndDownload(url): Observable<any> {
const options:any = {
headers: new HttpHeaders({'Content-Type': 'file type of an particular document'}),
withCredentials: true,
responseType:'arraybuffer'
};
return this.http.get<Content>(url,options);
}
I use FileSaver
to save files on my local machine. It accepts either blob or string data and saves the file with the given/default name. From the official document:
function FileSaver.saveAs(data: string | Blob, filename?: string, options?: FileSaver.FileSaverOptions): void
Download.Service.ts
downloadFile() {
return this.http.get(url, { params, responseType: 'arraybuffer', observe: 'response' }).pipe(
map(res => res)
);
}
my.component.ts
this.downloadService.downloadFile().subscribe((response: HttpResponse<any>) => {
if(response.body) {
let fileName = "download.zip";
const cDisposition: string = response.headers.get('content-disposition');
if (cDisposition && cDisposition.indexOf(';filename=') > -1) {
fileName = cDisposition.split(';filename=')[1];
}
const data = new Blob([new Uint8Array(response.body)], {
type: 'application/octet-stream'
});
FileSaver.saveAs(data, fileName);
}
})