I'm working on a project where the back end is composed of a AspNet Web Api application. I have a link to download the video archive, but I don't know how to integrate this with the setup of jwplayer. It doesn't work if I just write this link to the File parameter like:
jwplayer("myElement").setup({
//file: "big_buck_bunny.mp4",
file: "http://localhost:52272/api/donwloadfile/1",
primary: 'flash',
});
If I have a local file like in the commented line, it works fine, but not with the link.
This is my back end code:
result = Request.CreateResponse(HttpStatusCode.OK);
result.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
result.Content.Headers.ContentDisposition.FileName = midia.Titulo;
Use this, and it will work:
jwplayer("myElement").setup({
//file: "big_buck_bunny.mp4",
file: "http://localhost:52272/api/donwloadfile/1",
primary: 'flash',
type: 'mp4'
});
Related
I am using minio to manage the files
const getMinioClient = () => {
const minioClient = new Minio.Client({
endPoint: '127.0.0.1',
port: 9000,
useSSL: false,
accessKey: 'minioadmin',
secretKey: 'minioadmin'
});
return minioClient;
};
uploadFile(bucketName, newFileName, localFileLocation,metadata={}) {
return new Promise((resolve, reject) => {
const minioClient = getMinioClient();
//'application/octet-stream'
minioClient.fPutObject(bucketName, newFileName, localFileLocation, metadata , (err, etag) => {
if (err) return reject(err);
return resolve(etag);
});
});
}
with the following code I can upload the file, after successfully uploading it returns me only with etag, but I want to get the download link, how would I get it directly without searching the filename again.
You won't be able to get something like Public URL/Link for accessing images unless you ask for it to manually generate a time limited download URL using something like:
https://min.io/docs/minio/linux/reference/minio-mc/mc-share-download.html#generate-a-url-to-download-object-s
One workaround is to let nginx directly access the location you are uploading your files to:
https://gist.github.com/harshavardhana/f05b60fe6f96803743f38bea4b565bbf
After you have successfully written your file with your code above, you can use presignedUrl method to generate the link to your image.
An example for Javascript is here: https://min.io/docs/minio/linux/developers/javascript/API.html#presignedUrl:~:text=//%20presigned%20url%20for%20%27getObject%27%20method.%0A//%20expires%20in%20a%20day.%0AminioClient.presignedUrl(%27GET%27%2C%20%27mybucket%27%2C%20%27hello.txt%27%2C%2024*60*60%2C%20function(err%2C%20presignedUrl)%20%7B%0A%20%20if%20(err)%20return%20console.log(err)%0A%20%20console.log(presignedUrl)%0A%7D)
In any case you have to set an expiration time. Here or you set a very long time, which is suitable to your app or if you have a backend, require the images from Frontend through the backend with the getObject method: getObject(bucketName, objectName, getOpts[, callback]).
https://min.io/docs/minio/linux/developers/javascript/API.html#presignedUrl:~:text=getObject(bucketName%2C%20objectName%2C%20getOpts%5B%2C%20callback%5D)
If you have only a few number of static images to show in your app, (which are not uploaded by your app), you can also create the links manually with tme minio client or from the Minio-UI.
Hi I recently started working on angular and I have a requirement to create and download excel file using asp.net web api and angular 8
I created excel file using Asp.net Web API and returning file as
return File(excelPackage.GetAsByteArray(), "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "test.xlsx");
I have to read this excel file using angular and download
GetExportExcel(editQuoteFilters: EditQuoteModel):Observable<any>{
let postHeaders = new HttpHeaders();
postHeaders.append('Content-Type', 'application/json');
postHeaders.append('responseType', 'blob');
return this.http.post<any>(this.ExcelExportLevel0ApiUrl, editQuoteFilters,{ headers: postHeaders,
responseType : 'arraybuffer' as 'json'})
.pipe(map((res) =>{
var blob = new Blob([res.blob()], {type: "application/vnd.ms-excel"})
return blob
})
);
}
You can use file-saver
import { saveAs } from 'file-saver';
this.http.post(this.ExcelExportLevel0ApiUrl, editQuoteFilters, { responseType: 'blob' }).subscribe((resp: any) => {
let fileName = "test";
FileSaver.saveAs(resp, `${fileName}.xlsx`);
});
Stackbiltz code
How can I delete an image's file from the server using Parse Cloud Code. I am using back4app.com
After Deleting Image Row
I am getting the images urls, then calling a function to delete the image using its url
Parse.Cloud.afterDelete("Image", function(request) {
// get urls
var imageUrl = request.object.get("image").url();
var thumbUrl = request.object.get("thumb").url();
if(imageUrl!=null){
//delete
deleteFile(imageUrl);
}
if(thumbUrl!=null){
//delete
deleteFile(thumbUrl);
}
});
Delete the image file from the server
function deleteFile(url){
Parse.Cloud.httpRequest({
url: url.substring(url.lastIndexOf("/")+1),
method: 'DELETE',
headers: {
'X-Parse-Application-Id': 'xxx',
'X-Parse-Master-Key': 'xxx'
}
}).then(function(httpResponse) {
console.log(httpResponse.text);
}, function(httpResponse) {
console.error('Request failed with response code ' + httpResponse.status);
});
}
for security reasons, not is posible to delete directly the image from Back4App, using DELETE from SDK or REST API. I believe that you can follow the guide below:
https://help.back4app.com/hc/en-us/articles/360002327652-How-to-delete-files-completely-
After struggling with this for a while it seems to be possible through cloud function as mentioned here. One need to use MasterKey in the cloud code:
Parse.Cloud.define('deleteGalleryPicture', async (request) => {
const {image_id} = request.params;
const Gallery = Parse.Object.extend('Gallery');
const query = new Parse.Query(Gallery);
try {
const Image = await query.get(image_id);
const picture = Image.get('picture');
await picture.destroy({useMasterKey: true});
await Image.destroy();
return 'Image removed.';
} catch (error) {
console.log(error);
throw new Error('Error deleting image');
}
});
For me it was first confusing since I could open the link to that file even after I deleted the reference object in the dashboard, but then I found out that the dashboard is not calling Parse.Cloud.beforeDelete() trigger for some reason.
Trying to download the data from the url after deleting the file through the cloud code function returns 0kB data and therefore confirms that they were deleted.
i am trying to post an image to a a backend server that is an Express Server.
I am using cordova file transfer(installed through cordova plugin add cordova-plugin-file-transfer )
I have imported the file transfer like this:
import {Transfer} from 'ionic-native';
here is my component that posts the file to the server
save() {
base64Image = open("/Users/user1/1.jpg");
let ft = new Transfer();
let filename = "example" + ".jpg";
let options = {
fileKey: 'file',
fileName: filename,
mimeType: 'image/jpeg',
chunkedMode: false,
headers: {
'Content-Type' : undefined
},
params: {
fileName: filename
}
};
ft.upload(base64Image, "http://localhost:3500/api/v1/file", options, false);
}
the error i get whenever i call the save function is:
FileTransfer is not defined
help will be appreciated
Install with ionic since you are using ionic-native.
ionic plugin add cordova-plugin-file-transfer --save.
The save option is to ensure there is an entry in config.xml.
Also call any plugin within
platform.ready().then(()=>{})
Plugins are loaded after the app is loaded.
UPDATE:
Cordova is not supported and most plugins will not load with ionic serve command.
You need to run it in an emulator or a device.
I'am trying to run a web server and open an HTML file via gulp-connect and gulp-open.
The server is running, the html is opened correctly but not through the server but as a file from the HDD.
On the URL address bar I can see: "file:///Users/...." instead of "http://localhost:9000/"
Does anyone know what could be the issue ?
Thanks for your help
"use strict";
var gulp = require('gulp');
var gulpConnect = require('gulp-connect'); // run a local dev server
var gulpOpen = require('gulp-open'); // open a URL in the browser
var config ={
port:'9000',
baseDevUrl:'http://localhost',
paths: {
html: './src/*.html',
dist:'./dist'
}
};
// start a local development server
gulp.task('connect',function(){
gulpConnect.server({
root:['dist'],
port: config.port,
base: config.baseDevUrl,
livereload:true
});
});
gulp.task('open',['connect'],function(){
gulp.src('dist/index.html')
.pipe(gulpOpen('',{ url: config.baseDevUrl +':'+ config.port +'/', app:'google chrome'}));
});
gulp.task('html',function(){
gulp.src(config.paths.html)
.pipe(gulp.dest(config.paths.dist))
.pipe(gulpConnect.reload());
});
gulp.task('watch',function(){
gulp.watch(config.paths.html,['html']);
});
gulp.task('default',['html','open','watch']);
OK here is how you open things:
gulp.src('./index.html').pipe(gulpOpen({uri: 'http://localhost:8888', app: 'Google Chrome'}));
You've got an extra first parameter in gulpOpen and url should be uri
Good luck!