i am using Microsoft.Web.Helpers.FileUpload
#FileUpload.GetHtml(
name: "file",
initialNumberOfFiles: 1,
allowMoreFilesToBeAdded: false,
includeFormTag: false,
addText: "",
uploadText: "Upload Logo"
)
when i run my application it displays a button saying 'Choose File' and text to the right of the button saying 'No File Chosen' then when i choose a file it replaces the 'No File Chosen' with e.g. 'Example.jpg'
How do i make it so 'No File Chosen' is not displayed?
Related
I'm practicing building a Hybrid Mobile app with Quasar, Vue and Vuex.
I've successfully added my form input fields to my Vuex store but I don't know how to upload a file, in this case a photo, within my Form.
Here is my q-file input from my form, with the data.
<q-file
v-model="mealToSubmit.photo"
label="Upload File"
outlined
>
Data:
data () {
return {
mealToSubmit: {
name: '',
description: '',
photo: null,
grams: '',
calories: '',
visible: false
}
}
}
After I fill in the Form and click Save, all of the data appears on the page except for the photo I selected. In the console I get a 404 error:
404 http://localhost:8080/img/null 404 (Not Found)
I can see the problem here is that it's displaying null, instead of the name of the photo I upload, which is why I'm getting a 404 error.
Here are two screenshots, one of me filling in the Form and second is the data being displayed properly except for the photo, with the error message in the console.
NOTE:
Just to add to this, I've uploaded files before using Vue js and Bootstrap-Vue. I add an #change event on the File input with a v-model like this:
<b-form-group label="Upload Profile Photo (optional)" label-for="photo_id">
<b-form-file
v-model="profileData.photo_id"
id="photo_id"
placeholder="Choose a file..."
#change="attachImage"
accept=".jpg, .jpeg, .png"
></b-form-file>
</b-form-group>
Than in the Methods{}:
methods: {
attachImage(evt) {
const file = evt.target.files[0];
let reader = new FileReader();
reader.addEventListener('load', function() {
}.bind(this), false);
reader.readAsDataURL(file);
},
}
And then I bind the data using FormData(); and send it to the backend. This approach isn't working with the Quasar file upload input and the code that I have above.
I got it now:
<q-file
#input="getFile"
label="Upload file"
/>
methods: {
getFile(file) {
// file is in the file variable
this.mealToSubmit.photo = file
}
}
We are using Cloudinary UI widget.
When the user clicks on a button to upload, we show this widget.
Once, the user clicks on the select file button, window dialog is open for selection of files.
But, is there any way to bypass this popup & directly make the user click on select file button programmatically by means of any Cloudinary upload UI parameters.
You can load the widget in a div. For example-
<h2>Make sure to update cloud_name and upload_preset.</h2>
<div id="inline_container"></div>
<div id="thumbnails"></div>
cloudinary.openUploadWidget(
{
cloud_name: 'cloud_name',
upload_preset: 'upload_preset',
cropping: 'server',
multiple: false,
max_files: 1,
thumbnails: '#thumbnails',
inline_container: "#inline_container",
keep_widget_open: false,
cropping_show_dimensions: true,
sources: ['local']
},
function(error, result) {
console.log(error, result);
if (result != null)
$('#inline_container').html(""); // Will remove the widget after successful upload
}
);
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" }
]
}
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 have a "select" type:
Blah
I have it's values initialized in javascript:
$('a[name="my_name"]').editable({
url: 'blah.php',
name: 'my_name',
source: [
{value: 'Foo', text: 'Foo'},
{value: 'Bar', text: 'Bar'}
]
});
I disable the field on page load with this code: (I have a button that turns on the field whence clicked)
$(document).ready(){
$('a[name="my_name"]').editable('disable');
});
The problem is the "source" values DO NOT get read in when 'enabling' the link.
If I comment out the disable code on page load, the editable field works fine. Only when I first disable, and then enable does this happen. Any clues why?