In my vue/cli 4 / Bootstrap 4.3 app I use vue-upload-component component for files uploading
and it works ok. I want to add cypress for testing file uploading and I
added https://github.com/abramenal/cypress-file-upload/tree/v3.5.3 into my project, but failed
with this testing.
I have in vue file:
<file-upload
ref="upload"
v-model="imageFiles"
post-action="/post.method"
put-action="/put.method"
#input-file="inputFile"
#input-filter="inputFilter"
:multiple="false"
class="btn btn-outline-secondary btn-sm m-2 file-input-class"
data-cy="file-input"
>
<i :class="'action_link '+getHeaderIcon('upload')"></i>Upload image
</file-upload>
...
const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)
and in my browser it is rendered into :
<span class="btn btn-outline-secondary btn-sm m-2 file-input-class file-uploads file-uploads-html5" data-cy="file-input">
<i class="action_link fa fa-upload"></i>
Upload image
<label for="file"></label>
<input type="file" name="file" id="file">
</span>
I cypress test file I do :
import 'cypress-file-upload'
describe('Admin category fileupload functionality', () => {
...
const fileName = '/sample_images/sample.png';
cy.contains('Image Preview/Upload')
cy.fixture(fileName).then(fileContent => {
// cy.find('#file')
// .should('have.value', 'Invalid Text')
console.log('++Inside Tests cy::')
console.log(cy)
cy.get('#file').upload({ fileContent, fileName, mimeType: 'image/png' });
});
But in the console I got error:
THEN function(){}
TypeError: cy.get(...).upload is not a function
I see next ouput of cy var :
Also in testing code above to uncomment 2 lines :
cy.find('#file')
.should('have.value', 'Invalid Text')
I do not have should errors, as I expected, asnd I do not understand why ?
How to make file uploading testing?
"axios": "^0.19.0",
"cypress-file-upload": "^4.0.6",
"file-saver": "^2.0.2",
"vue": "^2.6.10",
"vue-upload-component": "^2.8.20",
Thanks!
You're showing "^4.0.6" as your cypress-file-upload version. There is a difference between the latest version and version 3.5.3.
The exposed command has changed from upload() to attachFile() since version 4.0.0
There is also a note in the latest version saying it's unstable at the moment. Maybe you should revert back to 3.5.3 and keep your code as is.
Related
I am building a web app using nuxt, vuetify 2.x, and typescript.
I want to upload file using v-file-input but have some issue upon selecting the same file.
For example, when I select some file and then close the dialog without saving it,
I cannot select the same file(i.e.#change is not firing)
what I have tried:
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetForm() {
(this.$refs.form as HTMLFormElement).reset();
},
resetImageUploader() {
(this.$refs.imageUploader as any).reset();
},
}
(resetForm() is called when dialog is closed)
I've tried resetting imageuploader when the input form is clicked, but it did not work.
I've tried (this.$refs.imageUploader as any).value = '' instead of reset() but it did not work.
Btw, When I select the file, clear icon appears like this
If I clear the form by clicking this icon, I can select the same file..
Does anyone have idea how I can solve this issue?
try to do like below to reset
<v-file-input
accept="image/png, image/jpeg"
ref="imageUploader"
:value="internalVal"
#click="resetImageUploader"
placeholder="upload image"
prepend-icon="mdi-camera"
#change="changeImage"
></v-file-input>
script:
methods: {
resetImageUploader() {
this.internalVal = []
},
}
I am new to Vue.js and I am trying to solve the following issue.
I have a component which look as follows:
<template>
<div class="capture-photo">
<input id="chooseFile"
type="file"
accept="image/*"
capture="environment"
#change="onImageCaptured($event.target.name,
$event.target.files)">
<div v-show="imgURL">
<img v-bind:src="imgURL" style="width:200px">
<button id="sendImage" v-on:click.prevent="post">Send Image</button>
<div id="extractedLink">
<a id="extractedLinkButton" v-bind:href="urlLink">{{ urlLink }}</a>
</div>
</div>
and I am trying to run a test that would check that the link is clicked and redirects to the correct page (the urlLink is defines in the data element of my component. The testing in done using nightwatch and the test code looks like this:
'Redirect the extracted url to the actual website': function test(browser) {
const devServer = browser.globals.devServerURL;
browser
.url(devServer)
.waitForElementVisible('#app', 5000)
.click('input[id="chooseFile"]')
.setValue('input[type="file"]', require('path').resolve('http://www.coolture.pt/wp-content/uploads/2017/10/nos-alive-18-3.jpg'))
.click("#sendImage")
.assert.elementPresent('#extractedLink', 'http://nosalive.com')
.assert.elementPresent("#extractedLinkButton")
.click("#extractedLinkButton")
.assert.urlEquals('http://nosalive.com')
.end();
},`
when running the test, the error message that I receive is the following:
TEST FAILURE: 1 assertions failed, 35 passed. (38.623s)
✖ capturePhoto
- Redirect the extracted url to the actual website (2.8s)
Testing if the URL equals "http://nosalive.com". - expected "http://nosalive.com" but got: "http://localhost:8081/#/"`
where http://nosalive.com, being the urlLink value.
Any help would be greatly appreciated.
Thank you
N
Expected Behavior
Create the Chips component with the autocomplete option using Javascript (no jQuery).
Current Behavior
Running the component I get the message
materialize.min.js:6 Uncaught TypeError: Cannot read property '0' of null
at n.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:104488)
at new n (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:101364)
at Function.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:11799)
at Function.value (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/js/materialize.min.js:6:106244)
Steps to Reproduce
Codepen link: Using 1.0.0-alpha3
HTML:
<div class="row">
<div class="col s12 m6">
Groups:
<div class="chips chips-autocomplete-groups"> </div>
</div>
</div>
JS:
var elem = document.querySelector('.chips-autocomplete-groups');
if (elem != null) {
var insChipAC = M.Chips.init(elem, {
placeholder: 'Enter a group',
secondaryPlaceholder: '+Group',
autocompleteOptions: {
data: {
'Alex': null,
'Brandy': null,
'Charlie': null
},
limit: Infinity,
minLength: 1
}
});
}
In 1.0.0-alpha2 version I was able to create the component
Codepen link: Using 1.0.0-alpha2
Environment
Version used: 1.0.0-alpha3
Browser Name and version: Chrome 63.0.3239.108
Operating System and version (desktop or mobile): Ubuntu 16.04
It's a bug. Fixed in https://github.com/Dogfalo/materialize/pull/5514 (link do pull request)
I am trying to create a simple web app in google scripts with the HTML api.
code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(formObject) {
var formBlob = formObject.myFile;
var driveFile = DriveApp.createFile(formBlob);
return driveFile.getUrl();
}
index.html
<script>
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Got it!';
}
</script>
<form id="myForm">
<input name="myFile" type="file" />
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateUrl)
.processForm(this.parentNode)" />
</form>
<div id="output"></div>
The form fails to submit. I´m using google chrome Versión 30.0.1599.101 m
This appears in the console: Uncaught NetworkError: Form submission failed.
Here is the app: https://script.google.com/d/1yrgM20n1ZI99bChN2qtQWgGck36OccLN3A16Gn7tCPvsJw0EcK_ql7C5/edit?usp=sharing
Maybe you should add encoding="multipart/form-data" attribute to form tag.
If not solved already – did you try changing the input type from "button" to "submit"? On top of that I'd also try giving it another value than "Submit" since that might interfere with the actual submit parameter.
I am trying to recreate this example in my project, to add the drag and drop feature to the dojo uploader:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/form/tests/test_Uploader.html
Copying the exact same code in jsfiddle or in my application the line
if(uploader.addDropTarget && uploader.uploadType=='html5'){
returns undefined for addDropTarget and iframe for the uploadType.
I tried it with various browsers, and even added force: html5 in the uploader but nothing changed.
Please, note that everything works ok except from the dnd.
I am using dojo 1.8.1.
In dojo 1.8, the uploader is not yet fully AMD compliant. So, in order to make the example from the trunk tests work in 1.8, you need to create the uploader programmatically using the dojox.form.Uploader constructor rather the required AMD module. As follows :
<form method="post" action="UploadFile.php" id="myForm" enctype="multipart/form-data" >
<fieldset>
<legend>DnD Test</legend>
<input class="browseButton" id="uploader"/>
<input type="submit" label="Submit" data-dojo-type="dijit/form/Button" />
<div id="files" data-dojo-type="dojox/form/uploader/FileList" data-dojo-props='uploaderId:"uploader"' ></div>
</fieldset>
</form>
<div id="dropTarget">Drop files here !</div>
And in the javascript :
require([
'dojo/parser',
'dojo/dom',
'dijit/registry',
'dojox/form/Uploader',
'dojox/form/uploader/FileList',
'dojox/form/uploader/plugins/HTML5',
'dojo/domReady!'
], function(parser, dom, registry, ready){
var dropTarget = dom.byId('dropTarget'), uploader;
parser.parse().then(function(){
// You need to use dojox.form.Uploader, as in dojo 1.8,
// the module is not fully AMD compliant yet.
uploader = new dojox.form.Uploader({
name:'uploadedfile',
label:'Select Some Files',
multiple:true,
force:'html5'
}, 'uploader');
uploader.startup();
if(require.has('file-multiple')){
console.debug("Adding a new drop target");
registry.byId('uploader').addDropTarget(dropTarget);
}
});
});
See http://jsfiddle.net/psoares/6r2jZ/