I am trying to upload a file but getting error "The specified selector does not match a file input element", I know testcafe requires input type="file" for uploading files, But as we are reusing our custom component for file uploads where we are giving input type="url" It's not working with testcafe.
Here is the java script/HTML code
<input name="images" accept="image/*" type="url" class="form-control col-11 false" value="">
And I am trying to access the css selector like this
const click_add_image=Selector('input[name="images"]')
const add_image=Selector('input[name="images"],input[inputtype="url"]')
test
('add images', async t=>{
await t
.click(click_add_image)
.wait(2000)
.setFilesToUpload(add_image,[
'./_uploads_/Share_Knowledge.png'
])
I am getting error The specified selector does not match a file input element
Related
I have such an input file tag:
<input type="file"
#fileInput formControlName="browseDocument"
id="uploadFile"
(change)="uploadFileEvt($event)"
name="uploadFile"
accept=".pdf,.xml"
/>
I want to test the upload file, but I need that uploadFileEvt function will be executed.
How could I cause it to happen in the test?
Thanks!
I think you just need to use .trigger('change') after the .attachFile() or .selectFile(),
cy.get('input[type=file]')
.selectFile({...})
.trigger('change')
I have an input field for image upload in my view:
<input type="file" class="form-control" name="image">
I have created folder uploads in my public folder and in my Controller I am trying to upload a file like this:
$path = $request->file('image')->store('uploads/', 'public');
When I submit the form and upload an image nothing gets uploaded to the folder uploads and I get the error:
SQLSTATE[HY000]: General error: 1364 Field 'image' doesn't have a
default value
Have you try to put enctype and files on your form ->
enctype="multipart/form-data" files="true"
I am implementing Cloudinary Jquery Upload. From my file upload webpage, if I surf to another website ( google.com, or any external website), and then click on the back button on the browser into this same file upload page, the upload fails.
The error message I gotten back is (from Firebug):
400 Bad Request
{"error":{"message":"Upload preset Must specify upload preset when using unsigned upload”}}
I did not enable unsigned upload on the Cloudinary management console
because my intention is a signed upload
This is the JSON data that is created at the backend for data-form-data:
{"timestamp":1409146953,"callback":"http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html","signature":"19071a3e822eed51238454e359589f52cccca042","api_key":"224456847515364”}
Below is the javascript and input HTML:
<script type="text/javascript”>
$.cloudinary.config({cloud_name:'dashy', api_key:’XXXXXXXXXXXXXXX'});
</script>
<input name="file" type="file" id="uploadinput" class="cloudinary-fileupload" data-cloudinary-field="image_upload"
data-form-data="" ></input>
<script>
$.ajax({
url: '/filer',
type: 'POST',
success: function(response){
$('#uploadinput').attr('data-form-data', response);
}
});
</script>
This is the Ruby backend that generates JSON:
post '/filer' do
ts = Time.now.getutc.to_time.to_i.to_s
secret="XXXXXXXXXXXXXXXXXXXXXX"
altogether="callback=http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html×tamp="+ts+secret
sig=Digest::SHA1.hexdigest altogether
ts = Time.now.getutc.to_time.to_i
{:timestamp => ts, :callback => "http://newappsure.herokuapp.com/vendor/cloudinary/cloudinary_cors.html", :signature => sig, :api_key =>"XXXXXXXXXXXXXXXX"}.to_json
end
Please help me understand what did I do wrong?
While your solution may work, the more optimal way is to update the upload parameters to call $(...).fileupload({formData: data}) where data is the parameters hash (not JSON serialized).
For more information:
http://support.cloudinary.com/entries/24950218-Why-is-updating-a-cloudinary-fileupload-field-dynamically-not-working-
Got it working by forcing the page to reload with the following snippets (ref: https://stackoverflow.com/a/9217531/3781343 and http://www.webdeveloper.com/forum/showthread.php?137518-How-to-refresh-page-after-clicking-quot-Back-quot-button)
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
onload=function(){
var e=document.getElementById("refreshed");
if(e.value=="no")e.value="yes";
else{e.value="no";location.reload();}
}
</script>
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 only find the file reading API on the server side. How should I read a file on the client side, with a filter dialog?
Thanks!
You can use an HTML file input with an accept attribute to restrict the type of file:
<input id="fileSelect" type="file" name="file" accept="image/*">
Then you can listen for the user selecting the file with a change event:
Element fileSelect = query("#fileSelect");
fileSelect.onChange.listen( (event) => print('${event.target.files[0].name}'));
event.target.files is a FileList object.