I have a file input element with an accept attribute which should allow various video formats. The only one I cannot select is MKV.
<input id="fileOne" type="file" accept="video/mp4,.mp4,video/avi,.avi,video/mpeg,.mpeg,.mpg,video/3gpp,.3gp,.divx,video/x-flv,.flv,video/x-matroska,.mkv,video/quicktime,.mov,audio/ogg,.ogg,video/webm,.webm,video/x-ms-wmv,.wmv">
It is set to accept the following:
video/mp4,.mp4,
video/avi,.avi,
video/mpeg,.mpeg,.mpg,
video/3gpp,.3gp,.divx,
video/x-flv,.flv,
video/x-matroska,.mkv,
video/quicktime,.mov,
audio/ogg,.ogg,
video/webm,.webm,
video/x-ms-wmv,.wmv
I cannot select MKV files in Safari when opening the file upload dialog. (The filename is greyed out). Should I be doing something different?
I have tagged PLUpload as I am generating the file upload element using PLUpload with the following filters:
filters: {
mime_types: [
{ title: "Video Files", extensions: "mp4,avi,mpeg,mpg,3gp,divx,flv,mkv,mov,ogg,webm,wmv" }
]
}
Related
I'm trying to add a subtitle track to a video and I can't figure out why it isn't working correctly. Here is my HTML:
<video controls>
<source src="../assets/video/sample.mp4" type="video/mp4" />
<track
src="../assets/video/sample.vtt"
kind="subtitles"
srclang="en"
label="English"
/>
</video>
And here is my .vtt file:
WEBVTT
00:00:00.500 --> 00:00:02.000
The Web is always changing
00:00:02.500 --> 00:00:04.300
and the way we access it is changing
Problem:
When I run my website locally the video will load, but when I click on the closed captions button and select English, there is a console error that reads:
GET http://localhost:8080/assets/video/sample.vtt 404 (Not Found).
If I deploy the website and run it from the server instead, selecting the English subtitle track doesn't display any errors, but...
The subtitles don't appear on the video.
The Closed Captions button is removed from the video player controls on Chrome.
In other browsers, the Closed Caption button remains, but everything else is identical.
If I check the Network tab in Chrome dev tools, I can see that the request was made for sample.vtt at the correct request URL and returned a 200 status code.
The odd thing is that when I look at the response for that request, instead of seeing the text of the .vtt file, it shows the full text of my website's index.html file, which is located in an entirely separate folder.
I'm not sure why this is happening, and it seems like this should be a relatively simple thing to set up, so I can't figure out what's going wrong.
This ended up being an issue with Webpack. This app is in Vue, so I added the following options under the "vue" rule in vue.config.js, and it worked:
config.module
.rule("vue")
.use("vue-loader")
.loader("vue-loader")
.tap((options) => {
options.transpileOptions = {
transforms: {
dangerousTaggedTemplateString: true,
},
};
options["transformAssetUrls"] = {
video: ["src", "poster"],
source: "src",
img: "src",
image: ["xlink:href", "href"],
use: ["xlink:href", "href"],
"b-embed": ["src", "poster"],
track: "src",
};
return options;
});
config.module
.rule("media")
.test(/\.(vtt|mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/);
I've tried to restrict file types that can be selected by Expo.DocumentPicker.getDocumentAsync, but without success.
How to filter many mimeTypes at once?
I already tried as follow:
Expo.DocumentPicker.getDocumentAsync({type: "image/*;application/pdf"});
and
Expo.DocumentPicker.getDocumentAsync({type: "image/*,application/pdf"});
and
Expo.DocumentPicker.getDocumentAsync({type: ["image/*","application/pdf"]}); //CRASH
I'm using sdk 27.0.0.
Some suggestion? Expo team? :}
Reference:
https://docs.expo.io/versions/latest/sdk/document-picker#type-string----the-mime-type-of
Currently, it seems that we can't pass multiple mime types on document picker of expo as it is of string type and not an array. Also there's an open issue regarding the same here
I tried to implement similar to this using any one of the following MIME types to upload certain file types only:
let result = await DocumentPicker.getDocumentAsync({
type: "*/*" // all files
// type: "image/*" // all images files
// type: "audio/*" // all audio files
// type: "application/*" // for pdf, doc and docx
// type: "application/pdf" // .pdf
// type: "application/msword" // .doc
// type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" // .docx
// type: "vnd.ms-excel" // .xls
// type: "vnd.openxmlformats-officedocument.spreadsheetml.sheet" // .xlsx
// type: "text/csv" // .csv
});
for other MIME types, checkout this
I have a audit table and audit_report field.Field type is text .I saved pdf files into folder and saved name to database.I tried to display the pdf on view page. but the box with image sign only getting. I could display jpeg and png files nicely.How to display PDF on view page of yii2 framework.
This would work,
return Yii::$app->response->sendFile($completePath, $filename, ['inline'=>true]);
Input the function with third param as array of value 'inline'=>true to open the file within the browser window.
See the documentation here sendFile()
You could add a button that opens the file in a new tab, but make it link to an action in your controller that returns the file instead of the direct path to the file:
In your view:
<?= Html::a('PDF', [
'controller/pdf',
'id' => $model->id,
], [
'class' => 'btn btn-primary',
'target' => '_blank',
]); ?>
In your controller:
public function actionPdf($id) {
$model = ModelClass::findOne($id);
// This will need to be the path relative to the root of your app.
$filePath = '/your/file/path';
// Might need to change '#app' for another alias
$completePath = Yii::getAlias('#app'.$filePath.'/'.$model->fileName);
return Yii::$app->response->sendFile($completePath, $model->fileName);
}
Aliases - Key Concepts - The Definitive Guide to Yii 2.0
Although the question has been answered there is one thing that needs to be addressed if you have the file content/stream instead of the file path, like for instance you are using Dropbox API and you receive a stream from the API and want to display that file instead of forcing the browser to download.
For this case you can use the sendContentAsFile when attempting to display the PDF file in the browser you will need to specify the mimeType option too along with the "inline"=>true because the default mimeType value is set to application/octet-stream which is used to download a file and to display inline in browser you need to change it to application/pdf.
return Yii::$app->response->sendContentAsFile(
$fileContent,
$filename,
['inline' => true, 'mimeType' => 'application/pdf']
);
I use Selenium to test web app behaviour on file upload page.
The goal of test is to check application validations on file selection.
I use webDriver.SendKeys (C#) on file input to simulate file upload, file is selected successfully, but fileInput.files[0].size (js) is always 0 (or undefined?) and app shows error "Do not upload empty files". File size is correct on manual testing.
Any suggestions, on how to solve the problem?
UPDATE Code details:
HTML
<input id="file-path" type="file" data-bind="attr: { accept: mimeTypes }, event: { change: onFileSelect }" />
<small id="file-path-error" class="field-validation-error" data-bind="validationMessage: file"></small>
JS (file edit model uses knockout)
this.file = ko.observable().extend({
validation: [
{
validator: function(file) {
// valid if no file or file size < 5Mb
return !file || file.size < 5242880;
},
message: 'File size should be less than 5Mb'
}, {
validator: function(file) {
// valid if no file or file size > 0
return !file || file.size > 0;
},
message: 'Do not upload empty files'
}
]
});
this.onFileSelect = function(model, event) {
var fileInput;
fileInput = event.target;
if ((fileInput.files != null) && fileInput.files.length > 0) {
_this.file(fileInput.files[0]);
} else {
_this.file(null);
}
};
C#
webDriver.FindElement(By.Id("file-path")).SendKeys("C:\testFile.txt");
Assert.AreEqual(webDriver.FindElement(By.Id("file-path-error").Text,"");
Assertion always fails because file-path-error contains "Do not upload empty files" - that is the problem.
I was misleaded by answers on How to automate file upload in Internet Explorer using Selenium?
Discusstion on How to set a value to a file input in HTML? says that actually we can not upload files programmatically.
So there was no sence in expecting decent behaviour for such test.
I'm looking to build a photo management app and I've decided to use Filepicker.io with Amazon s3 to manage the uploads/hosting of static files. I plan on having Filepicker handle the upload of images to s3, and then I will store the url of the image in a database -- these urls will be embedded in a template. For example,
HTML:
<input type="file" name="datafile">
{{#if src}}
<img src='{{src}}'>
{{/if}}
Javascript :
'change input' : function (e, t) {
var file = e.currentTarget.files[0];
if (file) {
filepicker.store(file, function(fp){
// Set URL to fpURL
}, function(err){
console.log('error', err);
}, function(progress){
console.log('loading', progress);
});
}
}
My question: Is it better to store the filepicker url in the database? Or should I be saving the key url, which can link directly to s3?
My filePicker success object looks like this:
{url: "https://www.filepicker.io/api/file/wppeyWAUQaaX0HPgXQ",
size: 76511, type: "image/png",
key: "EdqmSpbDQziIvSfI4g_logo.png",
filename: "logo.png"}
We recommend storing the URL directly, as that way you can take advantage of the conversion features and other functionality we provide on top of the URLs. Plus, you don't have to mess with the S3 APIs directly and can perform GETs and POSTs on the url instead